create-react-app脚手架还没有更新到webpack4，但是猛然间发现webpack4已经到 v4.12.0 版本了！！！慌得不行，正好端午有空所以研究了一波，自己搭建了一个简单的react脚手架。实现本地代理,cssModule,css预处理,postCss,文件压缩等常用的功能
过程
- 进入项目
npm init生成package.jsonnpm i webpack webpack-cli webpack-dev-server --save-dev- 这3个包是webpack4的基础功能
- webpack 在 webpack 4 里将命令行相关的都迁移至 webpack-cli 包
- webpack-dev-server为实时监控文件变化包
- 然后建立3个文件
webpack.config.base.js基本配置webpack.config.dev.js开发配置webpack.config.prod.js生产配置
- 然后编写配置，这里我就直接放源码了
源码
webpack4新特性
mode
webpack4新出了一个mode模式，有三种选择，
none,development,production.最直观的感受就是你可以少些很多配置，因为一旦你开启了mode模式，webpack4就会给你设置很多基本的东西- 如果你只是想简单的进行打包,在package.json中添加如下两个script就可以了
{ ???"scripts": { ???"dev": "webpack-dev-server --mode development", ???"build": "webpack --mode production" ???},}- development模式下，将侧重于功能调试和优化开发体验，包含如下内容：
- 浏览器调试工具
- 开发阶段的详细错误日志和提示
- 快速和优化的增量构建机制
- 默认配置如下：
module.exports = { ?//开发环境下默认启用cache，在内存中对已经构建的部分进行缓存 ?//避免其他模块修改，但是该模块未修改时候，重新构建，能够更快的进行增量构建 ?//属于空间换时间的做法 ?cache: true, ??output: { ???pathinfo: true //输入代码添加额外的路径注释，提高代码可读性 ?}, ?devtools: "eval", //sourceMap为eval类型 ?plugins: [ ???//默认添加NODE_ENV为development ???new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }), ?], ?optimization: { ???namedModules: true, //取代插件中的 new webpack.NamedModulesPlugin() ???namedChunks: true ?}} - production模式下，将侧重于模块体积优化和线上部署，包含如下内容：
- 开启所有的优化代码
- 更小的bundle大小
- 去除掉只在开发阶段运行的代码
- Scope hoisting和Tree-shaking
- 自动启用uglifyjs对代码进行压缩
- 默认配置如下：
module.exports = { ?performance: { ???hints: ‘warning‘, ???maxAssetSize: 250000, //单文件超过250k，命令行告警 ???maxEntrypointSize: 250000, //首次加载文件总和超过250k，命令行告警 ?} ?plugins: [ ???//默认添加NODE_ENV为production ???new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }) ?], ?optimization: { ???minimize: true, //取代 new UglifyJsPlugin(/* ... */) ???providedExports: true, ???usedExports: true, ???//识别package.json中的sideEffects以剔除无用的模块，用来做tree-shake ???//依赖于optimization.providedExports和optimization.usedExports ???sideEffects: true, ???//取代 new webpack.optimize.ModuleConcatenationPlugin() ???concatenateModules: true, ???//取代 new webpack.NoEmitOnErrorsPlugin()，编译错误时不打印输出资源。 ???noEmitOnErrors: true ?}}webpack4的模块拆分
webpack3我们用
commonchunk,在4里面现在废除了，并使用optimization代替 - 官方称这种默认配置是保持web性能的最佳实践
module.exports = { ?optimization: { ???minimize: env === ‘production‘ ? true : false, //是否进行代码压缩 ???splitChunks: { ?????chunks: "async", ?????minSize: 30000, //模块大于30k会被抽离到公共模块 ?????minChunks: 1, //模块出现1次就会被抽离到公共模块 ?????maxAsyncRequests: 5, //异步模块，一次最多只能被加载5个 ?????maxInitialRequests: 3, //入口模块最多只能加载3个 ?????name: true, ?????cacheGroups: { ???????default: { ?????????minChunks: 2, ?????????priority: -20 ?????????reuseExistingChunk: true, ???????}, ???????vendors: { ?????????test: /[\\/]node_modules[\\/]/, ?????????priority: -10 ???????} ?????} ???}, ???runtimeChunk { ?????name: "runtime" ???} ?}}现在我们只需要在optimization中配置runtimeChunk和splitChunks即可 ，具体配置见：splitChunks
打包速度
就一个字，快！！！速度提高了50%以上
webpack3
webpack4
小结
- 现在还只是接触了4，还有很多很深入的用法没尝试,以后再慢慢折腾
- 项目地址
最后
大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……
个人博客：www.yangyuetao.cn
小程序：TaoLand
webpack4构建react脚手架
原文地址：https://www.cnblogs.com/TaoLand/p/9463700.html