Webpack -key word:安装配置&Loaders&Plugins&compilation

喜欢ヅ旅行 2022-04-05 05:09 215阅读 0赞

由于我安装的是webpack 4.0后的版本，参考的资料又是4.0前的，所以遇到了很多问题：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

以上黄色字体警告的解决办法：**在webpack.config.js配置中添加 mode:'production'**

webpack升级4.0新增mode属性，需在package.json中设置。

版本升级4.0后，需将webpack.config.js中的“loaders”修改为"rules"。

更换打包命令为$ webpack demo.js **-o** demo.bundle.js ，其中 demo.dundle.js是打包后生成的文件的文件名。与老命令相比多加一个-o。

解决方法参考：[https://blog.csdn.net/lplife/article/details/80650993][https_blog.csdn.net_lplife_article_details_80650993]

经历了配置过程中的各种坑，终于成功安装上了webpack，并能成功把项目打包。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1][]

webpack 命令执行后，会默认载入当前目录的 webpack.config.js 文件。

\_\_dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

npm的`start`命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用`npm start`就可以执行其对于的命令。在`package.json`中对`scripts`对象进行相关设置即可→"start": "webpack"。

我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

![325][]

学习webpack参考：[https://segmentfault.com/a/1190000006178770\#articleHeader4][https_segmentfault.com_a_1190000006178770_articleHeader4]

Loaders需要单独安装并且需要在`webpack.config.js`中的`modules`关键字下进行配置，Loaders的配置包括以下几方面：test,loader,include/exclude,query。

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。

cnpm install css-loader style-loader

Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。

安装一个htmlWebpackPlugin插件，$ npm i --save-dev html-webpack-plugin，这个插件的作用是依据一个简单的模板，帮助生成最终的Html5文件，这个文件中自动引用了打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2][]

filename: "js/\[name\]-\[chunkhash\].bundle.js"        在js文件夹下面存放不同哈希值的打包文件，\[name\]是入口文件名：

![20181216122412327.png][]

根据不同的页面指定不同的模板

关于webpack中<%= htmlWebpackPlugin.options.title %> 无法解析的原因：注释掉\{test : /\\.html$/, loader : 'html-loader'\} 的loader即可正常显示htmlwebpackPlugin中变量的值。因为html-webpack-plugin会与全局配置的html-loader发生冲突，造成webpack无法解析ejs语句。同时注意大小写，我const的是HtmlWebpackPlugin，但是在<%= %>必须为：htmlWebpackPlugin。

紧接着我又遇到了一个问题，很神奇的是运行后除了main.html页面可以生成，a.html和b.html都显示了Cannot read property 'entry' of undefined。

解决方法：我的 index.html 文件里用 script 引用了 js，删除后重新运行就好了，注释没有用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20220405/f6126c5ec257401cbd2e020552d09902.png
[https_blog.csdn.net_lplife_article_details_80650993]: https://blog.csdn.net/lplife/article/details/80650993
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1]: /images/20220405/ca7f7b66b08540d580c3ae71c12d4391.png
[325]: /images/20220405/10b26ebeddab4e1ab6bd2b99f199651c.png
[https_segmentfault.com_a_1190000006178770_articleHeader4]: https://segmentfault.com/a/1190000006178770#articleHeader4
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2]: /images/20220405/0e4b381b52584f198aba41a198d828fa.png
[20181216122412327.png]: /images/20220405/adc560d8c67241d697e0e1de5614f81b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 3]: /images/20220405/3eef5b23fc2c4e2fb965efcbbb61d50a.png