（六）webpack 配置文件的分离

最新推荐文章于 2024-09-10 08:04:06 发布

极盗者

最新推荐文章于 2024-09-10 08:04:06 发布

阅读量418

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/wzwccc/article/details/118858513

版权

这篇博客详细介绍了如何将webpack配置文件分离为不同部分，包括通过process.env.NODE_ENV变量处理babel.config.js，以及使用合并库整合webpack.common.js、webpack.dev.js和webpack.prod.js。此外，还探讨了代码分离的两种方法：手动入口分离和防止重复的策略，如去除重复模块和异步导入的代码分离。最后提到了其他优化措施。

摘要由CSDN通过智能技术生成

1.两种方式分离配置文件

//法一：直接指定配置文件
//package.json

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

//法二：给一个配置文件传递参数
//package.json

"scripts": {
 "serve": "webpack serve --open --config ./config/webpack.common.js --env developent",
 "build":"webpack --config ./configwebpack.common.js --env production"
}


//webpack.common.js

module.exports=function (env) {
 console.log(env); //env对象会含有上面package.json中的env后面的参数
 return{
     entry:...
 }
}

2.webpack.config.js中的context属性

//package.json

"scripts": {
    "serve": "webpack serve --open --config ./config/webpack.common.js --env developent",
    "build":"webpack --config ./config/webpack.common.js --env production"
  }


//webpack.common.js
module.exports={
    mode:"