css - 如何在 webpack 4 中将多个 css 文件合并为一个?
问题描述
我想从几个 css 文件组成一个 main.css 文件。我怎样才能使用 webpack 4 做到这一点?
这是我的 webpack.config.js:
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'public/app.js'),
output: {
path: path.resolve(__dirname, 'public'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
]
},
plugins: []
};
解决方案
Webpack 有一些很棒的工具可用于将文件合并为一个,我建议您使用 .scss 文件并将它们合并到 css 文件中。但是,这是您自己的首选问题。
请查看此插件以将多个 css 文件合并为一个。 https://github.com/oklas/merge-webpack-plugin
在这篇文章中也可以找到更好的理解:https ://medium.com/trabe/multiple-css-bundles-with-webpack-75f263095f09
推荐阅读
- java - Kotlin 使用内置 ECB Java 实现实现 AES-CBC
- pandas - 如何在熊猫中将多列设置为索引
- php - Laravel Artisan::call() 如果失败则捕获异常
- javascript - Discord bot 来自 PC 的普通用户名,但来自手机的 @invalid-user
- python - 我在处理 django 项目时无法修复错误,TypeError: expected str, bytes or os.PathLike object, not function
- amazon-web-services - Redshift COPY 命令中的时间戳格式无效
- python - 我需要将一些字典键从字符串转换为整数,但我得到一个“invalid literal for int() with base 10”
- arrays - QVector + QScopedPointer - 传递给 C 运行时函数的无效参数
- angular - 导航/路由回组件时不会触发 ngOnInit
- c# - 有人可以帮我解释一下吗