安科网

webpack4+React16项目构建(二)

xingye

xingye

2019-11-03

关注 关注

前言

之前一段时间工作原因把精力都放在小程序上,趁现在有点空闲时间,刚好官方文档也补充完整了,我准备重温一下 webpack 之路了,因为官方文档已经写得非常详细,我会大量引用原文描述,主要重点放在怎么从零构建 webpack4 代码上,这不是一个系统的教程,而是从零摸索一步步搭建起来的笔记,所以前期可能bug会后续发现继续修复而不是修改文章.

系列文章

webpack4从零开始构建(一)
webpack4+React16项目构建(二)
webpack4功能配置划分细化(三)
webpack4引入Ant Design和Typescript(四)
webpack4代码去重,简化信息和构建优化(五)
webpack4配置Vue版脚手架(六)

基本已经可以使用的完整配置webpack4_demo

PS:

2018/12/12 修改细节布局
2018/12/26上传,代码同步到第四篇文章
2019/03/14上传,补充代码到第二篇文章

引入React

首先安装React环境库

yarn add react react-dom react-router-dom

react和react-dom的区别

  • react是核心代码,只包含了定义组件的方法如React.createElement，.createClass，.Component，.children以及其他元素和组件类。
  • react-dom是渲染代码,包括ReactDOM.render，.unmountComponentAtNode和.findDOMNode等实现将虚拟DOM渲染到界面

react-router和react-router-dom的区别

  • react-router: 实现了路由的核心功能
  • react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。
  • react-router-native: 基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。

开始使用

修改index.html如下

<!doctype html>
<html>

<head>
  <title>webpack + React</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

修改index.js,引用React语法写个简单例子

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<div>Hello world</div>, document.getElementById("root"));

到此还没结束,我们还需要安装下面babel依赖配置webpack环境才能正常打包运行

yarn add babel-core babel-loader@7 babel-preset-env babel-preset-react

粗略讲解一下各个依赖干嘛的

  • babel-core是作为babel的核心,把 javascript 代码分析成 AST (抽象语法树, 是源代码的抽象语法结构的树状表现形式)，方便各个插件分析语法进行相应的处理
  • babel-loader也是核心插件,允许使用Babel和webpack转换JavaScript文件
  • babel-preset-env基于你的实际浏览器及运行环境，自动的确定babel插件及polyfills，转译ES2015及此版本以上的语言
  • babel-preset-react编译react代码

注意: 因为babel-core@7+还不稳定,所以默认安装@6+,需要babel-loader@7+才能运行,所以上面指定了版本

根目录新增 .babelrc 配置文件,babel所有的操作基本都会来读取这个配置文件，如果没有这个配置文件，会从package.json文件的babel属性中读取配置。

{
    "presets": [
        ["env", {
            modules: false
        }], "react"
    ]
}

注意: 因为Tree Shaking这个功能是基于ES6 modules 的静态特性检测，来找出未使用的代码，所以如果你使用了 babel 插件的时候，如：babel-preset-env，它默认会将模块打包成commonjs，这样就会让Tree Shaking失效了,所以我们要设置一下关闭 Babel 的模块转换功能，保留原本的 ES6 模块化语法。

我们还要去webpack.common.js配置loader,完整配置如下

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  // 入口
  entry: "./src/index.js",
  // 输出
  output: {
    // 打包文件名
    filename: "[name].bundle.js",
    // 输出路径
    path: path.resolve(__dirname, "dist"),
    // 资源请求路径
    publicPath: ""
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // 匹配文件
        exclude: /node_modules/, // 过滤文件夹
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(css|scss)$/, // 匹配文件
        use: [
          "style-loader", // 使用<style>将css-loader内部样式注入到我们的HTML页面
          "css-loader", // 加载.css文件将其转换为JS模块
          "sass-loader" // 加载 SASS / SCSS 文件并将其编译为 CSS
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/, // 图片处理
        use: ["file-loader"]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/, // 字体处理
        use: ["file-loader"]
      },
      {
        test: /\.xml$/, // 文件处理
        use: ["xml-loader"]
      },
      {
        test: /\.html$/, // 处理html资源如图片
        use: ["html-loader"]
      }
    ]
  },
  plugins: [
    // 清除文件
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // title
      title: "test",
      // 模板
      template: "index.html"
    })
  ]
};

继续使用上一章配置过命令和当前依赖文件package.json, 完整代码如下:

{
  "sideEffects": false,
  "scripts": {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --config webpack.server.js"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^2.0.0",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-router-dom": "^4.3.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-bundle-analyzer": "^3.1.0",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.2.1",
    "xml-loader": "^1.2.1"
  },
  "name": "webpack_demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

打开终端执行命令

npm run dev

运行dist目录下的index.html文件可以查看效果

项目拓展

接下来继续展开代码,按照正常项目开发使用ES6方式开发和引用资源处理,首先我们分门别类区分一下资源
index.js修改如下:

import React from "react";
import ReactDOM from "react-dom";
import Main from "./page/main";

ReactDOM.render(<Main />, document.getElementById("root"));

新增main.js文件代码如下:

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import "../style/style.scss";

export default class Main extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      title: "Hello World!"
    };
  }
  // 挂载前
  componentWillMount() {
    console.log("componentWillMount");
  }
  // 挂载后
  componentDidMount() {
    console.log("componentDidMount");
  }
  // 接受新props
  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps", nextProps);
  }
  // 是否重新渲染
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
  }
  // 更新前
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate", nextProps, nextState);
  }
  // 更新后
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate", nextProps, nextState);
  }
  // 卸载前
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
  // 捕捉错误
  componentDidCatch() {
    console.log("componentDidCatch");
  }
  render() {
    return (
      <Fragment>
        <img className="img1" src={require("../img/1.jpg")} alt="" />
        <div className="img2" />
        <p>{this.state.title}</p>
      </Fragment>
    );
  }
}

在jsx里相对路径的图片不会被file-loader和url-loader处理,所以我们使用这种写法引入比较方便

<img className="img1" src={require("../img/1.jpg")} alt="" />

style.scss如下:

html {
  background-color: #666;

  p {
    color: red;
  }

  .img1,
  .img2 {
    width: 250px;
    height: 400px;
  }

  .img2 {
    background: url("../img/2.jpg") no-repeat center center;
    background-size: cover;
  }
}

修改一下webpack.common.js图片处理,使用url-loader将50kb内的图片转成base64编码保存进代码减少请求,不符合条件的打包图片放到一个单独文件夹img,因为url-loader内置有file-loader,所以我们不必要再引入

yarn add image-webpack-loader
{
  test: /\.(html)$/,
  use: {
    loader: "html-loader",
    options: {
      attrs: ["img:src", "img:data-src", "audio:src"],
      minimize: true
    }
  }
},
{
  test: /\.(png|svg|jpg|jpeg|gif)$/i, // 图片处理
  use: [
    {
      loader: "url-loader",
      options: {
        name: "[name].[hash:5].[ext]",
        limit: 50 * 1024, // size <= 50kb
        outputPath: "img"
      }
    }
  ]
},

重新执行命令

npm run dev

打开页面会看到1.jpg变成base64代码,一切都在预期内.

使用路由

根目录新增router文件夹,里面创建index.js,代码如下:

import React, { Component, Fragment } from "react";
import Main from "../page/main";

class App extends Component {
  render() {
    return (
      <Fragment>
        <Main />
      </Fragment>
    );
  }
}

然后收拾一下main.js页面,把多余生命周期清除掉

import React, { Component, Fragment } from "react";
import { Switch, Route, Redirect, Link } from "react-router-dom";
import View1 from "../component/view1";
import View2 from "../component/view2";
import "../style/style.scss";

export default class Main extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      title: "Hello World!"
    };
  }

  render() {
    return (
      <Fragment>
        <p>{this.state.title}</p>
        <Link to="/view1/">View1</Link>
        <Link to="/view2/">View2</Link>
        <Switch>
          <Route exact path="/" component={View1} />
          <Route path="/view1/" component={View1} />
          <Route path="/view2/" component={View2} />
          <Redirect to="/" />
        </Switch>
      </Fragment>
    );
  }
}

分别新增page1.js和page2.js,main.js的图片分别迁移进去新目录component

import React, { Fragment } from "react";

export default () => {
  return (
    <Fragment>
      <p>Page1</p>
      <img className="img1" src={require("../img/1.jpg")} alt="" />
    </Fragment>
  );
};
import React, { Fragment } from "react";

export default () => {
  return (
    <Fragment>
      <p>Page2</p>
      <div className="img2" />
    </Fragment>
  );
};

最后src目录下的index.js修改如下:

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";
import Main from "./page/main";

ReactDOM.render(
  <HashRouter>
    <Main />
  </HashRouter>,
  document.getElementById("root")
);

现在整个目录结构如下
webpack4+React16项目构建(二)

执行命令

npm run dev

一个简单的路由切换页面就完成了,界面大概如下
webpack4+React16项目构建(二)
webpack4+React16项目构建(二)

图片压缩

上面我们只是将小于50kb的图片内嵌进代码里,超过50kb的图片我们可以引入插件作处理

yarn add image-webpack-loader

然后我们在修改一下loader配置

{
  test: /\.(png|svg|jpe?g|gif)$/i, // 图片处理
  use: [
    {
      loader: "url-loader",
      options: {
        name: "[name].[hash:5].[ext]",
        limit: 20 * 1024, // size <= 50kb
        outputPath: "img"
      }
    },
    {
      loader: "image-webpack-loader",
      options: {
        // Compress JPEG images
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        // Compress PNG images
        optipng: {
          enabled: false
        },
        //  Compress PNG images
        pngquant: {
          quality: "65-90",
          speed: 4
        },
        // Compress GIF images
        gifsicle: {
          interlaced: false
        },
        // Compress JPG & PNG images into WEBP
        webp: {
          quality: 75
        }
      }
    }
  ]
},

注意顺序,这种写法会先经过压缩之后再有url-loader作处理,能够让部分原本不符合大小的图片压缩之后就满足转码base64了,为了突出效果限制到20kb内.
以我的测试图为例,压缩率达到

80.4kb -> 45.9kb

至于其他图片配置可根据自己需求修改

解析(resolve)

随着文件越来越多,引用路径越来越复杂,会容易让人混乱,我们可以使用resolve做些依赖处理,这些选项能设置模块如何被解析
在webpack.common.js新增下面配置代码,设置简化路径

resolve: {
  // 创建 import 或 require 的别名，来确保模块引入变得更简单
  alias: {
    "@": path.resolve(__dirname, "src/"),
    IMG: path.resolve(__dirname, "src/img"),
    STYLE: path.resolve(__dirname, "src/style"),
    JS: path.resolve(__dirname, "src/js"),
    ROUTER: path.resolve(__dirname, "src/router"),
    PAGE: path.resolve(__dirname, "src/page"),
    CMT: path.resolve(__dirname, "src/component")
  }
}

然后我们就可以修改对应的文件引入模块写法,例如

import "STYLE/style.scss";

其他可自行修改

打包文件性能可视化

目前基本搭建完了,然后我们就可以利用一款检测打包性能的插件找到可优化空间

yarn add webpack-bundle-analyzer

在webpack.server.js新增依赖

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;

plugins里初始化方法

new BundleAnalyzerPlugin()

执行命令会自动打开页面http://127.0.0.1:8888/,这里可以看到性能图,不影响原本的http://localhost:9000/#/查看项目

npm run start

webpack4+React16项目构建(二)

CSS优化

webpack4使用插件和之前版本不一样,我们安装以下依赖

yarn add mini-css-extract-plugin

修改一下webpack.common.js的配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
--------------------------省略-----------------------------------
{
  test: /\.scss$/, // 匹配文件
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        // you can specify a publicPath here
        // by default it use publicPath in webpackOptions.output
        publicPath: "../"
      }
    },
    // "style-loader", // 使用<style>将css-loader内部样式注入到我们的HTML页面
    "css-loader", // 加载.css文件将其转换为JS模块
    "sass-loader" // 加载 SASS / SCSS 文件并将其编译为 CSS
  ]
},
---------------------------省略------------------------------------
plugins: [
  // 提取样式文件
  new MiniCssExtractPlugin({
    // Options similar to the same options in webpackOptions.output
    // both options are optional
    filename: "style/[name].[chunkhash:8].css",
    chunkFilename: "style/[id].css"
  })
],

执行命令之后就看到有新的样式文件独立出来了

npm run dev

提取公共库

从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置,再生产环境下回自动开启,只需要设置

mode: "production"

从文档来看它的默认设置是这样的

New chunk can be shared OR modules are from the node_modules folder
New chunk would be bigger than 30kb (before min+gz)
Maximum number of parallel requests when loading chunks on demand would be lower or equal to 5
Maximum number of parallel requests at initial page load would be lower or equal to 3

新chunk是能够被共享或者来自node_modules文件
新chunk在min+gz压缩之前大于30kb
按需加载的并行请求数小于等于5
首屏渲染的最大并行请求数小于等于3

因为现在demo比较小,没什么好讲解的,一般根据项目情况调整一下拆分机制就好了,假如我想要把node_modules和组件代码拆分出来,可以这么写

module.exports = merge(common, {
  optimization: {
    splitChunks: {
      // 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)
      chunks: "all",
      cacheGroups: {
        libs: {
          // 优先级高于其他就不会被打包进其他chunk,如果想匹配自己定义的拆分规则，则priority需要设置为正数，优先匹配默认拆分规则就设置为负数。
          priority: 10,
          test: /[\\/]node_modules[\\/]/,
          name: "chunk-libs",
          chunks: "initial"
        },
        commons: {
          // 优先级高于其他就不会被打包进其他chunk,如果想匹配自己定义的拆分规则，则priority需要设置为正数，优先匹配默认拆分规则就设置为负数。
          priority: 15,
          test: path.resolve(__dirname, "src/component"),
          name: "chunk-commons",
          // 最小共用次数
          minChunks: 2, 
          // 如果当前chunk已经被打包进其他chunk的时候就不再打包,而是复用其他chunk
          reuseExistingChunk: true
        }
      }
    }
  }
});

react webpack react-router-dom

xingye

xingye

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

Webpack 原理浅析

Webpack迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的Webpack。假设某一天，我们接到

不知道该写啥QAQ 2020-08-02

从零开始搭建一个 React + Mobx + React Router 脚手架

本文详细介绍了如何从零开始搭建一个 React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。建议将代码拉下来之后，配合本文一起查看，效果更佳。最近将脚手架中的 babel 配置更新到了 7.0.0 版本，所以部分地方作出

不知道该写啥QAQ 2020-06-10

2021适合移动和桌面应用的JavaScript框架是什么

当听到JavaScript这个词的时候，“web开发”会一下子出现在我们的脑海中，因为JavaScript在很长一段时间里一直是web应用开发最广泛使用的语言，Angular、React和Vue等框架目前也很有名。尽管JavaScript主导着web开发领

游走的豚鼠君 2020-11-10

我在大厂写React学到了什么？性能优化篇

我工作中的技术栈主要是 React + TypeScript，这篇文章我想总结一下如何在项目中运用 React 的一些技巧去进行性能优化，或者更好的代码组织。性能优化的重要性不用多说，谷歌发布的很多调研精确的展示了性能对于网站留存率的影响，而代码组织优化

81417707 2020-10-30

React应用程序配置TypeScript

最近在学习TypeScript的一些知识用到了 react,记录一下 react 创建应用项目和支持 TypeScript。React 是一个用于构建用户界面 UI 的 JavaScript 库,它的创建默认是不支持 TypeScript 的,本文使用的是

ctg 2020-10-14

2020年，JavaScript开发人员必备的5项高薪技能

开发人员的一生可以用两句话概括：计算器，以及学习新技能。成为开发人员绝非易事，他们是解决问题的人，也是不断学习的人。科技世界每天都在快速变化，如果你不想在这条快速变化的道路上落后，就必须不断学习新技能。不断升级，绝不止步。人们对React开发商的需求并未出

小飞侠V 2020-09-25

移动前端开发和Web前端开发的区别是什么？

前端这门技术，从诞生发展至今不过寥寥十余年。如果说前十年是 PC 前端的时代，那后十年一定是属于移动前端的时代。特别是随着网络制式的发展，移动设备在全球范围内得到了空前的普及，在前端领域，Hybird Web、React Native、Weex、Flutt

PncLogon 2020-09-24

8月份Github上热门的JavaScript开源项目排行

React是Facebook开发的用于构建用户界面的JavaScript库，现已为很多公司所用，因为它采用了一种不同的方式来构建应用：借助于React，开发者可以将应用分解为彼此解耦的独立组件，这样就可以独立维护并迭代各种组件了。Zettlr是一款非常适合

jipengx 2020-09-10

快速入门Web前端开发的正确姿势

入门标准很简单，就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular

颤抖吧腿子 2020-09-04

移动APP开发有哪些框架？

现在比较流行的移动APP开发框架有以下六种：网页、混合、不仅、原生、桥接、自绘。前三种体验与Web的体验相似，后三种与原生APP的体验相似。这六种框架形式，都有自己适用的范围。无所谓好坏，适用就是好。自绘应用适用于游戏和有特殊效果的应用，最大的好处是没有平

wwzaqw 2020-09-04

为何React能成为2021年JavaScript优秀框架？

本文转载自公众号“读芯术”。要回答这个问题有点困难，在软件开发行业中有大量可用的语言和框架。JavaScript已经成为大多数开发流程的支柱，所以我想对三种基于JavaScript的框架进行比较，我选择的是Angular、React和Vue三种框架。Sta

maple00 2020-09-02

React Spectrum，Adobe的组件库和工具入门

React Spectrum是一个由Adobe开发的组件库和工具，可帮助你构建自适应，可访问且健壮的用户体验。帮助开发者使用React构建功能丰富的应用程序。React Spectrum是Adobe设计系统Spectrum的一个实现。React Aria

青蓝 2020-08-26

React实现阿里云OSS上传文件的示例

阿里云 OSS 是 阿里云提供的海量、安全、低成本、高可靠的云存储服务，提供 99.9999999999%的数据可靠性（号称）。能够使用 RESTful API 可以在互联网任何位置存储和访问，支持容量和处理能力弹性扩展。钩子函数首先计算签名是否过期，如果

罗忠浩 2020-08-16

React组件开发中常见的陷阱

React作为使用最广泛Web前端开发之一，在Web开发领域越来成熟和稳固。其新版本发布的Hook API/concept使得组件更加便捷易用。虽然如此，React开发中仍然有很多的陷阱值得每一位React拥趸关注。在React中可以使用两种方法编组件函

liduote 2020-08-13

react兄弟组件传值

react中实现数据的共享可以通过react提供的Context组件，但是开发中经常有跨组件之间的事件传递。在vue中可以通过事件总线的方式。在react中可以借助第三方库来完成。这里推荐两个使用较多的库 pubsub-js 和 events 来完成对应的

pengruiyu 2020-08-01

React：虚拟DOM和diff算法

目的：为了实现页面元素的高效更新。

hyMiss 2020-07-27

2020年排名前10的Flutter和React Native UI库

如今，Flutter在移动技术中扮演着非常重要的角色。移动技术的选择已经变得非常关键，Flutter提高了生产率，Flutter已被许多公司采用。一些例子如阿里巴巴、谷歌等很多大公司都在提供世界级的flutter开发服务。React Native帮助我们借

wmd看海 2020-07-27

React Native pod install错误 SDK \"iphoneos\" cannot be located

给Xcode命令行工具指定路径。//查看所有可用sdk

孝平 2020-07-18

深入理解React：diff 算法

而 React 16 启用了全新的架构 Fiber，相应的 Diff 算法也有所改变，不在这篇文章的讨论范围内。研究 React 的 Diff 算法重在理解其思想，具体实现其次。将一颗 Tree 通过最小操作步数映射为另一颗 Tree，这种算法称之为 Tr

Eduenth 2020-07-05

react组件通信，引出性能优化问题

{/* 我们发现list数据的渲染，会引起Footer组件的渲染，其实Footer组件的并没有必要渲染 */}. 性能优化对于 React 更加重要！SCU 一定要每次都用吗？　　数据结构简单的时候直接对比可以，但是如果数据结构复杂的时候，不适合深度比较，

iftrueIloveit 2020-07-04
xingye

xingye

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号