Javascript 如何使用区块和缩小与css的网页制作

我把我的网页配置分为三个文件：生产、开发和通用

JS文件的处理过程非常好，我可以创建块，缩小它们，还可以使用chunkhash给它们一个散列。 现在，我的问题是如何对SASS/CSS执行相同的操作，以便缩小并生成这些文件的哈希

我不知道该把代码放在哪里生产。 现在，在我的文件中，他们已经创建了一个供应商css文件，我把它放在条目配置（bootstrap css）中，在index.js文件中，我有一个主SASS文件的导入

我的网页配置

webpack.common.js：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    index: './js/index.js',
    about: './js/about.js',
    vendor: ['react', 'bootstrap-js', 'bootstrap-css']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(css)$/,
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }),
    new ExtractTextPlugin({
      filename: './css/[name].css',
      allChunks: true
    }),
    new CleanWebpackPlugin(['dist'], {
      root: path.join(__dirname, './')
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: path.join(__dirname, './src/about.html'),
      chunks: ['vendor', 'about'],
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(__dirname, './src/index.html'),
      chunks: ['vendor', 'index'],
    })
  ],
  resolve: {
    alias: {
      'bootstrap-js': path.join(__dirname, './node_modules/bootstrap/dist/js/bootstrap.js'),
      'bootstrap-css': path.join(__dirname, './node_modules/bootstrap/dist/css/bootstrap.css')
    },
    modules: [
      path.resolve('./'),
      path.resolve('./node_modules')
    ]
  }
};

webpack.dev.js：

const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = merge(common, {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].js'
  },
  devtool: 'cheap-module-source-map',
  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, './src')
  },
  plugins: [
    new BundleAnalyzerPlugin()
  ]
});

webpack.prod.js：

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = merge(common, {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].[chunkhash].min.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.HashedModuleIdsPlugin(),
    new WebpackChunkHash()
  ]
});