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

2024年4月23日 193次阅读 来源: silence

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()
  ],
    原文作者：silence
    原文地址: https://segmentfault.com/a/1190000006941462
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞