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()
],
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。