webpack实践笔记（三）--- 总结

webpack实践笔记（三）--- 总结

loaders

须要单独安装而且在config文件中的modules下进行配置，配置参数有：

• test：匹配loaders处理的文件的拓展名的正则表达式（必须）

• loader：loader的名称（必须），loader 通常以 xxx-loader 的方式命名，xxx 表明了这个 loader 要作的转换功能，好比 css-loader。

• include：必须处理的文件（文件夹）（可选）

• exclude: 屏蔽不须要处理的文件（文件夹）（可选）

• query：为loaders提供额外的设置选项（可选)

css-loader 和 style-loader区别

• css-loader实现读取功能

• style-loader将全部的计算后的样式加入页面中

• 两者组合在一块儿使你可以把样式表嵌入webpack打包后的JS文件中

...
{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader'
}
// 感叹号的做用在于使同一文件可以使用不一样类型的loader
...

plugins

loaders和plugins是彻底不一样的东西，loaders是在打包构建过程当中用来处理源文件的（js，scss，less..），一次处理一个，
插件并不直接操做单个文件，它直接对整个构建过程其做用。

HtmlWebpackPlugin

依据一个简单的模板，生成最终的html文件，这个文件中自动引用了你打包后的js文件。
每次编译都在文件名中插入一个不一样的哈希值。

HMR

Hot Module Replacement容许你在修改组件代码后，自动刷新实时预览修改后的效果。
在webpack中实现HMR也很简单，只须要作两项配置:

• 在webpack配置文件中添加HMR插件

• 在Webpack Dev Server中添加“hot”参数

devServer: {
    hot: true,
    inline: true
},
plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.html"
    }),
    new webpack.HotModuleReplacementPlugin()
  ],