时间戳

首页 > 解决方案 > Webpack 基于 webpack.config.js 内部的生产模式对 CSS 和 Javascript 进行优化和压缩

npm - Webpack 基于 webpack.config.js 内部的生产模式对 CSS 和 Javascript 进行优化和压缩

问题描述

我在 package.json 中有以下 NPM 脚本：

"scripts": {
    "start": "cross-env NODE_ENV=development webpack --mode development",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },

  1. 如果我运行npm run build（生产模式）我想添加optimization（见下文）来压缩我的 CSS 和 Uglify Javascript。我该如何做到这一点？

    优化：{ 最小化器：[new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },

  2. 如果我运行，npm start我想要watch文件并进一步与生产模式相同，除了optimization. 我正在构建一个 Drupal 站点，因此我需要构建也在开发中的资产。

我webpack.config.js现在的样子是这样的：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');

const config = {
  entry: {
    main: "./src/index.js",
    courses: "./src/courses.js",
    vendor: "./src/vendor.js"
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].css' }),
    new CopyPlugin([
      { from: './src/assets/images', to: 'assets/images' },
      { from: './src/assets/icons', to: 'assets/icons' }
    ]),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader',
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: './assets/fonts',
          },
        },
      }
    ]
  }
};

module.exports = (env, argv) => {

  if (argv.mode === 'development') {
    //...
  }

  if (argv.mode === 'production') {
    //...
  }

  return config;
};

我该如何构建它？

标签： npmbuildwebpack-4npm-scriptsnpm-start

解决方案

我通过如下调整来修复它webpack.config.js：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');

const config = {
  //Entry Point
  entry: {
    main: "./src/index.js",
    courses: "./src/courses.js",
    vendor: "./src/vendor.js"
  },
  //Output
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  //Watch
  watch: false,
  watchOptions: {
    ignored: ['node_modules']
  },
  //Loader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader',
        ]
      },
      {
        //For fonts
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        use: [
          {
            //using file-loader too
            loader: "file-loader",
            options: {
              outputPath: "fonts"
            }
          }
        ]
      }
    ]
  },
  //plugin
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].css' }),
    new CopyPlugin([
      { from: './src/assets/images', to: 'assets/images' },
      { from: './src/assets/icons', to: 'assets/icons' }
    ]),
  ],
};

module.exports = (env, argv) => {

  if (argv.mode === 'development') {
    //...
    config.mode = "development";
    config.watch = true;
  }

  if (argv.mode === 'production') {
    //...
    config.mode = "production";
    config.optimization = {
      splitChunks: {
        chunks: "all"
      },
      minimize: true,
      minimizer: [
        new OptimizeCssAssetsPlugin(),
        new TerserPlugin({
          cache: true
        })
      ]
    };
  }

  return config;
};

如果有人对上述内容有改进，请告诉我。

推荐阅读