使用来自 Webpack npm dev 脚本的 Vue 开发版本

Question

从我的 webpack.config.js 中，我使用 loader: 'vue-loader' 拉入 Vue 库。

我有两个 npm 脚本：

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

当我运行 npm start 时，我希望构建 Vue 的开发版本。当我运行 npm run build 时，缩小的生产版本。

// 常量配置

const config = {
  //Entry Point
  entry: {
    main: "./src/index.js",
  },

  //Output
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: './public'
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

  //Watch
  watch: false,
  watchOptions: {
    ignored: ['node_modules']
  },

  //Loader
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.vue` files
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        },
        exclude: file => (
          /node_modules/.test(file) &&
          !/\.vue\.js/.test(file)
        )
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          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/'
            }
          }
        ]
      }
    ]
  },

  //plugin
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({ filename: '[name].css' }),
    new CopyPlugin([
      { from: './src/assets/images', to: 'assets/images' },
      { from: './src/assets/icons', to: 'assets/icons' }
    ]),
  ],
};

我的webpack.config.js 的一部分，我把事情分开了：

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
        }),
        new UglifyJsPlugin({
          cache: true,
          parallel: true
        }),
      ]
    };
  }

  return config;
};

我该如何安排，最佳做法是什么？

Answer 1

Production Deployment 上的此链接应该可以帮助您实现所需。

由于您使用的是 Webpack 和 Webpack 4+，您只需要在 webpack.config.js 中定义 mode 属性，例如 mode: 'production' 或 mode: 'development'，这将确定 Vue 的生产版本还是开发版本用过。

您可能想从命令行参数设置模式，类似这样。

module.exports = env => {
    mode: env || "development"
    //other settings...
};