html文件实践总结,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()

],