一文大白话讲清楚webpack基本使用——8——开发环境和生产环境的配置和区别

一文大白话讲清楚webpack基本使用——8——开发环境和生产环境的配置和区别

1. 建议按文章顺序从头看，一看到底，豁然开朗

• 第一篇：
• 一文大白话讲清楚啥是个webpack
• 第二篇：
• 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
• 第三篇
• 一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用
• 第四篇
• 一文大白话讲清楚webpack基本使用——3——图像相关loader的配置和使用
• 第五篇
• 一文大白话讲清楚webpack基本使用——4——vue-loader的配置和使用
• 第六篇
• 一文大白话讲清楚webpack基本使用——5——babel的配置和使用
• 第七篇
• 一文大白话讲清楚webpack基本使用——6——热更新及其原理
• 第八篇
• 一文大白话讲清楚webpack基本使用——7——代码分离和懒加载
• 然后看本篇，开发环境和生产环境的配置和区别

2. 为什么要区分开发环境与生产环境

• 一句话，因为我们在开发和生产时的需求是不同的，开发时，我们更多的事追求开发效率，怎么开发快怎么来
• 所以我们会配置热更新（上述第七篇文章）和其他事情

1. 通过devtool进行源代码映射
2. 设置不同的入口和输出便于调试
3. 配置很多的loader便于开发

• 在生产环境，我们更多的是追求加载和运行效率，所以我们要求加载快等要求，这时候我们就要做代码分割（上述第八篇文章）和其他事情

1. 使用TerserPlugin对js代码压缩
2. 使用css-mini-webpack-plugin对css代码进行压缩
3. 使用image-webpack-loader对图片进行压缩和优化
4. 使用tree-shaking清除无用代码
5. 等等

• 所以我们要配置两套方案

3. 怎么配置开发环境和生产环境

• 一般有两种方式，第一种是分别创建两个js文件，webpack.prod.js和webpack.dev.js来分别配置不同的环境
• 或者我们在一个js文件webpack.config.js文件中，通过环境变量来判断当前所处的环境，从而适配不同的配置

const env=process.env.NODE_ENV
if(env==='produvtion'){
    /* 生产环境配置*/
}else if(env==='development'){
    /*开发环境配置*/
}

• 我们一般选择独立创建两个不同的js文件这种方式
  webpack.config.dev.js

const webpack=require('webpack')
const path=require('path')
const hwp=require('html-webpack-plugin')
module.exports={
    mode:'development',
    entry:{
        main:'./src/main.js/'
    },
    ouptput:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/chunk-[contenthash].js',
        clean:true
    },
    devServer:{
        port:8080,
        hot:true
    },
    module:{},
    plugins:[
        new hwp({
            tempalte:'./public/index.html',
            filename:'index.html',
            inject:'body'
        })
    ]
}

webpack.config.prod.js

const webpack=require('webpack')
const path=require('path')
const hwp=require('html-webpack-plugin')
const mcp=require('mini-css-extract-plugin')
module.exports={
    mode:'production',
    entry:{
        main:'./src/main.js/'
    },
    optimization:{
        splitChunks:{
            chunks:'all'
        }
    },
    ouptput:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/chunk-[contenthash].js',
        clean:true
    },
    devServer:{
        port:8080,
        hot:true
    },
    module:{},
    plugins:[
        new hwp({
            tempalte:'./public/index.html',
            filename:'index.html',
            inject:'body'
        }),
        new mcp({
            filename:'./src/stylesheet/inedx.css'
        })
    ]
}