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

最近在项目中使用了一下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 使用起来感受很是新颖，也容易入手！今天总结的可能是入门的内容，后续还要继续使用~

参考文章

1. Webpack傻瓜式指南 (很是棒的教程，很详细，保证你入门)
2. 【前端构建】WebPack实例与前端性能优化
3. webpack异步加载业务模块
4. webpack 学习笔记 03 Code Splitting