express + react + typescript + w

最近相对闲适，所以对基于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!