Блог

Простая настройка веб-пакета, когда я использую import его для загрузки scss, он полностью отсутствует в пакете. Строка, в которой должен быть импорт, просто отсутствует. Когда я использую require вместо этого, это работает.

optimization: {usedExports: true} это не проблема, я пробовал с и без

мини-css-extract-плагин также не работал.

когда я помещаю опечатку в 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);
 

конфигурация веб-пакета

 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
    };
};
 

Я нашел проблему, но я не понимаю, почему webpack удаляет ее.

Цитата из https://webpack.js.org/guides/tree-shaking/

Обратите внимание, что любой импортированный файл подвержен встряске дерева. Это означает, что если вы используете что-то вроде css-загрузчика в своем проекте и импортируете файл CSS, его необходимо добавить в список побочных эффектов, чтобы он не был непреднамеренно удален в рабочем режиме:

В свой пакет.json я положил

 "sideEffects": false,
 

чтобы иметь возможность использовать вырубку деревьев.
Но мне пришлось отключить его в правиле загрузчика

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