webpack——插件

安装webpack插件的作用

通过安装和配置第三方插件，可以拓展webpack的能力，从而让webpack用起来方便。最常用的webpack插件有如下两个：

1. webpack-dev-server

• 类似于node.js阶段用到的nodemon工具
• 每当修改了源代码，webpack会自动进行项目的打包和构建

        2.html-webpack-plugin

• webpack中的HTML插件（类似于一个模版引擎插件）
• 可以通过此插件自定制index.html页面的内容

安装webpack-dev-server：   npm install webpack-dev-server -D

    配置webpack-dev-server：

1. 修改package.json->scripts中的dev命令如下：

"scripts":{
"dev":"webpack serve"
//script节点下的脚本可以通过  npm run 执行  
}

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

       3.查看自动打包效果

⚠️webpack-dev-server会启动一个实时打包的http服务器

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，代码如下：

devServer:{
open:true  //初次打包完成后，自动打开浏览器
port:80.    //实时打包所使用的端口号
host :'127.0.0.1'     //实时打包所使用的主机地址
}

⚠️凡是改变了webpack.config.js配置文件，就修改了pageage.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效。

安装 html-webpack-plugin：npm install html-webpack-plugin -D

配置 html-webpack-plugin

//导入HTML插件，得到一个构造函数。
const  HtmlPlugin = require('html-webpack-plugin')
//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html',  //指定原文件的存放路径
filename:'./index.html'     //指定生成文件的存放路径,将指定的页面放入根目录里面。
}
module.exports = {
plugins:[htmlPlugin] //通过plugins插件，使htmlPlugin插件生效
}

1.  ⚠️通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中。
2. ⚠️HTML插件在生成index.html页面，自动注入了打包的bundle.js文件。