版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36407748/article/details/85001636
# webpack配置单入口,单出口
const path = require('path');
//打包html自定义模板
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 将css 单独打一个包
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 清空打包目录
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 配置单入口,单出口
module.exports = {
mode: 'development',
entry: { // 出口配置对象
index: './src/index.js',
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, {
loader: "css-loader",
}]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
filename: 'index.html', // 打包后的文件名,会自动找你的output里的path
template: './src/index.html', // 你要使用的模板
chunks: ["index"] // 这个文件包括哪些块,也就是你这个html文件要引入哪些文件,跟入口相对应
}),
new MiniCssExtractPlugin({
filename: "[name].css", // 打包后的css名字
chunkFilename: "[id].css"
})
]
}
# webpack配置入口目录和出口目录一样
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 配置出口目录和入口目录一样
module.exports = {
mode: 'development',
entry: {
index: './src/js/index.js',
},
output: {
filename: 'js/index.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, {
loader: "css-loader",
}]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
filename: 'view/index.html',
template: './src/view/index.html',
chunks: ["index"]
}),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css"
})
]
}
待续…