webpack4+React16项目构建(二)

时间  2019-11-10
标签 webpack4+react16 webpack react 项目 构建 栏目 React 繁體版
原文   原文链接

前言

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

系列文章

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

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

PS: java

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

引入React

首先安装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以下webpack

<!doctype html>
<html>

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

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

</html>

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

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

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

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

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

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

  • 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")
);

如今整个目录结构以下
图片描述

执行命令

npm run dev

一个简单的路由切换页面就完成了,界面大概以下
图片描述
图片描述

图片压缩

上面咱们只是将小于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

图片描述

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
        }
      }
    }
  }
});
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程