Webpack 简书入门教程（汇总）

最新推荐文章于 2023-02-16 23:44:55 发布

ChrisP3616

最新推荐文章于 2023-02-16 23:44:55 发布

阅读量190

点赞数 2

分类专栏：前端工程师1——汇总前端工程师5——webpack、node.js 文章标签： javascript webpack

本文链接：https://blog.csdn.net/qq_43456781/article/details/120061956

版权

前端工程师1——汇总同时被 2 个专栏收录

149 篇文章 40 订阅

订阅专栏

前端工程师5——webpack、node.js

21 篇文章 0 订阅

订阅专栏

Webpack 简书入门教程（汇总）

总结：
简介+五大核心
在 webpack 中，一切皆module，任何一个文件都可以看成是module。js、css、图片等都是module。
loader
webpack默认只能处理js、json格式的文件，而loader的作用则是将其他格式的文件，转换成webpack能够处理的文件。
正则表达式
JavaScript（二）（语法专题+标准库（Object Array console JSON））、错误处理机制、编程风格、控制台指令、RegExp（正则）对象、修饰符_ChrisP3616的博客-CSDN博客
/\.xxx$/
上式表示匹配后缀名为xxx的文件；
正则匹配规则：

^ 表示字符串的开始位置
$ 表示字符串的结束位置

/.xxx$/中的/ /就表示正则表达式自带的。
一般流程

使用 npm init 初始化一个项目，并安装webpack
将之前新建的三个文件拷贝到项目中
在命令行中输入webpack index.js
将index.html中引入的index.js文件改为./dist/main.js文件，在浏览器中运行
如果不希望代码被压缩，可以在命令后面加上 --mode development，表示以开发模式进行打包（开发模式不会压缩代码

webpack 打包时会默认将项目根目录下的 webpack.config.js 文件当做配置文件，因此可以通过新建 webpack.config.js 文件来更改webpack的默认配置
npm安装时-S -D作用及区别
-S
即--save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-D
即--dev（生产）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器
它们不同于 dependencies，因为它们只需安装在开发机器上，而无需在生产环境中运行代码
插件Plugin

CleanWebpackPlugin：每次打包时自动清除旧的文件，默认清除output.path目录
HtmlWebpackPlugin：生成一个html文件，自动引入打包后的js文件
MiniCssExtractPlugin ：将 css 抽离成一个单独的文件，然后通过 link 的方式引入
OptimizeCssAssetsWebpackPlugin：为了减少文件体积，一般我们会对 css 文件进行压缩

loader处理项目中的样式文件css

webpack 默认是无法处理 css 文件的，因此需要使用 css-loader 来处理项目中的 css 文件新建 css 文件，在 js 中引入，一定要在 js 中引入（无需在 html 中引入）
使用loader需要在webpack配置文件的module.rules中配置
步骤
安装 css-loader，并在配置文件中添加配置
安装 style-loader，继续修改配置
style-loader 的作用是将 css 插入到 head 里的 style 标签中

执行打包命令，在浏览器中打开 index.html 文件

loader处理项目中的照片

file-loader
只有 css 引入的 bg.jpeg 被打包输出，并且引入的图片路径也被替换成了打包后的路径，js 及 html 直接引入的图片皆存在问题
对于通过 js 动态添加的图片，我们可以使用 require() 方法来引入
修改 file-loader 参数（解决js引入图片）

html-loader
对于 html 中的图片,我们可以使用 html-loader 或 html-withimg-loader 来处理.
所以当 html 中存在 ejs 语法时，我们不能使用 html-loader 来处理图片，而是直接使用 ejs 语法来引入

部署
目前为止，我们所有的文件都是输出到 dist 目录下的，不便于之后的发布上线
例如 css 文件输出到 style 目录，图片输出到 images 目录，js 输出到 js 目录…
修改 webpack 配置重新打包

url-loader
使用 url-loader 代替 file-loader，url-loader 会将体积较小的图片进行 base64 编码打包进文件中，减少网络请求次数

image-webpack-loader
对图片进行压缩

术语介绍

chunk name
多入口 chunkname 为其key值，单入口不指定key则默认为main

chunkhash
根据 chunk 的内容生成的 hash
同一个 chunk中，只要其中一个文件内容改变，其 chunkhash 就会改变

contenthash
单个输出文件内容的 hash，或者说 bundle 的 hash
webpack-dev-server（localhost）
可以在每次修改后，自动打包并刷新页面

webpack-dev-server 是 webpack 官方提供的一个小型 Express 服务器。使用它可以为 webpack 打包生成的资源文件提供web服务。

步骤

首先需要安装 webpack-dev-server，接着在 package.json 中添加一个脚本
在命令行执行 npm start 即可（start 是一个特殊的命令，不同于其他命令，直接 npm start 就行，中间不需要 run）
devServer 是可以自动打开浏览器的
简单配置
// webpack.config.js
module.exports = {
  // ...
  devServer: {
    open: true, // 自动打开浏览器，下面三项不是必须的
    host: "0.0.0.0", // 如果希望被局域网访问，设为 0.0.0.0，默认 localhost
    port: "8888",  // 端口，默认 8080
    useLocalIp: true // 使用本地ip，如果 host 设置 0.0.0.0，请将此参数设为 true，否则结果就会像下面这样
  }
}
HMR （Hot Module Replacement，热模块替换）技术
每次修改完内容保存自动刷新页面，看起来没有什么问题，但是当我们的项目很庞大的时候，就会显得特别的慢

因此我们需要使用 devServer 提供的 HMR （Hot Module Replacement，热模块替换）技术
在 devServer 中添加一个参数即可开启热更新
hot: true // webpack 会自动引入 HotModuleReplacementPlugin 插件
修改完配置需要重新启动

js文件会自动更新，css不会自动更新， MiniCssExtractPlugin.loader 默认是不支持热更新的，修改为之前的 style-loader（默认支持热更新）
devServer的其他常用配置
devServer: {
  contentBase: path.resolve(__dirname, "public"), // 告诉服务器从哪里提供内容，默认为当前工作目录
  wacthContentBase: true, // 监视 contentBase 里面的内容，一旦变化就 reload，
  watchOptions: {
    ignore: "", // 忽略哪些文件的变化
  },
  historyApiFallback: true, // 请求的资源不存在时返回 index.html，比如 vue-router 的 history 模式
  clientLogLevel: "none", // 不要显示启动日志信息
  overlay: false, // 如果出错了，不要全屏提示 
  progress: true, // 控制台输出运行进度
  compress: true, // 启用 gzip 压缩
  proxy: { // 设置代理
    "/api": { // 当 url 中含有 /api 时就会使用这里设置的代理
      target: "http://xxxx.com", // 目标服务器地址
      changeOrigin: true, // 跨域
      ws: true, // 代理websocket
      pathRewrite: {
        "^/api": "" // url 重写，将 url 里面的 /api 去掉
      }
    }
  }
}
IE浏览器兼容

babel
需要安装
babel-loader
@babel/core（babel核心库，核心 api 都在这里）
@babel/preset-env（babel 预设，babel 是插件化的，转换不同的语法，需要不同的插件，预设的作用就是按需引入插件）只能转换高阶的语法，并不能转换高阶的 API
@babel/polyfill 来处理这些高阶的 API

thread-loader
当项目里的 js 文件越来越多时，babel 转换耗时会越来越长，可以使用 babel 缓存及多进程打包来提高速度

tree shaking

移除文件中未被引用使用的代码，它依赖于 ES6 模块语法的静态结构特性，例如 import 和 export
两个条件
使用 es6 模块化语法（使用 babel 时记得设置参数 modules 为 false）
生产模式打包（默认开启 tree shaking）

resolve

设置模块如何被解析
alias：为路径设置别名，让引入变得更简单
extensions：引入哪些类型的文件时可以省略后缀名
modules：解析模块时应该搜索的目录

externals

设置某些库不被打包，而是运行时去外部获取

watch

初始构建之后，继续监听任何已解析文件的更改

devtool

控制如何生成 source map
source map 是一个信息文件，保存源代码与打包后代码的映射关系，帮助我们快速定位报错的代码

一. 基本概念

1. 什么是webpack

Webpack是一个模块化的打包工具，它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

2. 理解module、chunk、bundle

在 webpack 中，一切皆module，任何一个文件都可以看成是module。js、css、图片等都是module。
webpack 会将入口文件以及它的依赖引入到一个 chunk （大块）中，然后进过一系列处理打包成bundle（捆绑）。

3. webpack的五大核心

(1) entry
webpack打包的入口，其取值可以是字符串，数组或者一个对象

// 单入口单文件
entry: "./src/index.js"

// 单入口多文件
entry: ["./ src/index.js", "./src/common.js"] // 若index.js与common.js没有依赖关系，可以通过此方式将它们打包在一起

// 多入口
entry: {
  page1: "./src/page1.js",  //page1和page2即为key值
  page2: "./src/page2.js"
}

(2) output
webpack打包的输出，常用配置如下

output: {
  path: path.resolve(__dirname, "./dist"),
  // 单入口时（默认）
  // filename: "main.js",
  // filename: "js/main.js", // filename也可以写路径，表示输出到 dist/js 目录下
  // 多入口时，由于会有多个输出，因此文件名不能写死
  filename: "[name].js", // name表示chunk的名称，此处为entry中的key值
  chunkFilename: "[name].js", // 按需加载的模块打包后的名称
  publicPath: "/" // 项目部署在服务器上的路径，如果在根路径则为 /
}

(3) mode
webpack打包分为两种模式，开发模式（development）与生产模式（production），默认为生产模式

选项	描述
development	会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production	会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

(4) loader
webpack默认只能处理js、json格式的文件，而loader的作用则是将其他格式的文件，转换成webpack能够处理的文件

使用loader需要在webpack配置文件的module.rules中配置

module.exports = {
 entry: ...,
 output: ...,
 module: {
   noParse:  /node_modules/, //忽略解析 node_modules 中的文件
   rules: [
     {
       test: /\.xxx$/, // 匹配后缀名为xxx的文件；正则匹配规则：^ 表示字符串的开始位置
//$ 表示字符串的结束位置,/\.xxx$/中的/ /就表示正则表达式自带的
       // 单个loader
       // loader: "xxx-loader",
       // options: {},
       // 多个loader，loader的处理顺序为从后往前，因此需要优先处理的loader放在数组最后面
       // use: ["xxxx-loader", "xxx-loader"],
       //  如果某个loader需要配置，写成下面的格式
       use: [
         {
           loader: "xxxx-loader",
           options: {}
         },
         "xxx-loader"
       ],
       include: [path.resolve(__dirname, "./src")], // 只解析src中的文件，可以是正则
       exclude: [path.resolve(__dirname, "./library")], // 忽略library中的文件，可以是正则
       // 当多个规则同时匹配某类文件时，可以使用enforce参数指定优先级
       enforce: "pre" // 优先执行该规则里的loader，post 最后执行该规则里的loader
     },
     {
       // 当规则匹配时，不再匹配后面的规则。例如某个文件匹配到了第一个规则，不再匹配后面规则
       oneOf: [
         {
           test: /\.xxx$/,
           use: "xxx-loader"
         }, 
         {
           test: /\.xxx$/,
           use: "xxx-loader"
         }
       ] 
     }
   ]
 }
}

(5) plugin
webpack插件，每一个插件都有一个特定的功能，它能处理loader无法处理的事情
插件的使用非常简单，在plugins数组中添加插件的实例化对象即可

const xxxWebpackPlugin = require("xxx-webpack-plugin");
module.exports = {
  entry: ...,
  output: ...,
  plugins: [
    new xxxWebpackPlugin(),
    new xxxxWebpackPlugin({
      // 插件的配置项
    })
  ]
}

二. webpack的简单使用

新建util.js，index.js，index.html，写入如下内容

// util.js
export const print = (str) => {
  console.log(str);
};

// index.js
import {print} from "./util";
print("hello webpack");

// index.html
...
<!-- 在body中引入index.js -->
<body>
<script src="./index.js"></script>
</body>
...

浏览器中打开index.html，发现控制台报错

因为浏览器是不支持es6的模块化语法的，这个时候webpack就可以发挥作用了

使用 npm init 初始化一个项目，并安装webpack

npm i webpack webpack-cli -g // 全局安装
npm i webpack webpack-cli -D // 项目中安装

4.将之前新建的三个文件拷贝到项目中，结构如下

在命令行中输入webpack index.js

index.js表示入口文件，由于webpack的默认输出为dist/main.js，所以不用指定出口，也可以使用 webpack entry -o output 来指定出口

执行命令后会发现左侧生成了一个dist文件夹以及main.js文件

将index.html中引入的index.js文件改为./dist/main.js文件，在浏览器中运行

成功运行，没有报错

打开main.js会发现，里面的代码是被压缩过的，如果不希望代码被压缩，可以在命令后面加上 --mode development，表示以开发模式进行打包（开发模式不会压缩代码）

使用配置文件

每次打包时都输入一长串命令非常繁琐，可以在package.json中添加脚本，如下图

然后通过npm run build:dev 或 npm run build:pro 打包（build:dev 与 build:pro 为自定义名称）

webpack 打包时会默认将项目根目录下的 webpack.config.js 文件当做配置文件，因此可以通过新建 webpack.config.js 文件来更改webpack的默认配置

// webpack.config.js
module.exports = {
  //mode: "development", // 因为在package.json脚本指定了打包模式，所以无需设置
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "main.js",
  }
}

三. HtmlWebpackPlugin 与 CleanWebpackPlugin

将 index.html 复制一份到 dist 目录中去，并修改其引入的 main.js 路径为正确的相对路径
新建 server.js 文件，添加以下代码（使用的是NodeJS中的express框架）

const express = require("express"); // 先安装 npm i express -D
const path = require("path");
const app = express();
app.use(express.static(path.resolve(__dirname, "dist"), {maxAge: 3600000}))
app.listen(3000);

命令行输入 node server.js，然后在浏览器打开 127.0.0.1:3000，结果如下

修改 index.js 中 print 函数的参数为 “hello node”，重新打包刷新页面

打印结果并没有更新，因为浏览器强缓存生效，没有去请求新的文件。而缓存是基于 url 的，只要 url 变了，缓存就会失效，我们只需要修改 js 的文件名便可以修改对应的 url，因此我们希望打包后的文件名根据文件内容动态生成，此时我们可以修改配置为

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[chunkhash:10].js", // chunk内容的hash值，后面会详细介绍
  }
}

打包刷新页面（记得修改 ./dist/index.html 中引入的 js 文件名）

可以发现，文件名发生了变化，缓存的问题也顺利解决了。但是文件名的变化却引发了两个新的问题

每次打包都要手动修改 html 中引入的 js 文件名
新的文件不会覆盖旧的文件，输出目录中的文件越来越多

HtmlWebpackPlugin 与 CleanWebpackPlugin 便可以为我们解决这两个问题

npm i html-webpack-plugin clean-webpack-plugin -D

CleanWebpackPlugin：每次打包时自动清除旧的文件，默认清除output.path目录
HtmlWebpackPlugin：生成一个html文件，自动引入打包后的js文件

在config中添加plugins配置

const  HtmlWebpackPlugin  = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.export = {
  ...
  plugins: [
    new HtmlWebpackPlugin(),
    new CleanWebpackPlugin()
  ]
}

最终打包生成的html如下图，自动帮我们引入了js文件

HtmlWebpackPlugin 自动生成的html没有任何内容，如果需要按照已有的 html 来生成，可以给该插件指定模板，常用参数如下

module.exports = {
  // 这里三个入口是为了解释 HtmlWebpackPlugin 的 chunks 及 excludeChunks
  entry: {
    page1: "./src/page1.js",
    page2: "./src/page2.js",
    common: "./src/common.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html", // 生成的 html 的文件名
      template: "index.template.html", // 指定模板
      title: "hello webpack", // 设置 html 的 title，可以在 html 中通过 ejs 语法引入
      inject: true, // 默认值，script标签位于 body 底部，可选值 body、header、false(表示不自动引入js) 
      hash: false, // true 表示引入的js文件后面添加 hash 值作为参数，src="main.js?78ccc964740f25e35fca"
      chunks: [page1, common], // 多入口打包会有多个文件，默认引入全部，此配置表示只引入 page1, common
      minify: {
        collapseWhitespace: true,   // 去除空格
        minifyCSS: true, // 压缩 html 内联的css
        minifyJS: true,  // 压缩 html 内联的js
        removeComments: true,  // 移除注释
      }
    }),
    // 多页面需要 new 多个对象
    new HtmlWebpackPlugin({
      ...
      excludeChunk: [page1], // 不需要引入page1，即只引入 page2 与
    }) 
  ]
}

// index.html
...
<head>
  <!-- 打包后会被替换成插件参数中的title — hello webpack -->
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
...

四.处理项目中的样式文件

webpack 默认是无法处理 css 文件的，因此需要使用 css-loader 来处理项目中的 css 文件
新建 css 文件，在 js 中引入，一定要在 js 中引入（无需在 html 中引入）

// index.css
body {
  background-color: plum;
}

// index.js
...
import "./index.css"

安装 css-loader，并在配置文件中添加配置

npm i css-loader -D

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: "css-loader"
      }
    ]
  }
}

执行打包命令，在浏览器中打开 index.html 文件

如上图所示，页面背景色没有改变，html 中也没有任何样式

css 虽然被打包到了 js 文件中，但并没有作用到对应的元素上，此时，就需要 style-loader 来处理了
安装 style-loader，继续修改配置为

npm i style-loader -D

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"] // 从后往前，先执行css-loader，后执行style-loader
    }
  ]
}

重新打包，刷新页面，最终效果如下图

由此可知，style-loader 的作用是将 css 插入到 head 里的 style 标签中

在实际的项目开发中，我们可能需要将 css 抽离成一个单独的文件，然后通过 link 的方式引入，因此我们可以使用 MiniCssExtractPlugin 插件来完成此事

安装 MiniCssExtractPlugin，并使用 MiniCssExtractPlugin.loader 替换 style-loader，修改配置如下

npm i mini-css-extract-plugin -D

output: {
  path: path.resolve(__dirname, "./dist"),
  filename: "[name].js" // 为了方便理解，我们把 [chunkhash:10].js 改为 [name].js，表示chunk 的名称
},
module: {
  rules: [
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, "css-loader"]
    }
  ]
}，
plugins: [
  new MiniCssExtractPlugin(),
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    template: "index.html",
    title: "hello webpack"
  })
]

打包后生成的文件及页面效果如下图

css 被单独打包到了 main.css（因为 index.css 与 index.js 属于同一个 chunk ，因此它们的chunkname 都是 main）中，并且被生成的 html 文件使用 link 引入（HtmlWebpackPlugin 插件帮我们做了此事）

为了减少文件体积，一般我们会对 css 文件进行压缩，使用 OptimizeCssAssetsWebpackPlugin 插件即可
安装 OptimizeCssAssetsWebpackPlugin ，在配置中添加

npm i optimize-css-assets-webpack-plugin -D

plugins: [
  ...
  new OptimizeCssAssetsWebpackPlugin()
]

为了演示效果，在 index.css 中随便多加点样式，然后打包，发现输出的 css 文件内容被压缩到了一行

对于 .less、.scss 等样式文件，只需要安装对应的 loader 并添加配置即可，以 less 为例

{
  test: /\.less$/,
  use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
}

五.处理项目中的图片

与样式文件一样，webpack 默认也无法处理图片，因此需要对应的 loader 来处理
安装 file-loader，添加对应配置

npm i file-loader -D

// 在module.rules中新增
{
  test: /\.(png|jpe?g|gif|svg)$/,
  use: {
    loader: "file-loader",
    options: {
      name: "[name]-[contenthash:10].[ext]" // ext表示文件的后缀名
    }
  }
}

修改 index.html、index.css、index.js 文件并打包，内容如下图

预览结果

从上面两张图可以看出，只有 css 引入的 bg.jpeg 被打包输出，并且引入的图片路径也被替换成了打包后的路径，js 及 html 直接引入的图片皆存在问题

对于通过 js 动态添加的图片，我们可以使用 require() 方法来引入

photo.src = require("./images/vue.jpeg");

打包预览，结果如下

图片被打包输出了，但是 src 的路径却不正确，变成了一个 Module 对象，那是因为 file-loader 处理后的图片默认是使用 ESModule 导出的，而我们却是使用 commonJS 来引入的。有两种方式解决这个问题
方式一： 修改 file-loader 参数（推荐，因为 html 中的处理也是使用 commonJS 引入）

方式二： 修改js中的代码如下

photo.src =  require("./images/vue.jpeg").default;
// 或者
import img from "./images/vue.jpeg"
photo.src = img;

对于 html 中的图片，我们可以使用 html-loader 或 html-withimg-loader 来处理，以 html-loader 为例
安装html-loader，并添加配置重新打包

npm i html-loader -D

{
    test: /\.html$/,
    use: "html-loader"
}

至此，css、js、html 中的图片都能被正确打包处理，但是注意看 head 中的 title，并没有被 htmlWebpackPlugin 解析

因为使用 html-loader 处理之后，htmlWebpackPlugin 无法解析 html 中的 ejs 语法，而是当做 string 来输出。所以当 html 中存在 ejs 语法时，我们不能使用 html-loader 来处理图片，而是直接使用 ejs 语法来引入

<img src="<%= require('./src/images/webpack.jpg') %>">

目前为止，我们所有的文件都是输出到 dist 目录下的，不便于之后的发布上线，因此，我们希望不同类型的文件输出到不同的目录中，例如 css 文件输出到 style 目录，图片输出到 images 目录，js 输出到 js 目录…

修改 webpack 配置重新打包

// 修改 output
filename: "js/[name].js" // 修改前为 "[name].js"
// file-loader options 添加参数
outputPath: "images" // 输出到 dist 目录下的 images 中
//  MiniCssExtractPlugin 添加参数
new MiniCssExtractPlugin({
  filename: "style/[name].css"
})

可以看到，文件确实被打包到了对应的目录中，但是 css 引入的图片却没有显示，分析一下原因

图片放在了 images 目录，css 引入的图片路径前面也自动拼上了 images/，但是由于 css 放在了 style 目录，导致 css 与图片的相对路径发生了变化，因此 css 引入的图片路径错误无法显示

给 MiniCssExtractPlugin.loader 添加一个参数便可解决此问题

{
  test: /\.css$/,
  use: [{
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: "../" // css 引入的资源路径前面拼上../这就是添加的参数
    }
  }, "css-loader"]
}

再次打包看效果

ok！图片展示的问题已经完美解决了，接下来进行些小优化

使用 url-loader 代替 file-loader，url-loader 会将体积较小的图片进行 base64 编码打包进文件中，减少网络请求次数
使用 image-webpack-loader 对图片进行压缩

npm i url-loader image-webpack-loader -D

{
  test: /\.(jpe?g|png|gif|svg)$/,
  use: [{
    loader: "url-loader",
    options: {
      name: "[name]-[contenthash:10].[ext]",
      outputPath: "images",
      limit: 10 * 1024, // 表示 小于10k 的图片会被 base64 编码
      fallback: "file-loader", // 大于 10k 的图片由 file-loader 处理，默认值，可不设置
      esModule: false
    }
  }, {
    loader: "image-webpack-loader",
    options: {
      disabled: true // 在开发或使用webpack-dev-server时，使用它可以加快初始编译速度，并在较小程度上加快后续编译速度（来自官方文档）
    }
  }]
}

可以看到，只有 bg.jpeg（21k 被压缩到了 19k）被打包输出，而 webpack.jpg（9.9k）与 vue.jpeg（7k）都被 base64 编码直接打包进了文件中，关于图片的处理就到此为止

六.理解name、hash、chunkhash、contenthash

name：chunk name，chunk的名称
多入口 chunkname 为其key值，单入口不指定key则默认为main，异步加载的模块默认为数字

hash：每次打包生成的hash，见上图
项目中任意与打包相关的文件内容改变（包括配置文件），此hash就会改变
chunkhash：根据 chunk 的内容生成的 hash

修改前面例子中的 js 及 css 输出名称为 [chunkhash:10]，然后打包

output: {
  filename: "js/[chunkhash:10].js",  // :10 表示取前面10 位
  path: path.resolve(__dirname, "./dist")
},
plugins: [
  // ...
  new MiniCssExtractPlugin({
      filename: "style/[chunkhash:10].css"
  })
]

index.js 中引入了 util.js 及 index.css，它们属于同一个 chunk，所以它们的 chunkhash 是一样的，最终打包出来的文件名称相同，只要其中一个文件内容改变，其 chunkhash 就会改变。随意修改 util.js 中的内容重新打包，css 文件内容并没有变化，其文件名依然发生了改变

// util.js
export const print = str => {
  console.log(str);
}
// 修改后
export const print = str => {
  console.log(str);
  console.log(123);
}

contenthash：单个输出文件内容的 hash

我们将 js 及 css 的文件名从 chunkhash 改为 contenthash，打包结果如下

image.png

可以发现，js 的文件名与 css 的文件名并不一致，接下来我们还原 util.js 中的内容再打包一次

最终，js 文件的名称发生了变化，而 css 文件名并没有改变，继续修改 index.css 中的内容

body {
  /* background-color: plum;  修改前 */
  background-color: peru; /* 修改后 */
}

较之上次，css 文件名发生了改变，而 js 文件名却没有变化
所以，contenthash 可以认为是单个输出文件内容的 hash，或者说 bundle 的 hash

七. devServer 的使用（localhost、HMR）

就目前来说，每次我们修改完代码，都需要重新打包，然后刷新页面才能看到最新的效果，这极大的影响了我们的开发效率。那有没有办法可以在每次修改后，自动打包并刷新页面呢？答案肯定是有的，就是接下来我们要用到的devServer

webpack-dev-server 是 webpack 官方提供的一个小型 Express 服务器。使用它可以为 webpack 打包生成的资源文件提供web服务。

首先需要安装 webpack-dev-server，接着在 package.json 中添加一个脚本

npm i webpack-dev-server -D

"scripts": {
  ...
  "start": "webpack-dev-server"
}

在命令行执行 npm start 即可（start 是一个特殊的命令，不同于其他命令，直接 npm start 就行，中间不需要 run），如下图所示，启动成功，打开 localhost:8081 便可访问

并且我们发现dist目录中没有任何文件，那是因为 webpack-dev-server 将我们的代码打包到了内存中，并没有输出到指定目录

修改项目中的 js、 css 或 html 文件然后保存，可以看到页面会自动刷新展示最新效果（无法贴图演示，可自行尝试）

每次启动项目时都需要手动打开浏览器，很不方便，其实 devServer 是可以自动打开浏览器的，只需要一个简单的配置

// webpack.config.js
module.exports = {
  // ...
  devServer: {
    open: true, // 自动打开浏览器，下面三项不是必须的
    host: "0.0.0.0", // 如果希望被局域网访问，设为 0.0.0.0，默认 localhost
    port: "8888",  // 端口，默认 8080
    useLocalIp: true // 使用本地ip，如果 host 设置 0.0.0.0，请将此参数设为 true，否则结果就会像下面这样
  }
}

每次修改完内容保存自动刷新页面，看起来没有什么问题，但是当我们的项目很庞大的时候，就会显得特别的慢，因此我们需要使用 devServer 提供的 HMR （Hot Module Replacement，热模块替换）技术，在 devServer 中添加一个参数即可开启热更新

hot: true // webpack 会自动引入 HotModuleReplacementPlugin 插件

修改完配置需要重新启动

热更新已经开启，修改 js 文件，内容会自动更新。但是修改 css，比如 body 的背景色

页面并没有热更新，因为 MiniCssExtractPlugin.loader 默认是不支持热更新的，在开发中，我们可以将其修改为之前的 style-loader（默认支持热更新），或者修改其参数

{
  loader: MiniCssExtractPlugin.loader,
  options: {
    publicPath: "../",
    hmr: true // 开启热更新
  }
}

重启并修改 css 中 body 的背景色，会发现页面自动更新了，并且只请求了与 css 相关的文件

html 一般不做热更新，因为 html 变了，肯定整个页面都需要刷新

devServer的其他常用配置

devServer: {
  contentBase: path.resolve(__dirname, "public"), // 告诉服务器从哪里提供内容，默认为当前工作目录
  wacthContentBase: true, // 监视 contentBase 里面的内容，一旦变化就 reload，
  watchOptions: {
    ignore: "", // 忽略哪些文件的变化
  },
  historyApiFallback: true, // 请求的资源不存在时返回 index.html，比如 vue-router 的 history 模式
  clientLogLevel: "none", // 不要显示启动日志信息
  overlay: false, // 如果出错了，不要全屏提示 
  progress: true, // 控制台输出运行进度
  compress: true, // 启用 gzip 压缩
  proxy: { // 设置代理
    "/api": { // 当 url 中含有 /api 时就会使用这里设置的代理
      target: "http://xxxx.com", // 目标服务器地址
      changeOrigin: true, // 跨域
      ws: true, // 代理websocket
      pathRewrite: {
        "^/api": "" // url 重写，将 url 里面的 /api 去掉
      }
    }
  }
}

为了更好的演示，后面的例子都不使用 devServer，继续使用 webpack 手动打包

八. js兼容性处理

之前的案例都是在 chrome 浏览器上运行的，接下来我们在某浏览器上试试

意料之中的报错，根据错误信息，知道是 util.js 文件中报的错，因为我们在 util.js 中使用了 es6 的 const 及箭头函数，而某浏览器（IE：看我作甚？）并不认识这些高阶语法

所以呢，我们就需要将这些高阶语法，转换成某浏览器能够识别的语法，也就是大名鼎鼎的 babel
需要安装 babel-loader、
@babel/core（babel核心库，核心 api 都在这里）、
@babel/preset-env（babel 预设，babel 是插件化的，转换不同的语法，需要不同的插件，预设的作用就是按需引入插件）

npm i babel-loader @babel/core @babel/preset-env -D

在配置文件中添加loader，重新打包

{
  test: /\.js$/,
  exclude: /node_modules/, // 不处理 node_modules 中的文件
  use: {
    loader: "babel-loader",
    // 也可以在项目根目录新建 .babelrc 文件，将配置写入文件中
    options: {
      presets: ["@babel/preset-env"]
    }
  }
}

成功运行，并且 const 转化成了 var，箭头函数也被转成了普通函数
接下来我们在 index.js 中添加一段代码，打包后再次在ie中预览

new Promise(resolve => {
  setTimeout(() => {
    resolve("promise resolve")
  }, 1000);
}).then(res => {
  console.log(res);
});

Promise未定义，promise 是 ES6 中新出的 API ，@babel/preset-env 只能转换高阶的语法，并不能转换高阶的 API ，因此我们就需要使用 @babel/polyfill 来处理这些高阶的 API

@babel/polyfill 其实是 core-js2 与 regenerator-runtime 组成的一个集成包，使用 core-js2，则安装 @babel/polyfill，使用 core-js3 则安装 core-js 与 regenerator-runtime ，以 core-js3 为例

npm i core-js regenerator-runtime -S

修改 babel-loader 配置

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: [
        ["@babel/preset-env", {
          modules: false, // 对ES6的模块文件不做转化，以便使用 tree shaking
          useBuiltIns: "usage", // 取值可以是 false，"entry"，"usage"
          corejs: 3, // corejs 版本号
          targets: {} // 需要兼容的浏览器，若未配置，取 browserslist 中的值
        }]
      ]
    }
  }
}

关于useBuiltIns取值的说明

**false：**需要在 js 文件顶部引入，不需要指定 corejs 版本号，会将整个内容全部打包

// <--- core-js2 --->
// import "@babel/polyfill";

// <--- core-js3 --->
import "core-js/stable";
import "regenerator-runtime/runtime";

**entry：**需要在 js 文件顶部引入，需要指定 corejs 版本号，根据配置的浏览器，打包浏览器不兼容的内容
**usage：**不需要在 js 文件顶部引入，需要指定corejs 版本号，根据配置的浏览器兼容性，以及代码中用到的 API 来按需打包

本案例使用 usage，因此不需要在 js 文件顶部引入包，配置完成后直接打包刷新页面，结果如下，没有报错，成功打印

当项目里的 js 文件越来越多时，babel 转换耗时会越来越长，可以使用 babel 缓存及多进程打包来提高速度，安装 thread-loader，修改 babel 配置

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: [
    {
      loader: "thread-loader", // 耗时比较长的 loader 才需要多进程，否则只会更慢
      options: {
        workers: 2 // 进程数 2
      }
    },
    {
      loader: "babel-loader",
      options: {
        cacheDirectory: true, // 开启babel 缓存，未修改的 js 文件直接取缓存
        presets: [...]
      }
    }
  ]
}

九. tree shaking

移除文件中未被引用使用的代码，它依赖于 ES6 模块语法的静态结构特性，例如 import 和 export
满足以下两个条件即可 tree shaking

使用 es6 模块化语法（使用 babel 时记得设置参数 modules 为 false）
生产模式打包（默认开启 tree shaking）

为了演示效果，我们对代码做如下修改

// util.js 由原本的 ESModule 导出改为 commonJS 导出，并随便添加一个函数
exports.print = str => {
  console.log(str);
}
exports.test = () => {
  console.log("tree shaking");
}

// index.js 修改 print 函数的引入方式
const print = require("./util").print;
print("hello webpack")

util.js 中新增的 test 函数并未引入使用，然后使用生产模式打包，在打包生成的 main.js 中搜索 “tree shaking”

可以看到，虽然 test 函数并未引入使用，但是依然被打包进来了。将模块化语法改为 ESModule，重新打包并搜索 “tree shaking”

// util.js
export const print = str => {...}
export const test = () => {...}

// index.js
import  {print} from "./util";  // 只引入 print
print("hello webpack")

结果如下图，main.js 中搜索不到 “tree shaking”，说明 test 函数并未被打包进来

如果只是引入，并未使用，依然会被移除，例如下面的代码，test 未被打包进文件

import {print, test} from "./util"; // 两个都引入，但是不使用 test

**sideEffects：**哪些文件具有副作用，配合 tree shaking 使用
所谓副作用是指在导入时会执行特殊行为的代码，就比如 css 文件，只要导入，势必影响样式
tree shaking 只会对没有副作用的文件生效，例如我们将所有文件都设置为无副作用

// package.json
{
  "sideEffects": false // 表示所有文件都没有副作用
}

生产模式打包然后刷新页面，会发现所有的样式都没有了，即 css 被 tree shaking 了

项目开发时，如果代码确实有一些副作用，将其文件路径放入 sideEffects 数组中，以防被 tree shaking，可以是绝对路径、相对路径或通配符，例如：

"sideEffects": [
  "*.css",
  "./src/someSideEffectfulFile.js"
]

网络资料显示 sideEffects 默认值为 true，即所有文件都有副作用，但是上面的例子中，明显 util.js 被认为没有副作用，所以默认值是啥暂不清楚，而且就算手动设置为 true，util.js 还是会被 tree shaking（不知道是否与 webpack 版本有关）

十. 其他配置

1.resolve：设置模块如何被解析

**alias：**为路径设置别名，让引入变得更简单

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      // $ 匹配结尾，不会影响 vue/xxx 的路径，表示项目中引入的 vue 为运行时版本
      "vue$": "vue/dist/vue.runtime.js" 
    }
  }
}
// 例如某 .vue 文件中引入的一个组件为
import xxx from "../../components/xxx";
// 则可写为
import xxx from "@/components/xxx";

**extensions：**引入哪些类型的文件时可以省略后缀名

resolve: {
  // 默认值为 [".js", ".json"]
  extensions: [".js", ".json", ".vue"] // 引入 js、json、vue 文件时不需要写后缀名
}

**modules：**解析模块时应该搜索的目录

resolve: {
  // 默认值：["node_modules"]，表示从当前目录的 node_modules 中查找，不存在时则去上级目录的 node_modules 中查找，一直到根目录为止。
  // 若设置为绝对路径，则只在指定的目录中查找
  modules: [path.resolve(__dirname, "src"), "node_modules"]
}

2. externals：设置某些库不被打包，而是运行时去外部获取

// index.js 添加代码
import $ from "jquery";
$("p").css("color", "red");

在 index.js 中引入 jquery，最终会被打包进 main.js 中，导致整个项目体积过大，使用 externals 排除 jquery 打包，并通过 cdn 引入（index.js 中的引入要保留，不能删除）

// index.html 中 body 底部添加
<body>
  <% for (let src of htmlWebpackPlugin.options.cdnList) { %>
    <script src="<%= src %>"></script>
  <% } %>
  <!-- 直接写死，与上面二选一，推荐上面的方式 -->
  <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</body>

// webpack.config.js 添加下面内容
module.exports = {
  externals: {
    jquery: "jQuery" // key 为引入的包名，value 为全局变量名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 用来在 html 中通过 script 引入，cdnList 为自定义变量。若直接写死则不需要此配置
      cdnList: ["https://libs.baidu.com/jquery/2.0.0/jquery.min.js"]
    })
  ]
}

3. watch：初始构建之后，继续监听任何已解析文件的更改

将此参数设置为 true，使用 webpack 打包之后，每当有文件内容发生变化，就会自动重新打包（devServer默认开启）

module.exports = {
  watch: true,
  watchOptions: {
    aggregateTimeout: 300, // 延时 300ms 打包，防抖
    ignored: /node_modules/, // 忽略监听，也可以是 anymatch 模式，例： "files/**/*.js"
    poll: true // 开启轮询模式，如果值为数字，表示轮询的间隔，单位毫秒
  }
}

4. devtool：控制如何生成 source map

source map 是一个信息文件，保存源代码与打包后代码的映射关系，帮助我们快速定位报错的代码
在 index.js 中添加一行报错的代码，比如打印一个未声明的变量 a，生产模式打包，报错信息如下图，左边未使用 source map，很明显，无法准确定位到报错的代码，而右边直接映射到了打包前的代码

关于不同 source map 之间的区别，请自行百度，不做阐述

ChrisP3616

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Webpack 简书入门教程（汇总）

Webpack 简书入门教程（汇总）文章目录Webpack 简书入门教程（汇总）一. 基本概念1. 什么是webpack2. 理解module、chunk、bundle3. webpack的五大核心二. webpack的简单使用使用配置文件三. HtmlWebpackPlugin 与 CleanWebpackPlugin四.处理项目中的样式文件五.处理项目中的图片六.理解name、hash、chunkhash、contenthash七. devServer 的使用（localhost、HMR）八. j
复制链接

扫一扫