Используйте Vue версию для разработки из Webpack npm dev script

Question

Из моей webpack.config.js я извлекаю Vue библиотеку с loader: 'vue-loader'.

У меня есть два 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

Эта ссылка на Production Deployment должна помочь вам с тем, что вы хотите.

Поскольку вы используете Webpack и Webpack 4+, вам просто нужно определить свойство mode в вашем веб-пакете. .config. js подобно mode: 'production' или mode: 'development', и это будет определять, используется ли производственная или разрабатываемая версия Vue.

Возможно, вы хотите установить режим из аргумента командной строки, как то так.

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