将配置 API 与 dev 和 prod webpack 分开

Question

请告诉我，这里是 config.js 文件，导出的变量与 API 的引用，但是有一个用于开发版本的 API，并且有一个单独的用于生产版本的 API，因为我明白了，你需要制作2个单独的文件，但是如何在webpack中制作，以便在开发时使用一个文件，并使用另一个文件？

下面添加了 webpack 配置文件，react.js 上的一个项目（如果有什么不同的话:)）

rules.js

const rules = [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: ['babel-loader'],
  },
  {
    test: /\.eot(\?v=\d+.\d+.\d+)?$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    ],
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 10000,
          mimetype: 'application/font-woff',
          name: '[name].[ext]',
        },
      },
    ],
  },
  {
    test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 10000,
          mimetype: 'application/octet-stream',
          name: '[name].[ext]',
        },
      },
    ],
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 10000,
          mimetype: 'image/svg+xml',
          name: '[name].[ext]',
        },
      },
    ],
  },
  {
    test: /\.(jpe?g|png|gif|ico)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    ],
  },
];

export default rules;

webpack.config.common.babel.js

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import Dotenv from 'dotenv-webpack';
import rules from './utils/rules';

const config = (env) => {
  const PUBLIC_PATH = env.production ? '/' : '/';

  return {
    entry: {
      index: './src/index.js'
    },
    output: {
      publicPath: PUBLIC_PATH,
      path: path.resolve(process.cwd(), 'dist'),
      filename: env.production ? '[name].js' : '[name].bundle.js'
    },
    resolve: {
      alias: {
        'react-dom': '@hot-loader/react-dom',
        app: path.resolve(process.cwd(), 'src/app/'),
        store: path.resolve(process.cwd(), 'src/store/'),
        ui: path.resolve(process.cwd(), 'src/ui/')
      },
      extensions: ['*', '.js', '.jsx', '.json', 'scss']
    },
    module: {
      rules
    },
    node: {
      dgram: 'empty',
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty'
    },
    plugins: [
      new Dotenv({
        systemvars: true
      }),
      new HtmlWebpackPlugin({
        template: 'public/index.html',
        favicon: 'public/favicon.ico',
        inject: true,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true
        }
      })
    ]
  };
};

export default config;

webpack.config.dev.babel.js

import webpack from 'webpack';
import path from 'path';
import merge from 'webpack-merge';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import common from './webpack.config.common.babel';

const config = env => merge(common(env), {
  devtool: 'cheap-module-eval-source-map',
  target: 'web',
  mode: 'development',
  optimization: {
    minimize: false
  },
  performance: {
    hints: false
  },
  devServer: {
    historyApiFallback: true,
    contentBase: '../dist',
    port: 3009,
    hot: true,
    clientLogLevel: 'none'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      {
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          {
            loader: 'style-loader',
            options: { singleton: true }
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              /* eslint-disable global-require */
              plugins: () => [require('autoprefixer')],
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [path.resolve(__dirname, 'src', 'scss')]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    // new BundleAnalyzerPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
});

export default config;

webpack.config.common.babel.js

import path from 'path';
import webpack from 'webpack';
import merge from 'webpack-merge';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import common from './webpack.config.common.babel';

const config = env => merge(common(env), {
  devtool: 'source-map',
  target: 'web',
  mode: 'production',
  optimization: {
    minimize: true,
    nodeEnv: 'production',
    sideEffects: true,
    concatenateModules: true,
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              /* eslint-disable global-require */
              plugins: () => [require('cssnano'), require('autoprefixer')],
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [path.resolve(__dirname, 'src', 'scss')],
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash].css',
    })
  ],
});

export default config;

Answer 1

您可以定义两个不同的 npm 脚本并将--config 标志用于自定义文件（/file-paths）：

"build:dev": "webpack --config ./webpack.client.dev.js",
"build:prod": "webpack --config ./webpack.client.prod.js"

常见的你必须使用webpack-merge，例如：

const merge = require('webpack-merge'); const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
    ... 
});