我能够生成单独的CSS和Js，如中所述：我可以使用webpack分别生成CSS和Js吗？
下面的工作基线代码生成名为的文件
dist/index.js
dist/main.css
dist/main.js
dist/notmain.css
dist/notmain.js
请注意，不需要的main.js和notmain.js伪文件，没有人知道如何很好地修复，但在这种情况下，这对我来说并不重要。
我的问题是，我如何才能让Webpack生成：
dist/index.css
dist/index.js
dist/notmain.css
即将main.css重命名为index.css？
天真地，我想要的只是将工作基线修改为：
entry: {
index: ['./index.js'],
index: ['./index.scss'],
},
但这没有任何意义，因为entrydict现在有两个index密钥，第二个密钥会擦除第一个密钥。
此外，如果我只有一个CSS输出，我可以硬编码：
new MiniCssExtractPlugin({
filename: 'index.css',
}),
但由于我有多个占位符，这不会减少它，我需要[name]占位符以某种方式工作。
我在https://webpack.js.org/configuration/entry-context/#output-它记录的文件名类似于：
main: {
import: './main.scss',
filename: 'index.css',
},
可以工作，但如果我尝试它失败了：
ERROR in index.css
index.css from Css Minimizer
/home/ciro/bak/git/cirosantilli.github.io/webpack/tmp/index.css:1:10: Unknown word [index.css:1,10]
关于这个错误消息的类似问题可以在以下网站上看到：webpack failed"模块构建失败：未知单词"；使用webpack.config.js文件的情况是，由于某种原因，dist/index.css包含一个JavaScript文件，而当时的CSS minifier无法解析它。不过，index.js的类似更改确实适用于JavaScript，这是这个CSS设置特有的。
工作基线代码
index.html
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Sass import</title>
<link rel="stylesheet" href="dist/main.css">
<link rel="stylesheet" href="dist/notmain.css">
</head>
<body>
<p>Hello</p>
<script src="dist/index.js"></script>
</body>
</html>
index.js
document.getElementsByTagName('body')[0].innerHTML += '<p>js works</p>'
main.scss
body {
background-color: red;
}
notmain.scss
body {
color: blue;
}
webpack.config.js
const path = require('path');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
module.exports = {
entry: {
index: ['./index.js'],
main: ['./main.scss'],
notmain: ['./notmain.scss'],
},
mode: 'none',
module: {
rules: [
{
test: /.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
minimize: true,
},
output: {
filename: '[name].js',
},
};
软件包.json
{
"name": "webpack-cheat",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "webpack",
"sass": "rm -f dist/main.css && sass -I node_modules main.scss dist/main.css"
},
"author": "Ciro Santilli",
"license": "MIT",
"devDependencies": {
"css-loader": "5.2.4",
"css-minimizer-webpack-plugin": "3.0.2",
"mini-css-extract-plugin": "2.1.0",
"normalize.css": "8.0.1",
"sass": "1.32.11",
"sass-loader": "11.0.1",
"style-loader": "2.0.0",
"webpack": "5.36.1",
"webpack-cli": "4.6.0",
"webpack-dev-server": "3.11.2"
}
}
编译并运行：
npm install
npm run build
xdg-open index.html
同时询问：https://github.com/webpack/webpack/discussions/15163
如果你想要类似的东西，下面是我自己的配置中的一些摘录，使用webpack v5:
module.exports = {
// other stuff omitted
output: {
// other stuff omitted
filename: '[name].js',
chunkFilename: '[name].js'
},
entry: {
index: [
'./src/index.js'
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
ignoreOrder: true
}),
]
}
CCD_ 10替换可以用于映射回磁盘上的名称。
参见
- https://webpack.js.org/guides/caching/#output-文件名
- https://webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate
了解更多信息
了不起的Webpack开发人员Alexander Akait刚刚回复了我一个可行的解决方案：
plugins: [
new MiniCssExtractPlugin({
filename: (pathData) => {
if (pathData.chunk.name === "main") {
return 'index.css'
}
return '[name].css'
},
}),
],
因此，我们看到filename可以采用任意函数，而不仅仅是字符串，然后我们能够以更大的灵活性来解决问题。
他还提到：
我看到了，是的，这是限制，我们正在研究内置CSS支持(它将解决问题(，目前请使用：
因此Webpack在历史上似乎更专注于"；使用Js方法注入CSS"；，但这一点现在正在被普遍化。
谢谢亚历山大！