webpack.config.js
const path = require('path'); //app
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //css抽出
const optimizeCss = require('optimize-css-assets-webpack-plugin'); //css压缩
module.exports = {
entry: {
app: './src/app.js',
vendor: './src/vendor.js',
manifest: './src/manifest.js',
style: './src/style.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist')
},
// 模块对象
module: {
// 规则
rules: [
{
// 正则匹配所有以.css结尾的文件
test: /\.css$/,
loader:[MiniCssExtractPlugin.loader,'css-loader']
},
{
test: /\.(jpg|jpeg|gif|png)$/,
use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/',
}
]
},
plugins: [
new optimizeCss(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[name].css"
}),
],
optimization: {
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
}
};
执行npx webpack --mode production