内容简介:经过不断的调整和测试,关于 react 的 webpack 配置终于新鲜出炉。本次的重点主要集中在开发环境上,生产环境则是使用 webpack 的 production 默认模式。本次配置主要有:讲真,对于初次接触 webpack 的同学,怕的可能不是 webpack 的配置,而是长长的 package.json。依赖那么多,你怎么就知道需要哪些依赖呢。不开玩笑,我还真知道。
日常吐槽
经过不断的调整和测试,关于 react 的 webpack 配置终于新鲜出炉。本次的重点主要集中在开发环境上,生产环境则是使用 webpack 的 production 默认模式。
本次配置主要有:
- eslint+prettier ;
- optimization.splitChunks ;
- happypack ;
- DllReferencePlugin & DllPlugin ;
- ...
文档的重要性
讲真,对于初次接触 webpack 的同学,怕的可能不是 webpack 的配置,而是长长的 package.json。依赖那么多,你怎么就知道需要哪些依赖呢。不开玩笑,我还真知道。
webpack 的依赖主要是一些 loader 和 plugins。我们知道单页面引用被打包后,原有的结构基本上不复存在了。而之前引用的图片或字体资源还按照之前的路径查找,肯定是找不到的。那么我们就需要转换工具(顺便转换资源)—— url-loader
| file-loader
。
大多数人写样式时,喜欢使用 css、less、sass。这时也会有对应的工具 style-loader
, css-loader
, less-loader
。
想要使用 JavaScript 新特性或处理兼容性,就用 babel-loader
。以上这些基本上可以应付一些简单的项目。可实际上呢?
我信你个鬼,你这个糟老头坏的很!
看文档啊,看官方介绍啊。本次也是通过看 babel 文档,和一些依赖文档来配置 webpack 的,全程无压力,而且很正宗。所以,文档很重要。
eslint+prettier
如果时团队合作,代码规范是很重要的。可以通过 eslint+prettier 规范。这两个 工具 各有侧重点,不过官网也提供了两者结合的方案。详细介绍见官网。我个人不习惯创建太多的配置文件,所以都放在了 package.json 文件中。
// webpack.common.js { enforce: "pre", test: /\.m?jsx?$/, exclude: /node_modules/, loader: "eslint-loader", options: { fix: true, cache: true, formatter: require("eslint-friendly-formatter"), } },
"eslintConfig": { "parser": "babel-eslint", "env": { "browser": true, "es6": true, "node": true }, "parserOptions": { "ecmaVersion": 6, "sourceType": "module" }, "extends": [ "plugin:prettier/recommended" ] }, "prettier": { "singleQuote": true, "semi": true },
开发环境
开发环境没什么好说的了,简单易配置,官网很详细。
// webpack.dev.js plugins: { //... new webpack.HotModuleReplacementPlugin() }, devtool: "eval-source-map", devServer: { contentBase: path.resolve(__dirname, '..', 'dist'), port: APP_CONFIG.port, hot: true, open: true } // index.js // 入口处要配置这些,别忘了。 // 因为有冒泡的机制,所以在顶端加一个就好。 if (module.hot) { module.hot.accept('./views/login/index.js', () => { render(App) // 渲染应用 }) }
optimization.splitChunks
这个配置是用来分割包的。在性能优化上,请求数和请求包的大小也是很重要的优化点。请求数量和请求数据大小要控制在合理的范围内。
不过通常情况下,我们会将包分割为内容不变的部分和内容变化的部分。这不仅仅是为了将大的包分割成更小的包,也是为了能够充分利用缓存机制。
// webpack.common.js runtimeChunk: 'single', splitChunks: { cacheGroups: { verdor: { test: /[\\/]node_modules[\\/]/, name: 'verdors', chunks: 'all', priority: -10, }, common: { name: 'common', chunks: 'all', minChunks: 2, priority: -20, } } }
happypack
转换文件算是打包过程中比较耗时的事情,通过 happypack 可以将这件事分摊给多个 node 进程,这样就会大大缩短了打包时间(同理,可以考虑使用 thread-loader
)。不过进程之间的通信是要开销的,这是一个优化方向,要不要采用,还需要酌情考虑。
// loader { test: /\.m?jsx?$/, exclude: /node_modules/, use: 'happypack/loader?id=js', } // plugins new HappyPack({ id: 'js', threadPool: happyThreadPool, loaders: [{ loader: 'babel-loader', options: { cacheDirectory: true, presets: [['@babel/preset-env', { "useBuiltIns": "usage", "corejs": 3 }], "@babel/preset-react"], plugins: ['@babel/transform-runtime', "@babel/plugin-proposal-class-properties", [ "import", { "libraryName": "antd", "style": true } ] ] } }] })
不喜欢单独的 babel 文件,所以 babel 的配置都在这里了。其实,关于 babel 要配置的内容还是挺多的。不过不要怕,babel 的官方文档有详细说明。
DllReferencePlugin & DllPlugin
之前也提到过,通常我们会使用 optimization.splitChunks
来处理第三方库,将其分割成不变的部分。可是,每次打包的时候都需要重复这一步骤。
这时候我们就想啊,不变的部分打包一次不就可以了么,之后就只打包那些经常变化的部分,这样不就能提高效率了么?是的, DllReferencePlugin & DllPlugin
基本上要做的就是这么一回事。所以,我们会针对这两部分做不同的配置。
// webpack.dll.js new webpack.DllPlugin({ context: process.cwd(), path: path.join(__dirname, '..', 'dist', 'dll', '[name]-manifest.json'), name: '[name]_[hash]' }) // webpack.common.js new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require(path.resolve(__dirname, '..', 'dist', 'dll', "vendor-manifest.json")) }),
multi-spa-webpack-cli使用说明
multi-spa-webpack-cli
已经发布到 npm,只要在 node 环境下安装即可。 一路按 Enter,全部源码都在里面!!!
npm install multi-spa-webpack-cli -g
使用步骤如下:
# 1. 初始化项目 multi-spa-webpack-cli init spa-project # 2. 进入文件目录 cd spa-project # 3. 安装依赖 npm install # 4. 打包不变的部分 npm run build:dll # 5. 启动项目(手动打开浏览器:localhost:8090) npm start
webpack 系列:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 分离Webpack开发环境与生产环境的配置
- Xcode配置测试环境和线上环境
- Linux环境centos7 配置java环境
- hadoop地址配置、内存配置、守护进程设置、环境设置
- 配置lisp开发环境
- 配置lisp开发环境
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
HTML 编码/解码
HTML 编码/解码