（六）webpack 配置文件的分离

最新推荐文章于 2024-06-06 09:41:55 发布

原创

最新推荐文章于 2024-06-06 09:41:55 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

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

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:"development",
    entry:"./src/index.js", 
    //entry所写的相对路径并不是相对于该js文件的路径，而是相对于context属性。context属性默认值为打包入口文件夹，即package.json文件中的scripts中的config