webpack2
output
-
hash和chunkhash，主要作用是用来去缓存
- hash ===> webpack编译过程
- chunkhash ===> 打包后文件内容的hash
-
异步加载
-
chunkFilename
指定的输出文件名会在
require.ensure打包出来的文件生效 -
require.ensure
符合AMD规范，在
ensure函数中最后指定的名字，可以在chunkFilename中通过[name]使用// index.js require.ensure([], function() { require('index1.js') }, 'dynamic') // webpack.config.js output: { chunkFilename: [name].js // ===> dynamic.js } publicPath
-
modules中，webpack2推荐使用新的写法，但是旧的写法也兼容
-
resolve ===> alias，为require的文件写alias
// 不使用alias，只能直接require文件路径 require('./test/test.js') // 使用alias，`test: path.resolve(__dirname, 'test/test.js')` require('test') -
devtool
-
'source-map'
devtool: 'source-map' -
'cheap-source-map'
代码量比直接编译后的代码要少，但不是
origin code
-
-
loader ===> options
{ test: /\.html/, use:{ loader:"html-loader", options:{ minimize: false, attrs:false } } }loader中的options用来个性化loader的行为
-
ExtractTextWebpackPlugin插件
-
require('./index.less')默认行为是，经过loader处理后变成css文件，然后在head中生成一个style标签，使用内嵌css的方式 - 使用
ExtractTextWebpackPlugin把css文件抽取出来合并成一个css文件，以link的形式放在head中
-
-
常见plugins
-
ProvidePlugin
new webpack.ProvidePlugin({ $: 'jquery', })自动加载模块，无论何时在模块中
$是一个自由变量，不需要require进来，jquery模块会自动加载，然后jquery模块的输出作为$填充加载的模块 -
CommonsChunkPlugin
- 使用这个插件后必须在html中先引入
common.js，然后再引入index.js，否则会报错 - 如果直接使用插件，没有在entry中定义
common入口，那么作用是提取webpack bootstrap到一个单独的文件中 - 抽取在多个入口文件中的公共模块到一个单独的文件
- 使用这个插件后必须在html中先引入
-
