webpack中的插件

1、最常用的webpack插件：

（1）webpack-dev-server

每当修改了源代码，webpack会自动进行项目的打包和构建

>npm install webpack-dev-server@3.11.2 -D

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

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

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

终止操作：在终端操作快捷键ctrl+c

（2）html-webpack-plugin

可以通过此插件自定制index.html页面的内容。

npm install html-webpack-plugin@5.3.2 -D

在webpack.config.js中配置html-webpack-plugin

//导入HTML插件，得到一个构建函数
const HtmlPlugin = require('html-webpack-plugin')

//构建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',//指定原文件的存放路径
    filename:'./index.html',//指定生成的文件的存放路径
})

module.exports = {
    mode:'development',
    plugins:[htmlPlugin],//通过plugins节点，使htmlPlugin插件生效
}