webpack2

output

1. hash和chunkhash，主要作用是用來去緩存

   • hash ===> webpack編譯過程
   • chunkhash ===> 打包后文件內(nèi)容的hash

2. 異步加載

   1. chunkFilename

      指定的輸出文件名會在require.ensure打包出來的文件生效

   2. require.ensure

      符合AMD規(guī)范，在ensure函數(shù)中最后指定的名字，可以在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')默認(rèn)行為是，經(jīng)過loader處理后變成css文件，然后在head中生成一個style標(biāo)簽，使用內(nèi)嵌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. 抽取在多個入口文件中的公共模塊到一個單獨的文件