webpack2

webpack2

output

1. hash和chunkhash，主要作用是用来去缓存

   • hash ===> webpack编译过程
   • chunkhash ===> 打包后文件内容的hash

2. 异步加载

   1. chunkFilename

      指定的输出文件名会在require.ensure打包出来的文件生效

   2. require.ensure

      符合AMD规范，在ensure函数中最后指定的名字，可以在chunkFilename中通过[name]使用

      // index.js
      require.ensure([], function() {
          require('index1.js')
      }, 'dynamic')
      // webpack.config.js
      output: {
          chunkFilename: [name].js  // ===> dynamic.js
      }
      

   3. publicPath

3. modules中，webpack2推荐使用新的写法，但是旧的写法也兼容

4. resolve ===> alias，为require的文件写alias

   // 不使用alias，只能直接require文件路径
   require('./test/test.js')
   // 使用alias，`test: path.resolve(__dirname, 'test/test.js')`
   require('test')
   

5. devtool

   1. 'source-map'

      devtool: 'source-map'
      

   2. 'cheap-source-map'

      代码量比直接编译后的代码要少，但不是origin code

6. loader ===> options

   {
       test: /\.html/,
       use:{
           loader:"html-loader",
           options:{
               minimize: false,
               attrs:false
           }
       }
   }   
   

   loader中的options用来个性化loader的行为

7. ExtractTextWebpackPlugin插件

   1. require('./index.less')默认行为是，经过loader处理后变成css文件，然后在head中生成一个style标签，使用内嵌css的方式
   2. 使用ExtractTextWebpackPlugin把css文件抽取出来合并成一个css文件，以link的形式放在head中

8. 常见plugins

   1. ProvidePlugin

      new webpack.ProvidePlugin({
        $: 'jquery',
      })
      

      自动加载模块，无论何时在模块中$是一个自由变量，不需要require进来，jquery模块会自动加载，然后jquery模块的输出作为$填充加载的模块

   2. CommonsChunkPlugin

      1. 使用这个插件后必须在html中先引入common.js，然后再引入index.js，否则会报错
      2. 如果直接使用插件，没有在entry中定义common入口，那么作用是提取webpack bootstrap到一个单独的文件中
      3. 抽取在多个入口文件中的公共模块到一个单独的文件