学习webpack配置笔记1之拆分、合并配置

前言：如果我们在使用webpack时，如果没有使用mode属性的话，webpack虽然不会报错，但它会发出警告（如下图），我们知道没有配置mode属性的话，webpack默认是production环境打包的。

production和development两者的区别是，前者打包会将代码压缩，减少代码体积，而后者不会。

这时候，我们会想到在webpack.config.js加入mode属性。

const path =require('path');
// 该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle（整合后的main.js）
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    mode:'development',//加入mode属性
    entry:{
        main:'./src/index.js'
    },
    output:{
        filename:'[name].js',  //文件名占位
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

然后，我们会想到一个问题，如果想在production环境下打包呢？将mode属性值改为production，这是个好办法，一两次还好，但次数多了不免心烦。所以拆分和合并配置是个很好的办法，也就是将开发环境和生产环境不同的配置拆分出来，单独写一个，之后打包再合并相同的配置。

1. 第一步，在src同级目录下新建build文件夹，在里面写我们的配置文件

为了解决不频繁切换mode的模式，我们采用拆分配置，合并配置
webpack.dev.config.js   //开发环境会用到的配置
webpack.prod.config.js   //生产环境会用到的配置
webpack.base.config.js  //开发环境和生产环境都会用到的配置

目录结构

2. 编写相应的配置

//webpack.base.config.js 
const path =require('path');
// 该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle（整合后的main.js）
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:{
        main:'./src/index.js'
    },
    output:{
        filename:'[name].js',  //文件名占位
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

//引入基本配置
//webpack.dev.config.js
const commonConfig=require('./webpack.base.config');
const { smart } =require('webpack-merge') //混合配置
//定义开发环境的配置
const devConfig={
    mode:'development',  
}
module.exports=smart(commonConfig,devConfig);

//引入基本配置
//webpack.prod.config.js  
const commonConfig=require('./webpack.base.config');
const { smart } =require('webpack-merge') //混合配置
//定义开发环境的配置
const prodConfig={
    mode:'production',  //production 代码会被压缩

}
module.exports=smart(commonConfig,prodConfig);

3. 在package.json添加运行脚本

{
  "scripts": {
    "build": "webpack --config ./build/webpack.prod.config.js", //生产环境下
    "build:dev": "webpack --config ./build/webpack.dev.config.js" //开发环境下
  },
  "description": "",
  "dependencies": {
    "html-webpack-plugin": "^5.5.1",
    "webpack-merge": "^4.1.5"  //注意插件的版本
  },
  "devDependencies": {
    "webpack-cli": "^5.0.2"
  }
}

4. 尝试打包

• npm run build:dev，可以看到生成的dist文件夹

• 开发环境下的文件

• 生产环境下的文件

• 运行结果

//index.js
import one from './1.js'  //console.log(1)
import two from './2.js'  //console.log(2)
console.log('index')