内容简介：经过前面的初始化，提升开发体验和集成了一堆工具，调整了项目结构等等之后，我们是时候考虑进行项目打包了。 在这篇博客中，我们不考虑开发环境和生产环境的配置分别，我们只看打包需要进行的配置项，所以我们需要做的如下: 0. 添加打包路径工具我们先去配置文件:
经过前面的初始化，提升开发体验和集成了一堆工具，调整了项目结构等等之后，我们是时候考虑进行项目打包了。 在这篇博客中，我们不考虑开发环境和生产环境的配置分别，我们只看打包需要进行的配置项，所以我们需要做的如下: 0. 添加打包路径工具
- 添加打包命令
- 进行css和js分离
- 修改
html-webpack-plugin配置项 - 添加
react-loadable和react-router,进行代码分离和按需加载 - 添加optimization,进行第三方库代码分离
- 进行代码压缩
- 关于
externals
添加打包命令
我们先去 webpack.config.js 中观察一下 output 这个配置项:
webpack 的配置项中，
output 是必须有的。 接着我们去到
package.json 中在
script 中添加打包命令
build ，该命令引用我们的
webpack.config.js
配置文件:
npm run build
，会发现已经将项目打包出来了:
添加打包路径工具
在上一步中，我们已经知道打包出来的文件位于根目录下的 dist 文件夹中，所以这个路径 工具 的添加指向 dist 文件夹： 我们去到 build/utils.js 文件中，添加如下代码:
以后指定打包文件存放路径的时候就可以直接使用这个工具进行指定。
分离css文件
在上面打包的结果中，我们会发现只有一个 app.js 文件，而实际上我们是有写css样式的，但是现在的却并没有这个css文件，这是因为 webpack 将所有的资源(包含 js , css 等等)都看成是 chunk ，然后一起打包进一个文件中，这样会导致打包出来的js文件体积巨大，从而拖累页面的加载速度。
- 在
webpack 4+版本中，我们可以使用mini-css-extract-plugin进行css代码的分离，所以首先安装它npm install -D mini-css-extract-plugin。 - 然后我们到
build/plugins.js中添加这个插件： - 最后需要注意，之前在提升开发体验这一章中有提到过一点，
style-loader用于将css-loader编译出来的代码转为js代码并写入js文件中，所以在这里，我们需要用mini-css-extract-plugin中的loader去替换掉style-loader，让它写入单独的css文件而不是js文件中: 我们去到build/rules/styleRules.js中，将原本的style-loader全都替换成mini-css-extract-plugin的loader(这一步可以进行开发环境和生产环境的区分，在文章中不进行区分): - 经过上面的步骤，我们可以打包进行测试: 运行
npm run build可以发现打包结果中css文件已经进行了分离:index.html中也可以发现这个css文件被引入了: - 最后我们再在打包路径中将打包出来的js文件用js文件夹包裹起来即可:
修改 html-webpack-plugin 配置项
这一步主要用于压缩打包出来的 index.html 文件，但是单页面应用的话 html 内容其实不多，所以做不做也差不多，在本文章中也只是做个介绍:
- 首先在
html-webpack-plugin中利用的是 html-minifier 来做压缩工作的，所以详细配置点击进去看即可，常用的如下: - 第二个需要提一下则是
inject这个配置项，该项指定资源如何注入，我们直接使用默认的true即可，他会将js资源注入到<body>标签的底部，如果要注入到头部填写head即可
添加 react-loadable 和 react-router ,进行代码分离和按需加载
这一步和下一步都是在进行代码的拆分，考虑的是如果所有文件都塞进一个js文件中，会导致这个js文件体积臃肿，而单页面应用的所有构建又是依赖于这个js文件，所以需要进行代码分离，只加载当前页面需要构建的js文件。 通常来说，我们会根据 react-router 分的页面来进行代码分离，再用 react-loadable 进行分割出来的代码的异步加载(当然你也可以将所有组件都进行代码分离然后异步加载)。 所以在这里我们先利用 react-router 分两个页面 home 和 page 出来：
- 首先我们安装
react-router:npm install -S react-router-dom，然后在src/containers/views中新建Home和Page组件: - 接着安装
react-loadable:npm install -S react-loadable, 然后在src/containers/shared中新建App组件:index.tsx中引用react-router和react-loadable进行组件按需加载: 当然不要忘了使用react-hot-loader:Loadable这个函数中的loading参数是必须有的，至于如何使用可以自行参考react-loadable的github链接。 - 这个时候去到页面看一下： 在
/路径下，没有加载page.js这个文件，而切换到/page路径则会加载page.js文件，这个时候按需加载就完成了: - 最后我们观察一下打包后的js文件可以发现已经进行了分离:
会用 optimization 进行第三方库代码分离
optimization 是webpack4+版本中新出的配置项，这个配置项的功能主要是进行代码压缩，优化。 在本节中，我们需要将用到的处于 node_modules 中的第三方代码进行分离，在这里主要用到的是两个配置项 optimization.runtimeChunk 和 optimization.splitChunks ，其中 runtimeChunk 用于生成维系各各代码块关系的代码， splitChunks 则用于指定需要进行分块的代码，和分块后文件名。
- 我们去到
build目录下，新建optimization.js，并添加如下代码:webpack.config.js中引入这个配置: - 最后我们打包试试看可以发现第三方代码都被打包进
vendor.js文件中了:optimization之前和之后打包出来的app.js文件来看出效果。
进行代码压缩
在这一步中，我们主要是做js和css的代码压缩和优化
- 在上面阶段中，我们打包出来的js代码是已经经过压缩的:
npm install -D uglifyjs-webpack-plugin，然后去到build/optimization.js中添加如下代码即可，具体的优化见代码:uglifyjs-webpack-plugin这个插件中，如果是2.x版本的话是不支持es6规范的，所以建议安装1.x版本，而我这里的版本是: - 然后我们进行css代码的压缩，这里需要使用到 optimize-css-assets-webpack-plugin 插件:
npm install -D optimize-css-assets-webpack-plugin。 我们先去Home组件中随意添加一个样式并使用它:build/optimization.js添加如下代码:
到现在压缩代码步骤也做完了，最后将介绍一下 webpack.externals 这个选项。
关于 externals
webpack.externals配置项用于在构建过程中忽略一些常用包的集成，从而降低构建时间和打包后的包大小，它的配置也很简单，在本章中只做简单介绍: 在本项目中，我们可以将 react 和 react-dom 添加进 externals 中，然后在html模板中引入它们的外部链接:
- 我们先去到
webpack.config.js中，添加externals选项，并且把react和react-dom添加进去:require时候的参数，而对应的值则是标明你打算将这个模块挂载的变量名，这里是挂载在window对象中的。 - 去到
build/tpl/index.html中，引入cdn中react和react-dom的链接: - 重启项目，可以发现在
npm run dev中能够正常使用，并且也已经引入了两者的外部资源: - 最后我们来对比一下打包后模块占用情况:
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 健壮的数据仓库项目搭建
- vue入门（一）：项目搭建
- Spring项目本地环境搭建
- 搭建Typescript+React项目模板(3) --- 整理项目和杂项
- 搭建Typescript+React项目模板(1) --- 项目初始化
- 搭建生产级的Netty项目
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
