使用Webpack npm开发脚本中的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

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

生产部署上的这个链接应该可以帮助您实现您想要的东西。

由于您使用的是Webpack和Webpack 4+，所以只需要在webpack.config.js中定义模式属性，比如mode: 'production'或mode: 'development'，这将决定Vue的生产或开发版本是否被使用。

您可能希望通过命令行参数设置模式，如下所示。

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