安装依赖
install html-webpack-plugin clean-webpack-plugin -D
配置webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {
CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "development",
entry: {
main: "./src/main.js",
test: "./src/js/test.js",
},
plugins: [
// 打包前清理dist
new CleanWebpackPlugin(),
// 生成HTML文件并导入js和css
new HtmlWebpackPlugin({
title: "管理输出",
}),
],
output: {
path: `${
__dirname}/dist`,
filename: "[name].bundle.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"],
},
],
},
devServer: {
// 监听文件的位置
contentBase: `${
__dirname}/dist`,
compress: true,
port: 9000,
//允许通过外部访问
host: "0.0.0.0",
// 模块热替换,实现只更新局部
hot: true,
},
};
生成后的文件