[英]How to bundle JS and CSS file independently with Webpack?
我有一些JS和SCSS文件。 我需要Webpack 4將每個JS條目捆綁到一個JS文件中,並且將每個SCSS條目捆綁到一個CSS文件中。 JS文件不會導入SCSS文件。 我嘗試使用以下webpack.config.js
來做到這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文件?
這是因為對於條目對象中的每個屬性,都在輸出目標中創建了js文件。
output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') },
當css作為入口點時,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$/)
]
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.