Question

我将WebPack配置分为三个文件：生产，开发和普通文件。

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()
  ]
});

如何在WebPack中使用chunk和minge与css进行生产

0 个答案: