前言这是一篇关于webpack 4手工搭建重点问题的分析，webpack 3相关可以戳这里：https://github.com/Eleven90/webpack-pages-V3，这里并不试图从零手把手去堆代码，而是对其中的重点问题做稍微深入一点的解读。某些细节这里如果没有提及，项目代码里可能会有。项目地址：https://github.com/Eleven90/webpack-template为懒人准备的 webpack 配置模版，可以直接用于生产。这里单纯只做webpack打包的配置、前端工程化代码的组织等，有意抛开三大框架，从原始的H5出发去组织代码，关于React、Vue等配置并不复杂，可以在开发需要时添加。技术栈es6 + less + art-template + webpack 4普通 H5 开发中,引入组件化；引入 art-template 前端渲染引擎——目前前端模版里速度最快；配置 dev-server 调试模式，proxy 代理接口调试；配置 watch 模式，方便在生产环境中用 Charles 映射到本地文件；optimization 配置提取 runtime 代码；splitChunks 拆分代码，提取 vendor 主要缓存包，提取 common 次要缓存包；支持多页、多入口，自动扫描，可无限层级嵌套文件夹；MockJs 模拟 mock 数据；运行命令推荐使用yarn进行包管理，项目在某个时间节点被我切换到了yarn，但写文档时仍然是npm，对应变更一下即可。# 如果不熟悉或不想尝试yarn，直接npm install，然后npm run dev即可，不会有任何副作用yarn / yarn install # 安装全部依赖包yarn dev # 启动本地调试yarn dev-mock # 启动本地调试，MockJs模拟接口数据yarn dev:page-a # 启动本地调试，仅page-a页面yarn dev:page-b # 启动本地调试，仅page-b页面yarn build-dev # 打包代码，publicPath以/打头（可通过本地起服务访问build后的代码）yarn http-server # 启动http-server服务器，可用来访问yarn build-dev打包的代码yarn build-test # 打包测试环境代码yarn build # 打包生产环境代码# watch模式，移除了js、css的压缩，节省时间（watch时需要build压缩版代码，可自行修改）。yarn watch-dev # 启动watch模式，本地开发环境（通常用不上）yarn watch-test # 启动watch模式，测试环境yarn watch # 启动watch模式，生产环境# 如果你想用npm的话...（建议把yarn.lock文件也删掉）npm install # 安装全部依赖包npm run dev # 启动本地调试npm run dev-mock # 启动本地调试，MockJs模拟接口数据npm run dev:page-a # 启动本地调试，仅page-a页面npm run dev:page-b # 启动本地调试，仅page-b页面npm run build-dev # 打包代码，publicPath以/打头（可通过本地起服务访问build后的代码）npm run http-server # 启动http-server服务器，可用来访问npm run build-dev打包的代码npm run build-test # 打包测试环境代码npm run build # 打包生产环境代码# watch模式，移除了js、css的压缩，节省时间（watch时需要build压缩版代码，可自行修改）。npm run watch-dev # 启动watch模式，本地开发环境（通常用不上）npm run watch-test # 启动watch模式，测试环境npm run watch # 启动watch模式，生产环境Yarn和NPM的选择？通常使用NPM做包管理，但此项目使用Yarn，因为Yarn有：速度快、可离线安装、锁定版本、扁平化等更多优点。如果需要从npm切换到yarn，或者从yarn切换到npm时，请整体移除node_modules目录，及yarn.lock/package-lock.json文件，因yarn和npm两者的策略不同，导致相同的package.json列表安装后的node_modules结构是不同的（虽然这并不会引发bug，但建议在切换时清除后重新install）。Yarn常用命令yarn / yarn install // 安装全部（package.json）依赖包 —— npm installyarn run [dev] // 启动scripts命令yarn add [pkgName] // 安装依赖包（默认安装到dependencies下） —— npm install [pkgName]yarn add [pkgName]@[version] // 安装依赖包，指定版本 —— npm install [pkgName]@[version]yarn add [pkgName] -D // 安装依赖包，指定到devDependencies —— npm install [pkgName] -Dyarn remove [pkgName] // 卸载依赖包 —— npm uninstall [pkgName]yarn upgrade [pkgName] // 升级依赖包 —— npm update [pkgName]yarn upgrade [pkgName]@[version] // 升级依赖包，指定版本参考文档yarn中文网yarn安装 (预警：如果本机已经安装过NodeJS，使用brew安装yarn时，推荐使用brew install yarn --without-node命令，否则可能导致其它bug。)yarn命令yarn和npm命令对比Babel 转码这是最新的 babel 配置，和网上的诸多教程可能有不同，可以自行测试验证有效性。基础依赖包
...