webpack配置（二）
支持SCSS
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: cssLoaders(
{
loader: 'sass-loader',
options: {
additionalData: `
@import "src/scss-vars.scss";
`,
sassOptions: {
includePaths: [__dirname]
},
},
},
),
},
]
}
};
在生产环境提取单独的CSS文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
}
自动生成HTML页面
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['main'],
templateContent: `
<html>
<body>
<div id="root"></div>
</body>
</html>
`
})
]
}
Webpack 优化之单独打包 runtime
module.exports = {
optimization: {
runtimeChunk: 'single',
},
}
当我们修改代码以外的东西，重新打包，那么改变的只有runtime.xx.js文件，index.js/main.js不会重新打包，避免用户重新请求重复的代码。
Webpack 优化之用 splitChunks 将 node 依赖单独打包
module.exports = {
optimization: {
moduleIds: 'deterministic', // 固定moduleIds
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
priority: 10,
minSize: 0, /* 如果不写 0，由于 React 文件尺寸太小，会直接跳过 */
test: /[\\/]node_modules[\\/]/, // 为了匹配 /node_modules/ 或 \node_modules\
name: 'vendors', // 文件名
chunks: 'all', // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
// 这三行的整体意思就是把两种加载方式的来自 node_modules 目录的文件打包为 vendors.xxx.js
// 其中 vendors 是第三方的意思
}
},
},
},
}
Webpack 优化之 common 插件
module.exports = {
optimization: {
moduleIds: 'deterministic', // 固定moduleIds
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
common: {
priority: 5,
minSize: 0,
// 符合条件的打包到common.xxxx.js中
minChunks: 2, // 被两个及以上文件同时引用的算是common
chunks: 'all', // 不管是同步还是异步
name: 'common' // 打包出来的名字
}
},
},
},
}
分类:
webpack
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY