从零到一搭建 react 项目系列之（三）

2020-08-17 本文已影响0人越前君

接着继续介绍 webpack 配置

从 webpack 4.0 开始，webpack 可以零配置即可进行打包，门槛进一步降低。但是这种方式显然不能满足我们的需求。上面一篇文章中，如果细心的同学会发现，执行 yarn run build 命令，会有一条 WRANING 信息。

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

大概意思，mode 选项没有配置，webpack 会把 production 最为默认配置。

既然这样，我们调整一下 package.json，给它指定了 mode 选项，WARNING 就没有了。

// package.json
{
  "scripts": {
    "build": "webpack --progress --colors --mode=production"
  }
}

那么这 mode 是什么呢？除了这个，还有什么配置选项呢？

一、先了解 webpack 一些核心配置

这里我不再讲述，里面有链接，可以点击去了解。后续文章，对这些配置也会有更详细的介绍。

二、开始写页面了

最最最简单的 webpack 打包已经学会了，那么我们如何进行开发呢？

按照我们传统写前端的方式，它应该要有一个 HTML 文件，然后将 JS、CSS、图片等等引入到其中，这就构成了我们的前端页面。

但其实，webpack 只能读取 JavaScript 和 JSON 文件，这是开箱可用的自带能力。那么遇到 CSS、Image、HTML 文件 webpack 如何处理呢？那么它就需要 loader 加载器去处理它们。

这里我们借助一个 html-webpack-plugin 来生成我们的 HTML 文件。

# 安装 html-webpack-plugin
$ yarn add --dev html-webpack-plugin@3.2.0

接着我们在项目根目录添加一个 webpack.config.js 的文件。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

module.exports = config

然后我们重新打包，看下会发生什么？

$ yarn run build

它给我们生成了 index.html 文件，并将我们打包后的 main.js 引入其中了。然后我们使用浏览器打开 index.html 文件可以看到控制台打印了 Hello Webpack!。

到此为止，我们最最最简单的需求已经完成了。使用 webpack 打包了一个前端页面。

三、优化我们输出的 HTML 文件

其实啊，html-webpack-plugin 也可以根据提供的模板HTML来生成的符号我们要求的样子。

给自己提个需求，在 index.html 要有一个立即函数表达式（IIFE，Immediately Invoked Function Expression）去执行某些动作。（具体什么不重要）

再借助上述的方法显然是不合适的，那我们怎么办呢？

在 /src 下新建一个 index.html 文件

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <script>
        !(function() {
            console.log('给自己加需求，什么人啊！怕不是脑子有毛病吧')
        })()
    </script>
    <body>
        <div id="app">This is app.</div>
    </body>
</html>

修改 webpack.config.js 配置。

const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hi', // 模板要使用 <title><%= htmlWebpackPlugin.options.title %></title> 配置才生效
      template: './src/index.html', // 模板路径
      filename: 'index.html', // 输出 HTML 文件名称
      inject: 'body', // 插入的 script 标签位于 body 底部，true 同理
      hash: true, // 加上 hash 值
      favicon: './src/favicon.ico'
    })
  ]
}

module.exports = config

简单介绍一下 html-webpack-plugin 的配置：

title：生成 HTML 文件的标题，需配合 <%= htmlWebpackPlugin.options.title %> 使用。
template：模板所在的文件路径，它可以是 html、jade、ejs、hbs 等。但是需要安装对应的 loader，否则 webpack 将不能解析。
filename：输出 HTML 文件名称。
inject：注入选项，可选值：true、body、head、false。
1）true：默认值，script 标签位于 HTML 文件的 body 底部；
2）body：同 true；
3）head：script 标签位于 head 标签内；
4）false：不插入生成的 js 文件，只是单纯的生成一个 HTML 文件。
favicon：网站的 favicon 图标。
hash：默认值 false。给生成的 js 文件一个独特的 hash 值，该 hash 值是本次 webpack 编译的 hash 值（如下图）。
minify、cache、chunks...：这些选择就不介绍了，有兴趣自行搜索查找。

打包结果：

🎉

四、除此之外

利用 clean-webpack-plugin 来清除 output 输出文件。

为什么要这样做呢？

假如我们输出 HTML 的 filename 是变化的，那么每打包一次输出的 dist 目录，就会不断地积累各种旧版本的输出文件，显然这并不是我们想要的。（可自行体验一下）

配置 clean-webpack-plugin 也是很简单，如下：

$ yarn add --dev clean-webpack-plugin@3.0.0

// package.json
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const config = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hi', // 模板要使用 <title><%= htmlWebpackPlugin.options.title %></title> 配置才生效
      template: './src/index.html', // 模板路径
      filename: 'index.html', // 输出 HTML 文件名称
      inject: 'body', // 插入的 script 标签位于 body 底部，true 同理
      hash: true, // 加上 hash 值
      favicon: './src/favicon.ico'
    }),
    // 新版无需再指定删除目录，默认删除 output 目录
    new CleanWebpackPlugin()
  ]
}

module.exports = config

最后附上：

// package.json
{
    "name": "webpack4_demo",
    "version": "1.0.0",
    "description": "从零到一搭建 react 项目",
    "main": "src/index.js",
    "repository": "git@github.com:toFrankie/webpack4_demo.git",
    "author": "Frankie <1426203851@qq.com>",
    "license": "MIT",
    "private": true,
    "scripts": {
        "build": "webpack --progress --colors --mode=production"
    },
    "dependencies": {
        "webpack": "4.41.2",
        "webpack-cli": "3.3.10"
    },
    "devDependencies": {
        "clean-webpack-plugin": "3.0.0",
        "html-webpack-plugin": "3.2.0"
    }
}

未完待续，下一篇继续啊~

从零到一搭建 react 项目系列之（三）

一、先了解 webpack 一些核心配置

二、开始写页面了

三、优化我们输出的 HTML 文件

四、除此之外

猜你喜欢

热点阅读