为什么我应该在入口 webpack 配置中声明 scss 文件

Question

为什么我的 webpack 配置无法查看 scss 文件？如果我明确地将文件添加到 entry 中，那么它正在工作，创建 css 文件。这是一个好习惯吗？

/// <binding ProjectOpened='Watch - Development' />

"use strict";

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

module.exports = {
    watch: true,
    entry: {
        app: './src/scripts/app.js',
        People: './Views/People/Index.cshtml.js',
        Service: './Views/Service/Index.cshtml.js',
        sass: './src/sass/app.scss' // <- this should explicitly stated
    },
    plugins: [
        new MiniCssExtractPlugin({
              path: path.join(__dirname, '/wwwroot/css/'),
              filename:  'app.css',
        })
    ],
    output: {
        publicPath: "/js/",
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { url: false, sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            }
        ]
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        },
        extensions: ['.js', '.vue']
    }
};

Answer 1

Webpack 的观察者对 scss 个文件没有任何怨恨。

Webpack 开始从 entry files 中提到的所有文件制作 dependency graph 然后是这些文件中的所有文件 imported 然后是下一级的所有 imports 等等......

Webpack watch 仅跟踪上述依赖关系图中的文件。

现在，您必须将文件导入到依赖关系图中已有的任何文件中。

如果你的 scss 没有被依赖图中的任何文件导入，那么你必须将它添加为 new entry file 或者你可以使用你正在使用的 IDE 的任何插件用于监视 scss 文件并在更改时将它们编译为 css。

为什么我应该在入口 webpack 配置中声明 scss 文件

Why I should state scss file in entry webpack config

config

sass

webpack

webpack-style-loader

extracttextwebpackplugin