详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)


Posted in Javascript onJune 20, 2017

最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结

为什么是webpack

1.webpack一下自己就?了,这绝对是一个重要的原因。

2.然后我之前项目中都是通过requireJS,通过AMD来做到模块化开发。webpak不仅支持打包,而且支持AMD 和 CommonJS方式来做模块化开发,所以打算尝试一下webpack来实现模块化。

3.我的需求简单,适合新上手webpack,只需要生成上线目录,实现模块化,压缩代码等等

webpack实战

webpack.config.js 一般写法

开头声明对路径相关的变量,以及引入依赖,包括webpack(非必须),以及需要的插件
 然后,entry 声明入口相关的如文件名,路径等,output 声明生成文件相关的路径和文件名,module 中是针对不同文件进行处理的 loader 声明,plugins 声明了插件的具体使用。

压缩代码

这里使用webpack的内置的插件,我们写在webpack.config.js 中的plugins 部分

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  }
})

提取公共类库

这部分我没有用到,但也是基于webpack 内置的插件,目的是将用到的jquery 等第三方库整合到一个文件,否则都合并到一个文件,会造成这个文件特别大

首先在entry 声明第三方库

entry: {
  app: path.resolve(APP_PATH, 'index.js'),
  //添加要打包在vendeors里面的库
  vendors: ['jquery', 'moment']
},
plugins: {
   //把入口文件里面的数组打包成vendors.js
  new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
}

css 单独打包

有的时候需要将css 单独打包,作为CDN,或者我这里的情况是是,页面引入了很多的css js 文件,而我的js 在最后加载!所以如果是js 中引入的css ,那么会导致页面在开始的时候没有样式,知道解析到我的js !所以这里将css 单独打包,单独在页面引入!

首先需要安装插件

npm install extract-text-webpack-plugin ?save-dev

然后在webpack.config.js 中声明插件

// 引入css 单独打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 设置生成css 的路径和文件名,会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractTextPlugin('./css/[name].min.css');

在plugins 中引入并使用

plugins: [
  packCSS
 ]

我们需要首先在js 中引用相应的css文件

require('./css/plan.css');

然后这个插件会自动将js中的css文件提取出来,生成单独的文件

样式的处理

安装 css-loader style-loader

npm install css-loader style-loader --save-dev

css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style

module: {
   loaders: [
    { 
     test: /\.css$/,
     loaders: ['style', 'css'],
     include: APP_PATH
    }
   ]
 }

图片的处理

安装 url-loader

npm install url-loader --save-dev

webpack.config.js

{
  test: /\.(png|jpg)$/,
  loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'

}

limit 设置一个阈值,小于这个值得图片就会自动启用 base64 编码的图片,大于这个值的图片会打包到name 这参数对应的路径,图片名称就会包括8位md5编码 name 对应文件本来名称,ext 对应扩展名

我在图片这里遇到的问题和 css 类似,都是原本我是在 js 中引入 css img 等静态资源。但是
 因为我的页面引入了很多的 css, js 文件,而我的js文件放到最后加载,所以会导致我的js引用的css img 在最后才加载。这会导致页面开始的时候会出现没有样式,而图片刚开始会显示失败的问题。

我本来也希望将 img 单独打包,但是搜索也实践了,没有找到可靠地实现方式,于是我把图片放到了其他公共资源目录(~~~~(>_<)~~~~,只好暂时出此下策了)

一个页面一个js 文件

我做的项目是多个页面的,所以需要生成每个页面对应的不同 js。这里的处理方法就是我们每个 js 都作为一个不同的入口文件现在 enrty 中。这样设置好 output 中的公共路径,就能得到不同的 js 文件。

entry: {
    creative: './src/static/js/apps/idea.js',
    plan: './src/static/js/apps/plan.js',
  },
  output: {
    path: 'dist/',
    filename: 'js/[name].min.js'
  }

更新

代码切分以及异步加载

今天遇到的问题是,我做的一个页面是要分为四个步骤,每个步骤在进入下一步的时候需要对下一步的内容进行接口请求,页面渲染和事件绑定等操作。

之前的做法

拆分了各个步骤对应模块之后,我通过commonJS的方式在入口文件开头引入了各个模块

这时候是这样的

var stepOne = require('./mods/stepone.js');
  var steptwo = require('./mods/steptwo.js');
  ...

  // 使用的时候
  stepone.checkOne();

这种做法,因为commonJS 的同步加载机制,会导致入口文件打包之后非常臃肿。在首屏,用到用不到处理代码的都会在一开始就加载,严重影响了首屏加载时间。

代码切分之后

我利用webpack的code splitting 特性,将各个步骤的代码进行拆分,实现按需加载。这里主要利用了 webpack 的 require.ensure 函数实现的。非常方便,只需要把异步加载的代码,放到 require.ensure 里面的回调函数就可以实现:

require.ensure(['./mods/stepone.js'], function(){
    var stepone = require('./mods/stepone.js');
    stepone.checkone();
  }, 'stepone'); // 第三个参数设置打包名称

这样设置,webpack 就会单独生成拆分的文件,我们还需要设置拆分文件的名字和路径。这里我费了一番周折。

webpack 默认给拆分的文件用数字命名,如果我们自己不进行设置,会得到 1.min.js 这样类似的文件。我们可以在 webpack.config.js 中,通过 output.chunkFilename 来设置分块生成文件的名称,分块的路径可以通过 output.publicPath 设置。这里一定要设置 publicPath,不然得到的路径有可能不是我们上线打包的路径。具体我的设置如下:

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/apps/[name].min.js',
    publicPath: '/dist/', // 设置require.ensure路径
    chunkFilename: 'js/apps/[name].min.js' // 设置require.ensure 文件名
  }

总结

webpack 使用起来感觉非常新颖,也容易入手!今天总结的多是入门的内容,后续还要继续使用~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
详解Angular的8个主要构造块
Jun 20 #Javascript
vue之数据交互实例代码
Jun 20 #Javascript
jquery加载单文件vue组件的方法
Jun 20 #jQuery
Angular.JS中select下拉框设置value的方法
Jun 20 #Javascript
原生js二级联动效果
Jun 20 #Javascript
angularjs下拉框空白的解决办法
Jun 20 #Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 #Javascript
You might like
新52大事件
2020/03/03 欧美动漫
Php获取金书网的书名的实现代码
2010/06/11 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
django中send_mail功能实现详解
2018/02/06 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python主要用于哪些方向
2020/07/05 Python
Python 如何查找特定类型文件
2020/08/17 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
临床医学专业毕业生的自我评价
2013/10/17 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers