Embalaje de entorno diferenciado de desarrollo y producción de Webpack

(1) Delantero

Originalmente, solo había un archivo de configuración de paquete web, webpack.config.js. Ahora se divide en dos según el entorno. Los nuevos webpack.dev.js y webpack.prod.js representan los archivos de configuración del paquete web del entorno de desarrollo y el entorno de producción, respectivamente.

webpack.dev.js

var webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: {
    index: './src/index.js'
  },
  devtool: 'inline-source-map',
  mode: 'development',
  devServer: {
    publicPath: '/',
    open: true,
    hotOnly: true, // 即使 HMR 不生效 也不要刷新浏览器页面
    hot: true, // 开启hmr
    // 端口号
    port: 8000
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env', {
          useBuiltIns: 'usage'
        }] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 从右向左，先执行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'less-loader', 'postcss-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }, {
      test:/\.html$/,
      loader: ['html-loader']
    }, {
      test: /\.(png|jpg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // 自定义打包后的图片名称
          outputPath: 'image/', // 打包后生成的图片放到dist下的image文件夹下
          limit: 2048
        }
      }
    }]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    usedExports: true
  }
}

En webpack.prod.js, se pueden omitir muchos en línea, como hot update, devServer, Tree Shaking, etc.

webpack.prod.js:

var webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: {
    index: './src/index.js'
  },
  devtool: 'inline-source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env', {
          useBuiltIns: 'usage'
        }] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 从右向左，先执行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'less-loader', 'postcss-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }, {
      test:/\.html$/,
      loader: ['html-loader']
    }, {
      test: /\.(png|jpg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // 自定义打包后的图片名称
          outputPath: 'image/', // 打包后生成的图片放到dist下的image文件夹下
          limit: 2048
        }
      }
    }]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    })
  ]
}

En este momento, los archivos de configuración del paquete web del entorno de producción y el entorno en línea están bien

modificación de package.json:

"scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  }

Entorno de producción: npm run dev

Entorno en línea: npm run build (empaquetado)

(2) Eliminar el código público

Ahora webpack.dev.js y webpack.prod.js tienen parte del código común, y ahora se puede extraer el código común

webpack.common.js (código común)

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env', {
          useBuiltIns: 'usage'
        }] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 从右向左，先执行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'less-loader', 'postcss-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }, {
      test:/\.html$/,
      loader: ['html-loader']
    }, {
      test: /\.(png|jpg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // 自定义打包后的图片名称
          outputPath: 'image/', // 打包后生成的图片放到dist下的image文件夹下
          limit: 2048
        }
      }
    }]
  },
  output: {
    filename: 'bundle.[hash].js',
    path: path.resolve(__dirname, 'dist')
  }
}

webpack.prod.js: introduce el archivo de código común webpackCommon

const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
const webpackCommon = require('./webpack.common.js')
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: webpackCommon.entry,
  devtool: 'inline-source-map',
  mode: 'production',
  module: webpackCommon.module,
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    })
  ],
  output: webpackCommon.output
}

webpack.dev.js: introduce el archivo de código común webpackCommon

var webpack = require('webpack')
const webpackCommon = require('./webpack.common.js')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: webpackCommon.entry,
  devtool: 'inline-source-map',
  mode: 'development',
  devServer: {
    publicPath: '/',
    open: true,
    hot: true, // 开启hmr
    // 端口号
    port: 8000
  },
  module: webpackCommon.module,
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.[hash].html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    usedExports: true
  },
  output: output
}

Lo anterior es para configurar el paquete web por entorno ~