gpt4 book ai didi

javascript - Webpack 如何独立打包 JS 和 CSS 文件?

转载 作者:行者123 更新时间:2023-12-05 02:15:02 25 4
gpt4 key购买 nike

我有一些 JS 和 SCSS 文件。我需要 Webpack 4 将每个 JS 条目捆绑到一个 JS 文件,并将每个 SCSS 条目捆绑到一个 CSS 文件。 JS 文件不导入 SCSS 文件。我尝试使用以下 webpack.config.js 来实现:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
entry: {
scriptFoo: './src/js/scriptFoo.js',
scriptBar: './src/js/scriptBar.js',
// ...
styleBaz: './src/css/styleBaz.scss',
styleBaq: './src/css/styleBaq.scss'
// ...
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
};

运行正常,Webpack 将编译后的文件放到dist 目录下。但它也会为 dist 目录中的每个 SCSS 文件创建一个多余的虚拟 JS 文件:

webpack.config.js
src/
js/
scriptFoo.js
scriptBar.js
...
css/
styleBaz.scss
styleBaq.scss
...
dist/
scriptFoo.js
scriptBar.js
...
styleBaz.css
styleBaz.js // Excess
styleBaq.css
styleBaq.js // Excess
...

如何让Webpack不创建多余的JS文件?

最佳答案

使用 ignore-emit-webpack-plugin Webpack 插件不会创建多余的文件。首先通过在控制台中运行来安装它:

npm install --save-dev ignore-emit-webpack-plugin

然后将其添加到您的 Webpack 配置中:

const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');

module.exports = {
// ...
plugins: [
// ...
new IgnoreEmitPlugin(['styleBaz.js', 'styleBaq.js']) // Or simply: new IgnoreEmitPlugin(/^style.*\.js$/)
]
};

关于javascript - Webpack 如何独立打包 JS 和 CSS 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52568420/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com