从零配置webpack 5 + React脚手架（一）

站长

2023年09月26日 18:28 · 阅读数 14

前提条件

在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

建一个空文件夹

让我们在桌面建一个项目文件夹，名为 my-project ，并使用你的编辑器打开它。打开终端，快捷键（Ctrl + ~）。

执行以下命令：

npm init -y

上面命令会在 my-project 的根目录生成 package.json 文件，该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、描述信息等数据）。npm install 命令也是根据这个配置文件，自动下载所需的模块。

安装 webpack

安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli

安装完成后，package.josn 中多了一个 devDependencies 的属性，这是因为我们安装依赖包时 --save-dev || -D 的结果，这代表了开发时的依赖。 --save || -S 安装依赖包，这代表了运行时依赖。

至于为什么用 npm 安装依赖有 package-lock.json 这个文件，而 yarn 安装依赖为 yarn.lock 在这里不过多赘述下次再聊。

此时我们项目的文件结构如下： project

 my-project
  |- node_modules
  |- package-lock.json
  |- package.json

新建 config 配置文件夹

在根目录下新建一个文件夹名为 config 用于存放配置文件，在此文件夹下创建三个 .js 文件。

webpack.common.config.js -- 公共配置文件
webpack.prod.config.js -- 生产环境配置文件
webpack.dev.config.js -- 开发环境配置文件

在根目录下再新建一个文件夹名为 src ，在其中新建一个.js 文件，名为 app.js 。

project

  my-project
+ |- config
+   |- webpack.common.config.js
+   |- webpack.dev.config.js
+   |- webpack.prod.config.js
  |- node_modules
+ |- src
+   |- app.js
  |- package.json

在 webpack.common.config.js 文件中输入以下代码：

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
  },
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, '../dist'),
  },
};

entry 属性定义了入口文件路径， output 定义了编译打包之后的文件名以及所在路径。这段代码的意思是告诉 webpack，入口文件是 src 目录下的 app.js 文件。打包输出的文件名字为 bundle.js ，bundle.js 文件存放的路径为 dist/js/bundle.js。

那该如何打包呢？在 package.json 中配置如下属性：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "start": "webpack --config ./config/webpack.common.config.js"
  },

运用 --config 修改指定的配置文件，指向./config/webpack.common.config.js

如果我们的文件结构为：

  my-project
  |- node_modules
  |- package.json
  |- webpack.config.js

那么 start 需要修改为：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "start": "webpack"
    或者
+   "start": "webpack --config webpack.config.js"
  },

虽然此时 app.js 中什么代码都没有，但仍然能打包。

现在可以在终端控制台执行以下命令试试：

npm run start

project

  my-project
  |- config
    |- webpack.common.config.js
    |- webpack.dev.config.js
    |- webpack.prod.config.js
+ |- dist
+   |- js
+     |- bundle.js
  |- node_modules
  |- src
    |- app.js
  |- package.json

那么至此，我们已经成功编译打包了一个 js 文件，即入口文件： app.js 。

安装使用 webpack-merge

npm install --save-dev webpack-merge

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

虽然，以上我们将生产环境和开发环境做了略微区分，但是，请注意，我们还是会遵循不重复原则(Don't repeat yourself - DRY)，保留一个“通用”配置。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。通过“通用”配置，我们不必在环境特定(environment-specific)的配置中重复代码。

这就是为什么我一开始在 config 文件夹下创建三个 .js 文件的原因

webpack.prod.config.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.config.js');

module.exports = merge(common, {
  mode: 'production',
});

在根目录下新建一个文件夹名为： public ，再新建一个 index.html 文件 project

  my-project
  |- config
    |- webpack.common.config.js
    |- webpack.dev.config.js
    |- webpack.prod.config.js
  |- node_modules
+ |- public
+   |- index.html
  |- src
    |- app.js
  |- package.json

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-project(webpack + react)</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="../dist/js/bundle.js"></script>
</html>

回到起初创建的 src/app.js 文件：

let root =document.getElementById('root');
root.innerHTML = 'my-project!!!!!';

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config ./config/webpack.common.config.js",
+   "build": "webpack --config ./config/webpack.prod.config.js"
  },

执行以下代码试试：

npm run build

执行后用浏览器打开 public/index.html 文件看看是不是有“my-project!!!!!”。

安装 React

执行以下命令：

npm install --save react react-dom

安装完成之后，我们就可以写 react 的 JSX 语法了。

src/app.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>my-project!!!!!</div>
    );
  }
}

export default App;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(<App />, document.getElementById('root'));

webpack.common.config.js

const path = require('path');

module.exports = {
  entry: {
-   app: './src/app.js',
+   index: './src/index.js',
  },
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, '../dist')
  }
}

ok，现在再执行 npm run bulid 试试。我们会发现 build 打包失败。接着往下解决失败。

安装Babel

因为 webpack 根本识别不了 jsx 语法，所以需要使用 loader 对文件进行预处理。其中，babel-loader，就是这样一个预处理插件，它加载 ES2015+ 代码，然后使用 Babel 转译为 ES5。那我们开始配置它吧！

首先安装依赖：

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime

babel-loader：使用 Babel 和 webpack 来转译 JavaScript 文件。
@babel/core：babel 的核心模块
@babel/preset-env：转译 ES2015+的语法
@babel/preset-react：转译 react 的 JSX
@babel/plugin-proposal-class-properties：用来编译类(class)
@babel/plugin-transform-runtime：防止污染全局，代码复用和减少打包体积

webpack.common.config.js

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
  },
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, '../dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: [
              '@babel/plugin-transform-runtime',
              '@babel/plugin-proposal-class-properties',
            ],
          },
        },
      },
    ],
  },
};

好的，至此我们就能用 jsx 语法编写代码了。打包看看，是不是成功了。

安装HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

webpack.prod.config.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      inject: 'body',
      minify: {
        removeComments: true,
      },
    }),
  ],
});

template：基于我们自己定义的 html 文件为模板生成 html 文件
filename：打包之后的 html 文件名字
inject：将 js 文件注入到 body 最底部
minify：压缩 html 文件时的配置
- removeComments：去除注释

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-project(webpack + react)</title>
  </head>
  <body>
    <!-- 跟标签 -->
    <div id="root"></div>
  </body>
</html>

现在执行 npm run build 打包时，dist 文件夹中就多出来 index.html 文件，因此自动编译 html 完成，打开看看效果。

解决浏览器缓存，给打包出的 js 文件换个不确定名字

为什么需要换 js 文件名字呐？？？防止浏览器缓存机制带来的业务代码不更新问题。浏览器打开 html 页面后，会去请求对应的 js 文件。当客户端请求 js 文件的时候发现名字是一样的，那么它很有可能不发新的 js 包，直接读取了缓存包；如果更换名字后在缓存区中寻找不到，就会去远端服务器中拉取新的 js 资源从而读取到最新的代码。

怎么换不确定名字呐。安排！！！ webpack.prod.config.js

module.exports = merge(common, {
  output: {
    filename: 'js/[name]-bundle-[hash:6].js',
  },
});

[name] 打包入口名称
[hash] 哈希串默认长度为 20，:6 为取前六位

执行 npm run build 打包看看 js 文件是不是不一样了。

现在让我们在 src/app.js 文件中随便在写点东西后再次打包，你会发现 dist/js 的文件夹中又多了个.js，之前的 js 文件并没有清理掉。

打包编译前清理 dist 目录

安装 clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

webpack.prod.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
  plugins: [
    new CleanWebpackPlugin(),
  ],
 });

现在执行 npm run build ，再检查 dist/js 文件夹。你现在应该不会再看到旧的文件，只有构建后生成的文件！

相信在这肯定有人发现了，每次看效果都非常麻烦。ok 接下来就配置一下webpack-dev-server自动编译打包

安装 webpack-dev-server

npm install --save-dev webpack-dev-server

webpack.dev.config.js

const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9000,
    compress: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: 'body',
      hash: false,
    }),
  ],
});

contentBase: 启服务的文件
port: 端口号
compress: 为每个静态文件开启gzip压缩：

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-   "start": "webpack --config ./config/webpack.common.config.js",
+   "start": "webpack serve --open --config ./config/webpack.dev.config.js",
    "build": "webpack --config ./config/webpack.prod.config.js"
  },

如果不出意外的话执行npm run start就能正常启动本地端口 9000 并且自动在默认浏览器中打开页面。

当你在 app.js 中随意加点文案，回到浏览器中打开的页面都会自动更新了，至此自动编译打包完成。