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

【问题标题】：Why I should state scss file in entry webpack config为什么我应该在入口 webpack 配置中声明 scss 文件
【发布时间】：2019-01-10 21:36:59
【问题描述】：

为什么我的 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']
    }
};

【问题讨论】：

标签： webpack sass config webpack-style-loader extracttextwebpackplugin

【解决方案1】：

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

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

Webpack watch 只跟踪上述依赖图中的文件。

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

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

【讨论】：