Webpack（三）插件配置

三、webpack插件配置

1、html-webpack-plugin插件

（1）下载：npm install html-webpack-plugin --save-dev

（2）webpack.dev.config.js配置：

//导入html-webpack-plugin模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //添加插件
    plugins:[
        new HtmlWebpackPlugin({
            //插件的执行运行与元素索引有关
            template:'./src/index.html', //参照物
        })
    ]
}

（3）解析：

• 能从src文件夹（配置的入口文件夹）内将index.html文件生和打包一起生成到指定的文件夹内

2、webpack-dev-server实时监听插件

（1）下载：npm i webpack-dev-server --save-dev

（2）package.json配置：

（2-1）常用配置参数

• --open 自动打开浏览器
• --hot 热更新 ，不在舒心的情况下替换 css样式
• --inline 自动刷新
• --port 9999 指定端口
• --process 显示编译进度

"scripts": {
    "dev": "webpack --config ./webpack.dev.config.js",
    "devs":"webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js",
    "prod": "webpack --config ./webpack.prod.config.js"
},