（也是高级用法）

webpack 之developement和production打包

课程目标

1. developement和production打包区别
2. 如何解决在开发和打包的切换中常常修改webpack.config.js文件内容的问题?

一、developement和production打包区别

1. 在开发项目的时候使用的模式是development模式
2. 在development环境下我们使用的是webpack中的devServer可以帮助我们开启一个服务器，里面还集成了一些HMR，（HMR的作用：只要更改了代码就会重新打包，内容会实时展现在页面）
3. 在开发环境下SourceMap非常全，对我们的代码调试非常方便
4. 在开发环境下我们的代码不需要进行压缩
5. 在生产环境下我们的代码都是被压缩过后的
6. 在生产的时候使用的模式是production模式
7. 在线上环境时，sourceMap非常简洁，可以生成一个.map文件进行存储

二、如何解决在开发和打包的切换中常常修改webpack.config.js文件内容的问题?

1. 将我们现在的webpack.config.js文件修改一下名字，名为webpack.dev.js
2. 在根目录下新建一个webpack.prod.js来代表的是生产环境下的内容，将dev.js文件中的内容复制到prod.js文件中，在进行修改

module.exports = {
    mode:"production"//生产环境下
    devtool:'cheap-module-source-map',
    //不需要devServer配置
    //不需要CleanWebpackPlugin配置
    //不需要optimization配置
    //其余一样即可
    
}

3. 打开package.json文件

"script":{
    "dev":"webpack-dev-server --config webpack.dev.js"//开发环境下的命令
    "build":"webpack --config webpack.prod.js"//生产环境下的命令
}

npm run dev //开发环境下的命令 npm run build//生产环境下的命令

因为在webpack.dev.js文件中和webpack.config.js文件中有很多一样的代码，所以我们需要优化

• 在根目录下新建一个webpack.common.js文件

const path = require ('path')
const HtmlWebpackPlugin  = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports ={
    entry:{
        main:"./src/index.js"
    },
    module:{
        
    },
    plugins:{
        
    },
    output:{
        
    }
}

• 将common.js文件和dev.js和prod.js文件进行合并，需要第三方文件的支持，所以需要下载 npm install webpack-merge -D
• 在webpack.dev.js中引入webpack-merge const merge = require("webpack-merge")
• 引入common.js的文件 const commonConfig = require("./webpack.common.js")
• 改变一下webpack.dev.js格式修改一下
• 开发环境下的配置（webpack.dev.js）

const  webpack = reqiure('webpack')//这个是下面的plugin需要用到的webpack
monst merge = require('webpack-merge')//下载的第三方文件
const commonConfig = require('./webpack.common.js')//引入common.js文件
const devConfig ={
    mode:'development',
    devtool:"cheap-module-eval-source-map",
    devServer:{
        
    },
    plugin:[
        new webpack.HotModuleReplacementPlugin()//这个插件是生产
        环境下特有的文件，所以没有放到 common.js中
    ]，
    optimization:[
        usedExports:true//也是开发环境下的特有的
    ]
}
module.exports = merge(commonConfig,devConfig)

• 线上生产环境下的配置（webpack.prod.js）

const merge = require("webpack-merge")
const commonConfig = require("./webpack.common.js")
 const prodConfig ={
    mode:"production",
    devtool:"cheap-module-source-map"
}
module.exports = merge(commonConfig,prodConfig)