一、html-webpack-plugin 自动生成HTML,下载完后webpack.config 多了html-webpack-plugin这个选项
二、回到webpack.config.js配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
三、配置webpack插件后dist 多了一个index.html
四、可在引处自定义title等
plugins: [
new HtmlWebpackPlugin({
title: '自定义title',
template:"./src/index.html"
})
]
五、新建一个网页模版在src下打包之后,再生成网页根据模版来
六、cnpm i -D webpack-dev-server 在package.json里设置启动浏览器
"start": "webpack serve",
七、重新编译清空之前dist里的东西
cnpm i -D clean-webpack-plugin
在webpack.config.js引入
//引处clean插件
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
并在
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// title: '自定义title',
template: "./src/index.html"
})
],
八、引用模块设置
在webpack.config.js
// 用来设置引用模块
resolve: {
extensions: ['.ts', '.js']
}