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. 抽取在多个入口文件中的公共模块到一个单独的文件

你可能感兴趣的:(webpack2)