webpack 4 的 30 个步骤打造优化到极致的 react 开发环境

夜尽天明

发布于 2019-06-18 16:48:38

2.2K0

发布于 2019-06-18 16:48:38

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

其实很多人都有 一看就会,一做就废 的特点(当然也包括我在内),这个时候，你需要制定一个略微详细的计划，就比如我这篇会首先列出知识点，列出大的方向，制定思维导图，然后根据思维导图编写代码，计划明确，就会事半功倍，因此，希望你可以跟着本篇循序渐进的跟着代码走一遍，不管是真实开发，还是面试，都有的扯。

一、基础配置

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 

touch 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

|-src
│      index.js 主文件
├───pages
│      Count.jsx -- 实现了一个计数器的功能，点击按钮，会让数字增加，按钮会实时显示在页面上
│      Home.jsx -- 一个简单的文字展示
└───router
       index.js -- 路由配置文件，两个页面分别对应两个路由 count和 home

4、babel 编译 ES6、 JSX 等

cnpm i babel-loader @babel/core @babel/preset-env  @babel/plugin-transform-runtime   @babel/preset-react -D

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 语法，但是这样有一个缺点：

全局引入 @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"]
}

将全局引入这段代码注释掉

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

5、插件 CleanWebpackPlugin

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

cnpm install  clean-webpack-plugin -D



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
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, 
    proxy: {
      "/api": "http://localhost:3000"
    }
  }

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

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

点击按钮，将数字加到一个不为 0 的数，比如加到 6
然后你可以在代码中改变按钮的文字，随便改点东西，会发现，页面刷新后，数字重新变为 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", 
      "css-loader", 
      "sass-loader" 
    ]
}

12、集成 postcss

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

cnpm install  postcss-loader postcss-cssnext -D

{
    test: /\.scss$/,
        use: [
            "style-loader", 
            "css-loader", 
            "postcss-loader",
            "sass-loader" 
        ]
}

通过控制台查看，已经自动加上了前缀

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, 
              publicPath: 'fonts/',
              outputPath: 'fonts/'
            }
          }
        ]
      }

二、webpack优化

1、alias 对文件路径优化

a. extension: 指定 extension 之后可以不用在 require 或是 import 的时候加文件扩展名，会依次尝试添加扩展名进行匹配。

b. alias: 配置别名可以加快webpack查找模块的速度。

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

  },

c. 使用静态资源路径 publicPath (CDN)

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

output:{
 publicPatch: '//【cdn】.com', 
}

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: [
          
          MiniCssExtractPlugin.loader,
          "css-loader", 
          "postcss-loader",
          "sass-loader" 
        ]
      },
 plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]

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

为什么要实现按需加载？

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

  optimization: {
    splitChunks: {
      chunks: "all", 
    },
  },

5、文件压缩

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

mode:productioin

6、暴露全局变量

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

 new webpack.ProvidePlugin({
      $: 'jquery', 
      jQuery: 'jQuery' 
    })

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:[
    
    new PurifyCSS({
      paths: glob.sync([
        
        path.resolve(__dirname, './src/*.html'), 
        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 文件

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: {
        jquery: ['jquery']
    },
    output: {
        path: path.resolve(__dirname, '..', 'dll'),
        filename: '[name].dll.js',
        library: '[name]_[hash]',
        libraryTarget: 'this'
    },
    plugins: [
        new webpack.DllPlugin({
            context: process.cwd(),
            path: path.resolve(__dirname, '..', 'dll/[name]-manifest.json'),
            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 文件路径
 }),
 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

 rules: [
     {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            
            loader: "happypack/loader?id=busongBabel"
          }
        ]
      }
      ]
plugins:[
      new HappyPack({
      id:'busongBabel',
      loaders:['babel-loader?cacheDirectory'],
      threadPool: HappyPackThreadPool,
  })
]

13、PWA 优化策略

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

 cnpm i workbox-webpack-plugin -D

const WorkboxPlugin = require('workbox-webpack-plugin') 
const prodConfig = {
  plugins: [
    
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    })
  ]
}

在入口文件加上

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 参照配置文件，自己跟着配一份出来，会更加事半功倍

本篇所有代码线上代码 react-webpack4-cook,翻译过来叫：webpack4 和 react 的乱炖，可以跟着代码进行配置，之前有很多坑，线上代码都已经被解决了。

愿世间再无 webpack 配置工程师

如果对您有帮助，不妨给个 star，点赞关注不迷路。

作者：张不怂 https://juejin.im/post/5cea1e1ae51d4510664d1652

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-06-13，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自全栈修炼微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度