最近相对闲适,所以对基于webpack对react脚手架的自我构建做下笔录梳理吧!
这里并未用webpack-dev-server来启动本地服务,而是用的express, 当然为什么要用express,理由很简单,更为自由,对于需要编写一定后端的情况下更合适。
主要思路

其实基于webpack打包工具构建自己需要的脚手架无非以下几个方面
1:各种loader
作用: 主要用于加载各种格式的文件,当然各种loader还有其他辅助功能,具体可以查看npm中对应loader的文档说明。
如:css-loader 加载 css文件,babel-loader编译js文件...
2:基础配置插件
● html-webpack-plugin 抽取编写的js文件自动以<script></script>脚本的形式插入指定html模本中。
● clean-webpack-plugin 清理前一次打包编译出来的文件,可指定目录。
3:服务端配置
因为没有用webpack-dev-server而是使用了express(node的一个框架),所以需要下边三个插件。
● webpack-dev-middleware 将webpack编译后的文件交给express输出
● webpack-hot-middleware 看名字就知道是干嘛的了,没错!就是热更新用的!
● connect-history-api-fallback 重定向,对于使用react-router-dom中的BrowserRouter它必要。
4:打包及其优化配置
打包及其优化无非以下四方面
①:压缩
● optimize-css-assets-webpack-plugin 插件用于压缩抽取出来的css
● terser-webpack-plugin 插件用于压缩抽取出来的js
以上两个插件都是配合webpack中的optimization一起使用。
②:去除无用的代码(css, js)
不管是以前说的tree-shaking还是插件purify-css目的都是一样的,去除那些无用的js,css代码
● purgecss-webpack 清除无用的css, 因为提取css我使用了mini-css-extract-plugin,所以我放弃了purify-css。
● optimization: {usedExports: true} 清除无用
③:代码切割
以前代码切割需要借助webpack.optimize.commonChunkPlugins等插件来一一根据你的需要切割
现在只需要在optimization:{splitChunks:{...}}中进行配置切割代码即可。
具体切割又分为以下几个方面
● 分离不需要打包的三方库,(这部分三方库通过cnd等方式直接引入使用)
externals: {react: "react"} // 排除在打包外
new webpack.ProvidePlugin({ "React": "react"}) // 以全局变量的形式提供给项目使用
● 单独提取包含chunks映射关系的list
optimization: {
runtimeChunk: {
name: entrypoint => `runtime~${entrypoint.name}`
}
}
● 打包三方库
● 提取公共代码打包
cacheGroups: { // 缓存组,将所有加载模块放在缓存里面一起分割打包
vendors: {
name: 'vendors',
chunks: 'initial', // 入口处提取
// test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
test: /[\\/]node_modules[\\/]/,
minSize: 0,
minChunks: 1,
priority: -10 // 该配置项是设置处理的优先级,数值越大越优先处理
},
commons: {
name: "comomns",
test: /[\\/]src[\\/]/,
// test: /[\\/]src[\\/]common[\\/]/,
// test: path.resolve("src/commons"), // 如果你想单独打包src/common
// reuseExistingChunk: true, // 模块嵌套引入时,判断是否复用已经被打包的模块
minChunks: 2, // 最小共用次数
minSize: 0, // 代码最小多大,进行抽离
priority: -20, // 该配置项是设置处理的优先级,数值越大越优先处理
}
}
④:多进程加快打包过程
● happypack 插件实现多进程,共享进程池打包。
4:其他友好的甜心插件
● progress-bar-webpack-plugin + chalk 用于打包编译进度条展示
● webpack-dashboard 将webpack构建信息以图表形式展现,像下图这样

● webpack-bundle-analyzer 分析打包文件工具,能直观显示具体打包出来的各个文件具体包含了哪些模块等。
综述:
这里只写了具体思路,具体配置可以参考我https://github.com/Eye12/react-scaffold-node上的源码配置。
学海无涯,技术需定期更新迭代,如有描述不准确或不对的地方还望海涵指出。感恩同是天涯人...Learning Makes Me Haapy!
网友评论