使用 import 而不是 require 时 webpack 不捆绑 scss

Posted

技术标签:

【中文标题】使用 import 而不是 require 时 webpack 不捆绑 scss【英文标题】:webpack not bundling scss when using import instead of require 【发布时间】:2021-10-28 04:00:19 【问题描述】:

简单的 webpack 设置,当我使用 import 加载我的 scss 时,它完全从包中丢失。应该导入的那一行根本就不见了。当我改用require 时,它可以工作。

optimization: usedExports: true 不是问题,有没有我都试过了

mini-css-extract-plugin 也不起作用。

当我在 scss 中输入错字时它会抱怨,所以它被解析但最终没有捆绑?

index.js

require("./scss/style.scss");
//import "./scss/style.scss" <--- not working

import  createApp  from 'vue';
import App from './components/App.vue';

const el = document.getElementById('app');
createApp(App).mount(el);

webpack 配置

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const  CleanWebpackPlugin  = require('clean-webpack-plugin');
const  VueLoaderPlugin  = require('vue-loader');
const  DefinePlugin  = require('webpack');

const dist = path.resolve(__dirname, "dist");

module.exports = env => 
    const mode = env.production == true ? "production" : "development";
    const devtool = mode == "production" ? false : "inline-source-map";

    return 
        mode: mode,
        entry: './web/index.js',
        output: 
            filename: 'bundle.js',
            path: dist
        ,
        optimization: 
            usedExports: true,
        ,
        devServer: 
            static: 
                directory: dist
            ,
            port: 8888
        ,
        module: 
            rules: [
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            , 
                test: /\.(ttf|eot|woff|woff2|svg)$/,
                use: 
                    loader: 'file-loader',
                    options: 
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    ,
                ,
            , 
                test: /\.vue$/,
                loader: 'vue-loader'
            ]
        ,
        plugins: [
            new CleanWebpackPlugin(),
            new DefinePlugin(
                __VUE_OPTIONS_API__: false,
                __VUE_PROD_DEVTOOLS__: false,
            ),
            new HtmlWebpackPlugin(
                template: path.resolve("./web/index.html")
            ),
            new VueLoaderPlugin()
        ],
        resolve: 
            extensions: ['.js'],
            alias: 
                "@": path.resolve(__dirname, 'web')
            
        ,
        devtool
    ;
;

【问题讨论】:

【参考方案1】:

我发现了问题,但我不明白为什么 webpack 会丢弃它。

引用https://webpack.js.org/guides/tree-shaking/

请注意,任何导入的文件都会受到树抖动的影响。这意味着如果您在项目中使用 css-loader 之类的东西并导入 CSS 文件,则需要将其添加到副作用列表中,以免在生产模式下无意中将其丢弃:

在我的 package.json 我放了

"sideEffects": false,

能够使用treeshaking。 但我不得不在加载器规则中禁用它


  test: /\.(sa|sc|c)ss$/,
  use: ['style-loader','css-loader','sass-loader'],
  sideEffects: true <----

【讨论】:

以上是关于使用 import 而不是 require 时 webpack 不捆绑 scss的主要内容,如果未能解决你的问题,请参考以下文章

如何使用“require”而不是“import”语句

为啥我必须对 React 中的图像使用“require”而不是“import from”?

Gulp-sass 5.0 如何使用带有 import() 而不是 require() 的编译器?

为 ES6 "import x" 而不是 express 中的 "require(x)" 准备环境的简单方法

JS中的import和require区别

如果 import Something from 'somewhere' 等价于 require()