3webpack中的插件
3.1webpack插件的作用
安装和配置第三方插件，拓展webpack的能力，从而让webpack用起来更方便。
常用的webpack插件：
1.webpac-dev-server：
每当修改源代码，webpack会自动进行项目的打包和构建
2.html-webpack-plugin：
可以通过此插件自定制index.html页面的内容
3.2webpac-dev-server
3.2.1安装 webpac-dev-server
运行如下命令安装插件：
npm install webpac-dev-server -D
3.2.2配置 webpac-dev-server
1.修改package.json中的script的dev命令：
"scripts": { "dev": "webpack serve" },
2.再次运行 npm run dev。
3.在浏览器中访问 http://localhost:8080/ 查看打包效果。
webpack会启动一个实时打包的http服务器。
如果报错了是webpack-cli的版本不兼容，重新安装webpack-cli的最新版本。
npm install webpack webpack-cli -D
3.2.3打包生成文件的位置
不配置webpack-dev-server的情况下，webpack打包生成的文件，会存放到实际的物理磁盘上。
严格遵守开发者在webpack.config.js 中指定配置
根据output节点指定路径进行存放
配置了webpack-dev-server 之后，打包生成的文件存放到了内存中
不再根据output节点指定的路径，存放到实际的物理磁盘上
提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
webpack-dev-server生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
3.2.4修改html中引入的js文件路径
由于：
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
对应的文件在内存中，文件之间的关系发生了变化。
所以需要修改html中导入的js。
<script src="/main.js"></script>
在浏览器中打开 http://localhost:8080/ 打开src(浏览器会自动打开index.html)
3.3html-webpack-plugin
3.3.1html-webpack-plugin作用
html-webpack-plugin会把指定的页面复制到根目录中，在复制页面的同时会自动注入一个脚本，使得可以直接访问链接查看网页的效果，不用在点击src文件夹。
3.3.2安装 html-webpack-plugin
npm install html-webpack-plugin -D
3.3.3在webpack.config.js文件中配置
配置之后的webpack.config.js文件：
//导入html-webpack-plugin插件 得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // new构造函数创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 filename: './index.html' }) // 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式，可选值有两个development和production mode: 'development', // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin] }
通过插件复制到项目根目录的index.html会被放到内存中，插件在生成index.html页面会自动注入打包的index.js文件。
3.4devServer节点
在webpack.config,js配置文件中，可以通过devServer节点对 webpack-dev-server插件进行更多的配置。
3.4.1设置打包完成后自动打开浏览器
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式，可选值有两个development和production mode: 'development', // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:80, // 指定主机运行的地址 host:'127.0.0.1' } }
下一篇
webpack ---- webpack 中的 loader
