Use Vue development version from Webpack npm dev script

Question

From my webpack.config.js I pull in Vue library with loader: 'vue-loader'.

I have two npm scripts:

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

When I run npm start I want the development version of Vue to be build. When I run npm run build the minified production version.

// 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' }
    ]),
  ],
};

Part of my webpack.config.js where I split things up:

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;
};

How do I arrange this, and what are best practices?

Answer 1

This link on Production Deployment should help you with what you want.

Since you're using Webpack and Webpack 4+, you just need to define the mode property in your webpack.config.js like mode: 'production' or mode: 'development' and that will determine whether the production or development version of Vue is used.

You probably want to set the mode from the command line argument, something like this.

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