首页 > 建站教程 > 前端框架 >  webpack5学习笔记:分离webpack配置文件和判断生产环境正文

webpack5学习笔记:分离webpack配置文件和判断生产环境

将webpack配置文件分离是一种常见的方式:

  1. 新建三个文件,放到config文件夹下:

  • webpack.common.js 这是测试和生产都会用到的配置

  • webpack.dev.js 这是测试环境的配置

  • webpack.prod.js 这是生产环境的配置

  1. package.json 中配置:

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

或者

"scripts": {
    "build": "webpack --config webpack.common.js --env production",
    "dev": "webpack serve --config webpack.common.js --env development"
},
  1. --env,可以在 webpack.common.js 中获取到:

module.exports = function(env){
    // 这里的 env 可以取到
    console.log(env.production)
    return {
        // 注意:entry的路径不是相对于当前文件所在位置,而是相对于 context 这个属性配置的路径,context是和entry同级的一个变量,它默认指向根目录,所以,从根目录开始查找,entry就是 './src/main.js'
        entry: './src/main.js',
        output: {
            path: path.resolve(__dirname, '../build')
        }
    }
}