Webpack配置实战

前言

本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。

一、基础配置

接下来一起配置一个基础的 Webpack。

将支持以下功能：

• 分离开发环境、生产环境配置；
• 模块化开发；
• sourceMap 定位警告和错误；
• 动态生成引入 bundle.js 的 HTML5 文件；
• 实时编译；
• 封装编译、打包命令。

1. 新建项目

新建一个空项目：

// 新建 webpack-demo 文件夹
mkdir webpack-demo

// 进入 webpack-demo 目录
cd ./webpack-demo

// 初始化项目
npm init -y

新建 2 个 js 文件，并进行模块化开发：

// 进入项目目录
cd ./webpack-demo

// 创建 src 文件夹
mkdir src

// 创建 js文件
touch index.js
touch hello.js

index.js：

// index.js

import './hello.js'

console.log('index')

hello.js：

// hello.js
console.log('hello webpack')

项目结构如下：

- src
    - index.js
    - hello.js
- package.json
- node_modules

2. 安装

1. 安装 Node

Node 需要是最新版本，推荐使用 nvm 来管理 Node 版本。

将 Node.js 更新到最新版本，也有助于提高性能。除此之外，将你的 package 管理工具（例如 npm 或者 yarn）更新到最新版本，也有助于提高性能。较新的版本能够建立更高效的模块树以及提高解析速度。

我安装的版本信息如下：

• node v14.17.3

• npm v6.14.13)

2. 安装 webpack

npm install webpack webpack-cli --save-dev

3. 新建配置文件

development(开发环境)  和 production(生产环境)  这两个环境下的构建目标存在着巨大差异。为代码清晰简明，为每个环境编写彼此独立的 webpack 配置。

// 进入项目目录
cd ./webpack-demo

// 创建 config 目录
mkdir config

// 进入 config 目录
cd ./config

// 创建通用环境配置文件
touch webpack.common.js

// 创建开发环境配置文件
touch webpack.dev.js

// 创建生产环境配置文件
touch webpack.prod.js

webpack-merge

使用 webpack-marge 合并通用配置和特定环境配置。

安装 webpack-merge：

npm i webpack-merge -D

通用环境配置：

// webpack.common.js

module.exports = {
   } // 暂不添加配置

开发环境配置：

// webpack.dev.js

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

module.exports = merge(common, {
   }) // 暂不添加配置

生产环境配置：

// webpack.prod.js

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

module.exports = merge(common, {
   }) // 暂不添加配置

项目结构如下：

- config
    - webpack.common.js
    - webpack.dev.js
    - webpack.prod.js
- src
    - index.js
    - hello.js
- package.json
- node_modules

4. 入口（entry）

入口起点(entry point)  指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

在本例中，使用 src/index.js 作为项目入口，webpack 以 src/index.js 为起点，查找所有依赖的模块。

修改 webpack.commom.js：

module.exports = merge(common, {
   
  // 入口
  entry: {
   
    index: './src/index.js',
  },
})

5. 输出（output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

生产环境的 output 需要通过 contenthash 值来区分版本和变动，可达到清缓存的效果，而本地环境为了构建效率，则不引人 contenthash。

新增 paths.js，封装路径方法：

参考webpack视频讲解：进入学习

const fs = require('fs')
const path = require('path')

const appDirectory = fs.