传送门：
四、打包html，以及html-webpack-plugin的详细配置
1、安装plugin npm install -D html-webpack-plugin
package.json中：
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
},
2、在webpack.config.js中引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
3、在plugins中配置(我这里配置的是两个页面index和list)
此处用到了两个模板页面，需要先在根目录下新建两个文件index.html和list.html
new HtmlWebpackPlugin({
title: "webpack template",
template: "./index.html",
filename: "index/index.html"
}),
new HtmlWebpackPlugin({
title: "webpack template",
template: "./list.html",
filename: "list/list.html",
chunks: ['list']//引入的js
})
4、执行命令 nom run dev,打包后的文件如下
5、关于html-webpack-plugin的详细参数配置
new HtmlWebpackPlugin({
title: "webpack template",//在html使用ejs语法时生效
template: "./list.html",
filename: "list/list.html",
chunks: ['list'],//允许注入的js文件
excludeChunks: ['index'],// 阻止注入某些js文件
inject: "body",//（true | body）添加静态资源在body底部 | head添加静态资源在head | false阻止添加静态资源
favicon: "",//值是一个路径，在生成的html中生成一个favicon
minify: false,//默认值是false，是否对生成的html进行压缩
hash: true,//默认值是false，清楚缓存， 添加一个hash值在包含的脚本和css中
cache: true,//默认是true，内容变化时形成新的文件
showErrors: true,// 默认是true,错误信息输出到html文件中
meta: {} //值是对象，设置元信息。
})
五、配置webpack-dev-serve,进行热更新
1、安装webpack-dev-serve ,命令 npm install webpack-dev-serve -D
2、在webpack.config.js中配置devServer
3、devServe参数配置详解
devServer: {
contentBase: path.join(__dirname, "dist"),//项目的目录
host: "localhost",//ip
port: 2020,//端口
open: true,//自动打开浏览器
hot: true,//开启热替换
// useLocalIp: true,
openPage: "index/index.html",
compress: true,//gzip压缩
//header:{ }//设置响应头，
overlay: true,//编译失败，在浏览器显示错误
//stats: 'errors-only',//编译时命令行打印的内容 可选值 'minimal', 'normal', 'verbose'
proxy: {//跨域
'/api': {
target: '', // 目标接口的域名
// secure: true, // https 的时候 使用该参数
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' // 重写路径
}
}
}
},
4、修改package.json 下的script
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js"
},
5、命令npm run dev 会启动node服务，自动打开浏览器页面
传送门：
