如何阻止Webpack在每次保存时输出新的CSS文件?

如何阻止Webpack在每次保存时输出新的CSS文件?,webpack,sass,postcss,css-loader,sass-loader,Webpack,Sass,Postcss,Css Loader,Sass Loader,我使用Webpack生成JavaScript,还使用一系列加载程序[SASS加载程序,POSTSS加载程序,CSS加载程序]生成CSS(来自SASS) 当我在开发的时候,我在watch模式下运行WebpackWebpack--progress--watch,我注意到每次我保存一个JavaScript文件时,Webpack都会输出全新的CSS文件 虽然这并没有给我带来任何问题,但这似乎不是很有效,我想知道我的配置设置是否不正确,或者这就是Webpack的工作方式?有没有办法阻止它这样做 下面是我的

我使用Webpack生成JavaScript,还使用一系列加载程序[SASS加载程序,POSTSS加载程序,CSS加载程序]生成CSS(来自SASS)

当我在开发的时候,我在watch模式下运行Webpack
Webpack--progress--watch
,我注意到每次我保存一个JavaScript文件时,Webpack都会输出全新的CSS文件

虽然这并没有给我带来任何问题,但这似乎不是很有效,我想知道我的配置设置是否不正确,或者这就是Webpack的工作方式?有没有办法阻止它这样做

下面是我的网页配置,你可以看到我在运行什么

const path = require('path');
const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const preCSSPlugin = require('precss');
const autoprefixer = require('autoprefixer');

const isProduction = (process.env.NODE_ENV === 'production');


module.exports = {
  entry: {
    /*
      Sitewide assets
    */
    // Javascript
    'build/js/main.js': './static-src/js/',
    // CSS
    'build/css/main.css': './static-src/sass/main.scss',
  },
  devtool: isProduction ? 'cheap-source-map' : 'eval',
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'build/'), // Output to the `build` directory.
  },
  module: {
    rules: [
      // SASS
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            // CSS
            // https://github.com/webpack-contrib/css-loader
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                sourceMap: true,
              },
            },
            // Post CSS loader lets us use Autoprefixer for the CSS
            // https://github.com/postcss/postcss-loader
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: 'inline',
                plugins: () => [
                  preCSSPlugin,
                  autoprefixer, // Autoprefixer loads the browserlist from package.json
                ],
              },
            },
            // SASS loader
            // https://github.com/webpack-contrib/sass-loader
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                sourceMap: true,
              },
            },
          ],
        }),
      },

      // JS (Babel) - Loads options from .babelrc
      // https://github.com/babel/babel-loader
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    // Output CSS from SASS
    new ExtractTextPlugin({
      filename: '[name]',
      disable: false,
      allChunks: true,
    }),
    // Output common chunk JS
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      // (the commons chunk name)
      filename: 'build/common.js',
      // (the filename of the commons chunk)
      minChunks: 3,
      // (Modules must be shared between 3 entries)
    }),
  ],
};

您使用
main.scss
作为入口点的原因是什么?是的,此设置用于CMS网站,而不是单个应用程序。我需要有能力构建样式,而不考虑javascript。您为什么使用
main.scss
作为入口点?是的,此设置用于CMS网站,而不是单个应用程序。我需要有能力建立的风格,无论javascript。