如何用webpack捆绑和最小化JS和CSS文件

Question

我一直在用webpack做我的项目。我成功地让webpack将我所有的js编译成一个文件。但我需要的是它也得到了css。我所有的css都在一个文件中，所以我认为这很容易，但我无法理解。我尝试把它分成两个阶段-- CSS_CONFIG和JS_CONFIG

const path = require('path');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");


var JS_CONFIG = {
  entry: path.join(__dirname, 'src/js/main.js'),
  resolve: {
    alias: {
      '/components': path.resolve(__dirname, 'src/components/'),
      '/js': path.resolve(__dirname, 'src/js/'),
      '/views': path.resolve(__dirname, 'src/views/'),
    },
  },
  optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      new TerserPlugin(),
      //new CssMinimizerPlugin(),
    ],
  },
}

var CSS_CONFIG = {
  entry:path.join(__dirname,"src/index.html"),
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [],
      },
    ],
  },
  optimization: {
    minimize:true,
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      
      //new CssMinimizerPlugin(),
    ],
  },
  plugins: [],
}


module.exports = [JS_CONFIG, CSS_CONFIG];

对webpack来说，这似乎是很简单的事情，但我不一定要抓住一些东西。有人能帮我吗？

Answer 1

我相信你的CSS_CONFIG应该看起来更像这样：

const path = require("path"); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); 
const isDevelopment = process.env.NODE_ENV === 'development'

var config = {
  module: {},
}; 

var cssConfig = Object.assign({}, config, {
  devtool: 'source-map',
  entry:  {
    main: path.resolve(__dirname, 'public/css/main.scss'),
    fonts: path.resolve(__dirname, 'public/css/fonts.scss'),
    app: path.resolve(__dirname, 'public/css/app.scss'),
  },
  output: {
    path: path.resolve(__dirname, 'public/css')
  },
  performance: {
    hints: false
  },
  plugins: isDevelopment ? [] : [
      new RemoveEmptyScriptsPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
    ],
  module: {
    rules:[
      // Extracts the compiled CSS from the SASS files defined in the entry
      {
        test: /\.scss$/,
        use: isDevelopment ? 
        [
         'style-loader',
          {
            loader: 'css-loader',
            options: { sourceMap: true, importLoaders: 1, modules: false },
          },
          { 
            loader: 'postcss-loader', 
            options: { sourceMap: true } 
          },
          {
            loader: 'resolve-url-loader',
          },
          { 
            loader: 'sass-loader', 
            options: { sourceMap: true } 
          },
        ]
        : [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: (resourcePath, context) => {
                // publicPath is the relative path of the resource to the context
                // e.g. for ./css/admin/main.css the publicPath will be ../../
                // while for ./css/main.css the publicPath will be ../
                return path.relative(path.dirname(resourcePath), context) + "/";
              },
            },            
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: false,
              url: false,
            },
          },
          { 
            loader: 'postcss-loader', 
            options: 
            { 
              postcssOptions:
              {
                plugins: [
                  require('postcss-import'),
                  require('postcss-url')({
                    url: 'copy',
                    useHash: true,
                    hashOptions: { append: true },
                    assetsPath: path.resolve(__dirname, 'public/assets/')
                  })
                ]
              }
            } 
          },
          {
            loader: 'resolve-url-loader',
          },
          { 
            loader: 'sass-loader', 
            options: { sourceMap: true } 
          },
        ]
      },
      /* you may or may not need this
      {
        test: /\.(woff(2)?|ttf|eot|svg)$/,          
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
              esModule: false,
            }
          }
        ]
        
      },
      */      
    ],
  }
});

Answer 2

use运行加载器，以便将它们放入数组中。因此，“样式加载器”需要首先执行。以下是实现预期结果的简单方法。

const path = require('path');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); 
const isDevelopment = process.env.NODE_ENV === 'development'

var JS_CONFIG = {
  entry:  {
    main: path.resolve(__dirname, 'src/js/main.js'),
    css: path.join(__dirname, 'src/css/main.css'),
  },
  resolve: {
    alias: {
      '/components': path.resolve(__dirname, 'src/components/'),
      '/js': path.resolve(__dirname, 'src/js/'),
      '/views': path.resolve(__dirname, 'src/views/'),
    },
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      },
    ],
  },
}; 

module.exports = [JS_CONFIG];