Webpack knowledge tree

Webpack development and production environment configuration

The environment can be divided into development and production, so what we need to do is to extract a public JS, build the developed and produced JS according to the demand, and reference the public JS. Based on the previous project configuration, three files are built here to split webpack.config.custom.js and merge different JS file variables.

webpack-merge



npm i webpack-merge -D

  • 1.webpack.prod.jsThe following code
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let OptCss = require('optimize-css-assets-webpack-plugin')
let TerserJSPlugin = require('terser-webpack-plugin');
module.exports = smart(base,{
    mode:'production',
    optimization: {
        minimizer: [
            new TerserJSPlugin({}),
            new OptCss({})
        ]
    },
})
Copy the code
  • 2.webpack.dev.jsThe following code
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
module.exports = smart(base,{
    mode:'development', devServer: {port:8081, // progress:true// Whether to display the progress bar contentBase:'./dist'// Package output directory compress:true}})Copy the code
  • 3. Leave the remaining configuration intactweb.base.jsfile
  • 4. Modificationspackage.jsonthescriptsThe script configuration
"scripts": {
    "build": "webpack --config webpack.prod.js"."dev": "webpack-dev-server --config webpack.dev.js"
  },
Copy the code

NPM run Build and NPM run Dev have distinguished between production and development environments

Wenpack environment variable configuration

Webpack. DefinePlugin is already defined in Webpack, where you can define environment variables of type string, Bool, etc.

  • 1. Modifywebpack.prod.jscode
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let OptCss = require('optimize-css-assets-webpack-plugin')
let TerserJSPlugin = require('terser-webpack-plugin');
let webpack = require('webpack')
module.exports = smart(base,{
    mode:'production',
    optimization: {
        minimizer: [
            new TerserJSPlugin({}),
            new OptCss({})
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            ENV: JSON.stringify('production')})]})Copy the code
  • 2. Modifywebpack.dev.jsThe following code
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let webpack = require('webpack')
module.exports = smart(base,{
    mode:'development', devServer: {port:8081, // progress:true// Whether to display the progress bar contentBase:'./dist'// Package output directory compress:true
    },
    devtool: 'eval-source-map',
    plugins: [
        new webpack.DefinePlugin({
            ENV: JSON.stringify("dev"), / /test:'ture'})})Copy the code

We test whether the environment variable has been successfully defined in index.js.

let url = ' '
let env = ENV
if (env === 'dev') {
    url = 'http://localhost:8081'
    console.log('dev:' + url);
}else {
    url = 'http://www.baidu.com'
    console.log('production:' + url)
}
Copy the code

ENV may be reported undefined after using ESLint checks

You need to add ESlint-disable after undefined code. Now let’s look at the variables output by the two environments and the resulting development environment


Download the source code

To create a folder, run the git clone https://gitee.com/dolan_ge/webpack.git -b wabpack_environment command.

Go to the Webpack project directory and run NPM install -d