目录

第二章 webpack 中的常用插件

webpack-dev-server 和 html-webpack-plugin

1.1、webpack-dev-server 的安装

1.2、webpack-dev-server 的配置

???????????????1.2.1、devServer 节点

1.3、html-webpack-plugin 的安装

1.4、html-webpack-plugin 的配置???????

---

第二章 webpack 中的常用插件 webpack-dev-server 和 html-webpack-plugin

1.1、webpack-dev-server 的安装

运行如下的命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

?注意： webpack-dev-server 会启动一个实时打包的 http 服务器

1.2、webpack-dev-server 的配置

①? 修改 package.json →?scripts 中的 dev 命令如下：

"scripts": { "dev": "webpack serve" }

②?再次运行 npm run dev 命令，重新进行项目的打包

③?在浏览器中访问 http://localhost:8080 地址，查看自动打包效果?

1.2.1、devServer 节点

????????在 webpack.config.js?配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：（在 module.exports 中添加）

devServer: { open: true, // 初次打包完成后，自动打开浏览器 host: '127.0.0.1', // 主机地址 port: 8080 // 端口号 }

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

1.3、html-webpack-plugin 的安装

运行如下的命令，即可在项目中安装此插件：

npm install html-webpack-plugin@5.3.2 -D

1.4、html-webpack-plugin 的配置 const path = require('path') // 1、导入 html 插件，得到一个构造函数 const HtmlPlugin = require('html-webpack-plugin') // 2、创建 html 插件的实例对象 const htmlPlugin = new HtmlPlugin({ template: './src/index.html', // 指定原文件的存放路径 filename: './index.html' // 指定生成的文件的存放路径 }) module.exports = { mode: 'development', entry: path.join(__dirname, './src/index.js'), output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' }, devServer: { open: true, port: 8080, host: '127.0.0.1' }, plugins: [htmlPlugin] // 3、通过 plugins 节点，使 html 插件生效 }

总结：

????????html-webpack-plugin 此插件可以为 index.html 文件中自动生成 scrtipt 标签，所以此处可以将原来的script标签移除 。

? ?

作用：

?????????1、复制文件路径。

? ? ? ? ?2、在复制出的页面中自动注入script脚本。

链接--------------第三章 webpack 中的 loader---------------

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。