如何使用 Webpack 4 正确编译 Sass 文件? [英] How to use Webpack 4 to compile Sass files properly?
问题描述
我的代码正在运行，但最终在输出目录中出现了不必要的 .js 文件.我试图找到一种方法来获得干净的输出.为了明确我的意思，我在下面描述了我的代码:
My code is working but it ends up with unnecessary .js files in the output directory. I'm trying to find a way to get a clean output. To make it clear what I mean I describe my code below:
您可以在此处找到我的项目.
You can find my project here.
The Webpack config is the following (tasks/options/webpack.js, I'm using grunt to run webpack if it matters):
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
build: {
...
entry: {
app: `${path.resolve()}/src/assets/js/app.js`,
main: `${path.resolve()}/src/assets/sass/main.scss`,
editor: `${path.resolve()}/src/assets/sass/editor.scss`,
},
output: {
path: `${path.resolve()}/dist/assets/js`,
filename: '[name].js',
},
...
devtool: 'nosources-source-map',
plugins: [
...
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
},
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '../css/[name].css',
}),
...
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|vendor)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/preset-react'],
plugins: [
'transform-class-properties',
'@babel/plugin-proposal-object-rest-spread',
],
},
},
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader?-url&sourceMap',
},
{
loader: 'postcss-loader',
options: {
parser: 'postcss-scss',
sourceMap: true,
},
},
{
loader: 'sass-loader',
query: {
outputStyle: 'extended',
sourceMap: true,
sourceMapContents: false,
},
},
],
},
],
},
},
};
如果我运行它，我会在 dist/assets/... 中得到以下输出:
If I run this I get the following output in dist/assets/...:
- js/app.js
- js/app.js.map
- js/editor.js
- js/editor.js.map
- js/main.js
- js/main.js.map
- css/editor.css
- css/editor.css.map
- css/main.css
- css/main.css.map
不需要以下文件，其中只有一些 webpack 代码:
where the following files are not needed with only some webpack code in it:
- js/editor.js
- js/editor.js.map
- js/main.js
- js/main.js.map
我知道它们是由于我声明的输出而生成的，MiniCssExtractPlugin 从 .js 文件中提取 (S)CSS 代码.
I get that they are generated because of the output I declared and the MiniCssExtractPlugin extracts the (S)CSS code from the .js files.
有没有一种方法可以说:如果条目是 SCSS 文件，则在 dist/css/[name].css 中输出 CSS"而不是首先将其输出dist/js/[name].js 然后将这个 JS 文件中的 CSS 提取到 dist/css/[name].css 并将未使用的 .js 文件留在 >dist/js/?
Isn't there a way where I can say: "If the entry is a SCSS file, output the CSS in dist/css/[name].css" instead of first output it in dist/js/[name].js then extract the CSS inside this JS file to dist/css/[name].css and leaving unused .js files in dist/js/?
也许这不是 Webpack 的工作方式.
Maybe it's not how Webpack works.
我当然可以在之后运行另一个插件来清理 dist 文件夹，但我很好奇是否有一种方法可以将所有文件放在正确的位置而不会将我不需要的文件留在那里.
I surely can run another plugin to clean up the dist folder afterwards but I'm curious if there is a way to put all the files in the right place without leaving files I don't need there.
希望一切都足够清楚，如果没有，请询问.感谢您的帮助！
Hope everything is clear enough, if not please ask. Thanks for your help!
推荐答案
我遇到了同样的问题，我发现已经创建了一些解决方法作为插件来避免这种行为.webpack-fix-style-only-entries
I had the same problem and I've found that some workarounds have been created as plugin to avoid such behavior. webpack-fix-style-only-entries
如果我没看错，下个版本的 webpack (^5) 已经修复了
webpack git 问题
And if I read correctly, it has been fix for the next version of webpack (^5)
webpack git issue
这篇关于如何使用 Webpack 4 正确编译 Sass 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
