webpack4构建react脚手架
2018-08-12 本文已影响34人
TaoLandd
create-react-app脚手架还没有更新到webpack4，但是猛然间发现webpack4已经到 v4.12.0 版本了！！！慌得不行，正好端午有空所以研究了一波，自己搭建了一个简单的react脚手架。实现本地代理,cssModule,css预处理,postCss,文件压缩等常用的功能
过程
- 进入项目
-
npm init生成package.json -
npm 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
1.png
-
webpack4
2.png
小结
- 现在还只是接触了4，还有很多很深入的用法没尝试,以后再慢慢折腾
- 项目地址
最后
大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……
个人博客：www.yangyuetao.cn
小程序：TaoLand
