1. 首页

webpack4 的30个步骤打造优化到极致的 react 开发环境之愿世间再无webpack配置工程师

上一篇记录了一下webpack4使用的一些基础使用小技巧,确实没有想到能收获这么大的反响,还是非常感谢各位的错爱,没有看过的关于webpack4的14个知识点,童叟无欺

这一篇文章将react和webpack4进行结合,集webpack的优势于一身,从0开始构建一个强大的react开发环境

本篇所有代码线上代码react-webpack4-cook,翻译过来叫:webpack4和react的乱炖,可以跟着代码进行配置,之前有很多坑,线上代码都已经被解决了 。如果对您有帮助,不妨给个star.点赞关注不迷路

前言

一篇文章不写前言总感觉不太正式,大概介绍下我是怎么完成一个总的知识点的概括的把。其实很多人都有一看就会,一做就废的特点(当然也包括我在内),这个时候,你需要制定一个略微详细的计划,就比如我这篇会首先列出知识点,列出大的方向,制定思维导图,然后根据思维导图编写代码,计划明确,就会事半功倍,因此,希望你可以跟着本篇循序渐进的跟着代码走一遍,不管是真实开发,还是面试,都有的扯。好了,不扯了,可以先看下目录。现在开始

一、基础配置

1、init项目


mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y

2、安装webpack


yarn add webpack webpack-cli webpack-dev-server -D //webpack4把webpack拆分了 touch webpack.config.js // webpack.config.js初始化内容 module.exports = { mode: "development", entry: ["./src/index.js"], output: { // 输出目录 path: path.join(__dirname, "dist"), // 文件名称 filename: "bundle.js" }, module:{}, plugins:[], devServer:{} }

3、安装react并编写代码

这部分代码篇幅过多,就是一些简单的react和react-router的一些代码编写,可以去github上查看,这里只阐述基本功能


cd src cnpm i react react-router-dom -S // 建立如下的文件目录,并编写安装react和react-router并编写react代码如下 |-src │ index.js 主文件 ├───pages │ Count.jsx -- 实现了一个计数器的功能,点击按钮,会让数字增加,按钮会实时显示在页面上 │ Home.jsx -- 一个简单的文字展示 └───router index.js -- 路由配置文件,两个页面分别对应两个路由 count和 home

4、babel编译ES6,JSX等


// @babel/core-babel核心模块 @babel/preset-env-编译ES6等 @babel/preset-react-转换JSX cnpm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react -D // @babel/plugin-transform-runtime: 避免 polyfill 污染全局变量,减小打包体积 // @babel/polyfill: ES6 内置方法和函数转化垫片 cnpm i @babel/polyfill @babel/runtime { test: /\.jsx?$/, exclude: /node_modules/, use: [ { loader: "babel-loader" } ] }

新建.babelrc文件


{ "presets": ["@babel/preset-env","@babel/preset-react"], "plugins": ["@babel/plugin-transform-runtime"] }

5、按需引入polyfill

在src下的index.js中全局引入 @babel/polyfill 并写入 ES6 语法 ,但是这样有一个缺点:

  1. 全局引入 @babel/polyfill 的这种方式可能会导入代码中不需要的 polyfill,从而使打包体积更大

更改 .babelrc,只转译我们使用到的


npm install core-js@2 @babel/runtime-corejs2 -S { "presets": ["@babel/preset-env", { "useBuiltIns": "usage" }, "@babel/preset-react"], "plugins": ["@babel/plugin-transform-runtime"] } 将将全局引入这段代码注释掉 // import '@babel/polyfill'

这就配置好了按需引入。配置了按需引入 polyfill 后,用到es6以上的函数,babel会自动导入相关的polyfill,这样能大大减少 打包编译后的体积

5、插件 CleanWebpackPlugin

你经过多次打包后会发现,每次打包都会在dist目录下边生成一堆文件,但是上一次的打包的文件还在,我们需要每次打包时清除 dist 目录下旧版本文件


cnpm install clean-webpack-plugin -D // 注意这个引入的坑,最新版的需要这样引入,而不是直接const CleanWebpackPlugin const { CleanWebpackPlugin } = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin() ]

6、使用插件 HtmlWebpackPlugin

经过上一步的操作,index.html 也被清除了。因此我们将使用 HtmlWebpackPlugin插件,来生成 html, 并将每次打包的js自动插入到你的 index.html 里面去,而且它还可以基于你的某个 html 模板来创建最终的 index.html,也就是说可以指定模板哦


cnpm install html-webpack-plugin -D // 创建template.html cd src touch template.html // 内容如下 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>react-webpack4-cook</title> </head> <body> <div id="root"></div> </body> </html> // webpack.config.js做出更改 const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ filename: 'index.html', // 最终创建的文件名 template: path.join(__dirname, 'src/template.html') // 指定模板路径 }) ]

7、使用 source-map,对devtool进行优化

webpack中devtool选项用来控制是否生成,以及如何生成 source map。简言之,source map就是帮助我们定位到错误信息位置的文件。正确的配置source map,能够提高开发效率,更快的定位到错误位置。

在webpack.config.js中选项mode下加上如下这句话:


devtool:"cheap-module-eval-source-map",// 开发环境配置 devtool:"cheap-module-source-map", // 线上生成配置

8、使用 WebpackDevServer

webpack-dev-server就是在本地为搭建了一个小型的静态文件服务器,有实时重加载的功能,为将打包生成的资源提供了web服务


devServer: { hot: true, contentBase: path.join(__dirname, "./dist"), host: "0.0.0.0", // 可以使用手机访问 port: 8080, historyApiFallback: true, // 该选项的作用所有的404都连接到index.html proxy: { // 代理到后端的服务地址,会拦截所有以api开头的请求地址 "/api": "http://localhost:3000" } }

9、使用 HotModuleReplacement (热模块替换HMR)

建立了开发环境本地服务器 后,当修改内容后,网页会同步刷新,我们现在进入toCOunt页面

  1. 点击按钮,将数字加到一个不为0的数,比如加到6

  2. 然后你可以在代码中改变按钮的文字,随便改点东西,会发现,页面刷新后,数字重新变为0

这显然不是我们想要的,想要的是,能不能把页面的状态保存了,也就是更改了代码后,页面还是保存了数字为6的状态,也就是实现局部更改,首先需要用到:HotModuleReplacementPlugin插件


devServer: { hot: true }, plugins: [ new webpack.HotModuleReplacementPlugin() ],

完事之后,继续更上边的操作,点击按钮,数字增加,然后更改内容,发现还是没有保存状态。。。what?怎么办

对@!这还没完呢,接着往下看,我们还需要react-hot-loader这个插件

10、react-hot-loader记录react页面留存状态state

我们继续接着上边的进行操作,分一下四步


cnpm i react-hot-loader -D // 在主文件里这样写 import React from "react"; import ReactDOM from "react-dom"; import { AppContainer } from "react-hot-loader";-------------------1、首先引入AppContainre import { BrowserRouter } from "react-router-dom"; import Router from "./router"; /*初始化*/ renderWithHotReload(Router);-------------------2、初始化 /*热更新*/ if (module.hot) {-------------------3、热更新操作 module.hot.accept("./router/index.js", () => { const Router = require("./router/index.js").default; renderWithHotReload(Router); }); } function renderWithHotReload(Router) {-------------------4、定义渲染函数 ReactDOM.render( <AppContainer> <BrowserRouter> <Router /> </BrowserRouter> </AppContainer>, document.getElementById("app") ); }

好了,现在你再试试

11、编译css和scss


cnpm install css-loader style-loader sass-loader node-sass -D { test: /\.scss$/, use: [ "style-loader", // 创建style标签,并将css添加进去 "css-loader", // 编译css "sass-loader" // 编译scss ] }

12、集成postcss

最关心的还是这有啥用啊?自动增加前缀, postcss-cssnext允许你使用未来的css特性,并做一些兼容处理


cnpm install postcss-loader postcss-cssnext -D { test: /\.scss$/, use: [ "style-loader", // 创建style标签,并将css添加进去 "css-loader", // 编译css "postcss-loader", "sass-loader" // 编译scss ] } // 在刚才的home.scss 加上 transform: scale(2); 通过控制台查看,已经自动加上了前缀

13、处理图片


cnpm i file-loader url-loader -D file-loader 解决css等文件中引入图片路径的问题 url-loader 当图片较小的时候会把图片BASE64编码,大于limit参数的时候还是使用file-loader 进行拷贝 { test: /\.(png|jpg|jpeg|gif|svg)/, use: { loader: 'url-loader', options: { outputPath: 'images/', // 图片输出的路径 limit: 10 * 1024 } } }

14、处理字体


{ test: /\.(eot|woff2?|ttf|svg)$/, use: [ { loader: 'url-loader', options: { name: '[name]-[hash:5].min.[ext]', limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file publicPath: 'fonts/', outputPath: 'fonts/' } } ] }

二、webpack优化

1、alias对文件路径优化

  1. extension: 指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配
  2. alias: 配置别名可以加快webpack查找模块的速度

resolve: { extension: ["", ".js", ".jsx"], alias: { "@": path.join(__dirname, "src"), pages: path.join(__dirname, "src/pages"), router: path.join(__dirname, "src/router") } },

14、使用静态资源路径publicPath(CDN)

CDN通过将资源部署到世界各地,使得用户可以就近访问资源,加快访问速度。要接入CDN,需要把网页的静态资源上传到CDN服务上,在访问这些资源时,使用CDN服务提供的URL。


output:{ publicPatch: '//【cdn】.com', //指定存放JS文件的CDN地址 }

2、MiniCssExtractPlugin ,抽取 css 文件

如果不做配置,我们的css是直接打包进js里面的,我们希望能单独生成css文件。 因为单独生成css,css可以和js并行下载,提高页面加载效率


cnpm install mini-css-extract-plugin -D const MiniCssExtractPlugin = require("mini-css-extract-plugin"); { test: /\.scss$/, use: [ // "style-loader", // b不再需要style-loader要已经分离处理 MiniCssExtractPlugin.loader, "css-loader", // 编译css "postcss-loader", "sass-loader" // 编译scss ] }, plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ]

3、代码分割按需加载、提取公共代码

为什么要实现按需加载?

我们现在看到,打包完后,所有页面只生成了一个bundle.js,当我们首屏加载的时候,就会很慢。因为他也下载了别的页面的js,也就是说,执行完毕之前,页面是 完!全!空!白!的!。 如果每个页面单独打包自己的js,就可以在进入页面时候再加载自己 的js,首屏加载就可以快很多


optimization: { splitChunks: { chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件 }, },

5、文件压缩

webpack4只要在生产模式下, 代码就会自动压缩


mode:productioin

6、暴露全局变量

可以直接在全局使用$变量


new webpack.ProvidePlugin({ $: 'jquery', // npm,JS中文网 - 前端进阶资源教程 www.javascriptc.com jQuery: 'jQuery' // 本地Js文件 })

8、指定环境,定义环境变量


plugins: [ new webpack.DefinePlugin({ 'process.env': { VUEP_BASE_URL: JSON.stringify('http://localhost:9000') } }), ]

9、css Tree Shaking


npm i glob-all purify-css purifycss-webpack --save-dev const PurifyCSS = require('purifycss-webpack') const glob = require('glob-all') plugins:[ // 清除无用 css new PurifyCSS({ paths: glob.sync([ // 要做 CSS Tree Shaking 的路径文件 path.resolve(__dirname, './src/*.html'), // 请注意,我们同样需要对 html 文件进行 tree shaking path.resolve(__dirname, './src/*.js') ]) }) ]

10、js Tree Shaking

清除到代码中无用的js代码,只支持import方式引入,不支持commonjs的方式引入

只要mode是production就会生效,develpoment的tree shaking是不生效的,因为webpack为了方便你的调试


optimization: { usedExports:true, }

11、DllPlugin插件打包第三方类库

项目中引入了很多第三方库,这些库在很长的一段时间内,基本不会更新,打包的时候分开打包来提升打包速度,而DllPlugin动态链接库插件,其原理就是把网页依赖的基础模块抽离出来打包到dll文件中,当需要导入的模块存在于某个dll中时,这个模块不再被打包,而是去dll中获取。

安装jquery,并在入口文件引入。新建webpack.dll.config.js文件


/* * @desc 静态公共资源打包配置,JS中文网 - 前端进阶资源教程 www.javascriptc.com */ const path = require('path') const webpack = require('webpack') const src = path.resolve(process.cwd(), 'src'); // 源码目录 const evn = process.env.NODE_ENV == "production" ? "production" : "development"; module.exports = { mode: 'production', entry: { // 定义程序中打包公共文件的入口文件vendor.js jquery: ['jquery'] }, output: { path: path.resolve(__dirname, '..', 'dll'), filename: '[name].dll.js', library: '[name]_[hash]', libraryTarget: 'this' }, plugins: [ new webpack.DllPlugin({ // 定义程序中打包公共文件的入口文件vendor.js context: process.cwd(), // manifest.json文件的输出位置 path: path.resolve(__dirname, '..', 'dll/[name]-manifest.json'), // 定义打包的公共vendor文件对外暴露的函数名 name: '[name]_[hash]' }) ] }

在package.json中添加


"build:dll": "webpack --config ./build/webpack.dll.config.js",

运行


npm run build:dll

你会发现多了一个dll文件夹,里边有dll.js文件,这样我们就把我们的jquery这些已经单独打包了,接下来怎么使用呢?

需要再安装一个依赖 npm i add-asset-html-webpack-plugin,它会将我们打包后的 dll.js 文件注入到我们生成的 index.html 中.在 webpack.base.config.js 文件中进行更改。


new AddAssetHtmlWebpackPlugin({ filepath: path.resolve(__dirname, '../dll/jquery.dll.js') // 对应的 dll 文件路径 }),,JS中文网 - 前端进阶资源教程 www.javascriptc.com new webpack.DllReferencePlugin({ manifest: path.resolve(__dirname, '..', 'dll/jquery-manifest.json') })

好了,你可有吧new webpack.DllReferencePlugin这个插件注释掉,打包试下,在放开打包试一下,我测试结果,注释钱5689,注释后,5302ms,才差了300ms?注意,我这里只有一个jquery包作为演示,要是你把很多个都抽离了出来呢???那岂不是很恐怖了。如果你看的有点迷迷糊糊,那推荐去线上看一下我的代码吧,一看便知

12、使用happypack并发执行任务

运行在 Node.之上的Webpack是单线程模型的,也就是说Webpack需要一个一个地处理任务,不能同时处理多个任务。 Happy Pack 就能让Webpack做到这一点,它将任务分解给多个子进程去并发执行,子进程处理完后再将结果发送给主进程。


cnpm i -D happypack // webpack.config.js rules: [ { // cnpm i babel-loader @babel/core @babel/preset-env -D test: /\.jsx?$/, exclude: /node_modules/, use: [ { // 一个loader对应一个id loader: "happypack/loader?id=busongBabel" } ] } ] //在plugins中增加 plugins:[ new HappyPack({ // 用唯一的标识符id,来代表当前的HappyPack是用来处理一类特定的文件 id:'busongBabel', // 如何处理.js文件,用法和Loader配置中一样 loaders:['babel-loader?cacheDirectory'], threadPool: HappyPackThreadPool, }) ]

13、PWA优化策略

简言之:在你第一次访问一个网站的时候,如果成功,做一个缓存,当服务器挂了之后,你依然能够访问这个网页 ,这就是PWA。那相信你也已经知道了,这个只需要在生产环境,才需要做PWA的处理,以防不测。


cnpm i workbox-webpack-plugin -D const WorkboxPlugin = require('workbox-webpack-plugin') // 引入 PWA 插件 const prodConfig = { plugins: [ // 配置 PWA new WorkboxPlugin.GenerateSW({ clientsClaim: true, skipWaiting: true }) ] } 在入口文件加上 // 判断该浏览器支不支持 serviceWorker if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker .register('/service-worker.js') .then(registration => { console.log('service-worker registed') }) .catch(error => { console.log('service-worker registed error') }) }) }

配置完后,你可以打包到dist目录下,在dist目录下启动一个静态服务器,访问首页,然后关闭这个服务器,你会惊讶的发现:网站竟然还能够访问,哈哈,是不是很神奇?

15、合并提取webpack公共配置


开发环境与生产环境以及webpack配置文件的分离,具体需要用到webpack-merge,用来 合并 webpack配置

16、最终分离配置文件(打完收工)

由于时间和篇幅的限制,基本到这里就结束了。以上,不管是提到的未提到的,或者还有一些细枝末节,github上的源码基本都已经全部包括在内了,如果有需要可以去github参照配置文件,自己跟着配一份出来,会更加事半功倍

作者:张不怂
链接:https://juejin.im/post/5cfe4b13f265da1bb13f26a8

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:webpack4 的30个步骤打造优化到极致的 react 开发环境之愿世间再无webpack配置工程师

链接:https://www.javascriptc.com/2544.html

« 一文看懂 react hooks,小姐姐再也不用担心我学不会了
react hooks+redux+immutable.js打造网易云音乐精美webApp»
Flutter 中文教程资源

相关推荐

QR code