When we use Webpack to build our projects, we definitely have to distinguish some configurations between the local development environment and the online environment, because there are so many differences between the two. For example, in the online environment, we don’t need to enable the Source Map option to prevent others from exposing our source code. So we can package our code in different environments by using different configuration files. We need at least three files to configure our project

  • Webpack.common.js common configuration
  • Webpack.dev.js development environment configuration
  • Webpack.prod.js production environment configuration

This allows us to configure different environments using different profiles, and we also need a plug-in called Webpack-Merge to merge our common profiles between the development profile and production profile

// Install webpack-merge yarn add webpack-merge --devCopy the code

webpack.common.js

This file can be used to configure some common WebPack configurations

const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin') // Used with vue-loader to compile conversion. Vue files
const HtmlWebpackPlugin = require('html-webpack-plugin') // Used to generate the index.html file

module.exports = {
  entry: './src/main.js'.output: {
    filename: 'js/bundle.js'
  },
  module: {
    rules: [{test: /\.vue$/,
        loader: 'vue-loader'
      },
      // It will be applied to ordinary '.js' files
      // and the '
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader'.options: {
            presets: ['@babel/preset-env']}}},// configure eslint-loader to check for code specifications to apply to.js and.vue files
      {
        test: /\.(js|vue)$/,
        use: {
          loader: 'eslint-loader'.options: {
            formatter: require('eslint-friendly-formatter') // The default error message}},enforce: 'pre'.// Check before compiling
        exclude: /node_modules/.// Do not check the file
        include: [__dirname + '/src'].// The directory to check
      },
      // It applies to normal '.css 'files
      // and the '. Vue 'file' 
      {
        test: /\.css$/,
        use: ['vue-style-loader'.'css-loader']},// Configure the less-loader, apply it to the.less file, and convert it to CSS code
      {
        test: /\.less$/.// loader: ['style-loader', 'css-loader', 'less-loader'],
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS}]}, {test: /\.(png|jpe? g|gif)$/,
        use: {
          loader: 'file-loader'.options: {
            name: 'img/[name].[ext]'}}},]},plugins: [
    new webpack.DefinePlugin({
      // The value requires a snippet of code
      BASE_URL: JSON.stringify('/')}),new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: 'lxcan vue project'.template: './public/index.html']}}),Copy the code

webpack.dev.js

With this file we can configure some configuration of the development environment. For example, we can enable source Map and dev-server to help us have a better development experience. Before configuring the development environment, we need to merge our public configuration files using Webpack-Merge

const  commonConfig =  require('./webpack.common')
const merge = require('webpack-merge')
const path = require('path')

module.exports = merge(commonConfig,{
    mode:'development'.devtool:'cheap-module-eval-source-map'.module: {rules:[
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                use: 'eslint-loader'.enforce:'pre'}},],devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 9000.open: true.hotOnly: true}})Copy the code

webpack.prod.js

This file will allow us to configure the production environment so that we don’t have to use development environment tools such as Source Map and dev-server. In this file, we can use the CleanWebpackPlugin to clean up the previously packaged code and use some hash files to let the browser know about our code updates

const common = require('./webpack.common')
const merge = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') Clear the dist directory before packing
const CopyWebpackPlugin = require('copy-webpack-plugin') // Copy static files to the output directory

module.exports = merge(common, {
  mode: 'production'.output: {
    filename: 'js/bundle-[contenthash:8].js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin(['public'])]})Copy the code

This completes the configuration files for different environments. Of course, many of my configuration files are rather crude. I will just give you an idea of the configuration files for different environments.