webpack的实践与优化

wepback的主要优化方式分为很多种，下面介绍一下比较实用的几种方式，在项目中都是可以用到的

• 编译的时候彩色显示进度、时间 好看又装逼

webpack config webpack.config.js --progress --profile --colors

• 设置打包环境变量为producation,可以减小打包后的大小

webpack -p // 会自动将process.env.NODE_ENV 设置为production  同时会使用UglifyJsPlugin

• 设置sourceMap,方便日后debug(可以在控制台soure中看到源文件) 同时应该避免使用inline-和 eval-的devtool选项，因为他们会增打包块的体积

    devtool: process.env.NODE_ENV === 'production' ? cheap-module-source-map : cheap-module-eval-source-map, 
    plugins: [
     new webpack.optimize.UglifyJsPlugin({      // webpack3 配置
       sourceMap: true
     })
     
     
//  同时可以通过在output中设置 sourceMapFilename来指定map的位置
// 如果用了extract-text-webpack-plugin插件的话，将devtool选项改成source-map，不然的话css的sourcemap不会生效

• 利用CommonsChunkPlugin抽离公共代码(第三方库等等)，由于第三方库的变动不怎么频繁，因此我们可以抽离为公共代码，缓存在浏览器，这样的话可以减少网络请求，提升速度

  entry: {
      vendor: ["react", "react-router"]  // 定义公共的依赖库
  }，
  plugins: {
      new webpack.optimize.CommonsChunkPlugin({
          name: "vendor",    // 生成的名字，
          async: true      // 异步加载公共块只有当需要用的时候才会下载
      })
  }

• 利用require.context请求某个目录下的所有文件

require.context(string, boolean ,RegExp)
// 第一个参数是目录路径
// 第二个参数是 是否搜索其子目录
// 第三个参数是 匹配文件的正则表达式

importAll(r) {
    return r.keys().map(r)
}

importAll(require.context('./test', false, /\.js$/))   // 返回一个包含test文件夹下所有以js结尾的模块的数组

• 利用ExtractTextWebpackPlugin抽离css文件

  plugins: [
    new ExtractTextPlugin({
        filename: '[name].css',  //  string || function
        llChunks: true  // boolean
    }),
  ]

• 利用scope hoisting特性减小打包块

 plugins：[
   new webpack.optimize.ModuleConcatenationPlugin()  //  只限于webpack 3.x版本
 ]

• 如果每次build，我们都会更新hash值，哪怕我们一行代码都没有动过，也会重新生成，意味着用户需要重新下载，没有合理地运用到缓存，我们可以利用chunk-manifest-webpack-plugin webpack-chunk-has来进行缓存，同时这个插件会降低build速度，所以只建议在生产环境中使用

const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');

const config = {
    plugins: = [
        new WebpackChunkHash(),
        new ChunkManifestPlugin({
            filename:    'chunk-manifest.json',
            manifestVariable: 'webpackManifest',
            inlineManifest: true,
        }),
        new HtmlWebpackPlugin({  // 自动在模板文件中生成chunk-manifest.json
          inlineManifestWebpackName: 'webpackManifest',
        })
}