作一个 “Webpack 配置工程师”

长文慎读

认识 Webpack

Webpack 是一个模块打包工具。

简单举个例子🌰

新建三个文件，以下：

上面的例子会报错：

由于浏览器并不支持 JS 的模块化导入。这时候 Webpack 便派上用场了。

事实上，已经有不少浏览器开始支持 JS 的模块化了，你能够在 <script> 标签中加入 type="module" 属性 ，而且将项目运行在服务器上便可。

第一次接触 Webpack

上面的例子中，咱们能够将 test.js 和 index.js 打包成一个文件 main.js ，而后在 index.html 引入 main.js。

📦 Webpack 能够帮咱们生成这个 main.js 文件。

咱们看一下怎么作。

首先使用 npm init -y 快速生成 package.json 。而后安装 webpack 和 webpack-cli 。

npm init -y
npm install webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org
复制代码

--registry=https://registry.npm.taobao.org表示使用淘宝的镜像源，能够加速安装过程。

接着，

npx webpack index.js
复制代码

便会生成 dist 目录及 main.js ：

能够在 HTML 文件中引用 ./dist/main.js 。

npx 会在项目中的 node_modules 目录中寻找 webpack。

Webpack 除了能够打包 JS 文件，还能够打包 CSS 文件 、图片等。

配置文件

事实上，咱们还能够指定打包生成的目录及文件名。这就用到 webpack 配置文件了。

咱们在项目根目录下建立 webpack.config.js：

const path = require('path')

module.exports = {
    entry: './index.js', // 入口文件
    output: {
        filename: 'bundle.js', // 生成的文件名
        path: path.resolve(__dirname, 'bundle') // 生成的目录
    }
}
复制代码

接着，

npx webpack
复制代码

webpack 会根据 webpack.config.js 中的配置来进行打包，而后生成 bundle/bundle.js。

实际项目中，咱们常常会在 package.json 中添加 scripts 脚本，如：

这样，咱们即可以直接执行：

npm run build
复制代码

效果相同。

---

一些补充

😶 第一点

上面的 webpack.config.js 中，entry 是一种简写：

...
module.exports = {
    entry: './index.js', // 入口文件 ⭐️
    ...
}
复制代码

等同于：

...
module.exports = {
    entry: {
        main: './index.js' // 入口文件 ⭐️
    },
    ...
}
复制代码

这种写法，在配置多入口文件时颇有用，咱们后面会介绍。

😯 第二点

webpack 打包有两种模式：production 和 development 。production 会对生成的代码进行压缩，development不会压缩。

默认是 production。你能够经过 mode 字段进行修改：

...
module.exports = {
    mode: 'development', // 默认是 production ⭐️
    entry: {
        main: './index.js'
    },
    ...
}
复制代码

😲 第三点

webpack 的默认配置文件是 webpack.config.js ，你也能够经过 webpack --config 指定配置文件。

Webpack 基础

webpack 默认是知道怎么打包 JS 文件的，可是其余类型的文件它就不知道了。

咱们能够在配置文件中为各类文件类型指定 loader ，告诉 webpack 怎么打包不一样的文件。

好比，使用 file-loader 来告诉 webpack 怎么打包图片：

// webpack.config.js
...
module.exports = {
    ...
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'bundle')
    },
    module: {
        rules: [
            {
                test: /\.jpeg$/, // 正则匹配文件名以 .jpeg 结尾的文件 ⭐️
                use: {
                    loader: 'file-loader' // 使用 file-loader ⭐️
                }
            }
        ]
    }
}
复制代码

file-loader 须要安装：

npm i file-loader --save-dev
复制代码

咱们 index.js 中引入图片：

import avatar from './avatar.jpeg' // avatar.jpeg 是预先放在根目录下的一张图片

console.log('avatar:', avatar)
复制代码

npm run build 以后，在 bundle 目录中，会生成一个文件名 b417eb0f1c79e606d72c000762bdd6b7.jpeg 图片。

控制台中会打印：

avatar: b417eb0f1c79e606d72c000762bdd6b7.jpeg
复制代码

打包图片

file-loader 中可使用 options 指定打包后的图片名。

...
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.jpeg$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name]-[hash:7].[ext]' // 占位符 ⭐️
                    }
                }
            }
        ]
    }
}
复制代码

其中 [name] 表明图片的文件名，[hash:7] 表明 hash 值的前 7 位，[ext] 表明图片的扩展名。

npm run build 以后，在 bundle 目录中，会生成一个文件名 avatar-b417eb0.jpeg 图片。

除了 .jpeg ，还能够经过正则表达式匹配其余格式的图片：

...
{
    test: /\.(jpeg|jpg|png|gif)$/, // 匹配更多格式的图片 ⭐️
    use: {
        loader: 'file-loader',
        options: {
            name: '[name]-[hash:7].[ext]'
        }
    }
}
...
复制代码

options 中除了 name ，还有 outputPath ，指定生成图片的路径。

...
test: /\.(jpeg|jpg|png|gif)$/,
use: {
    loader: 'file-loader',
    options: {
        name: '[name]-[hash:7].[ext]',
        outputPath: 'images/' // 指定生成图片的路径 ⭐️
    }
}
...
复制代码

npm run build 以后，在 bundle 目录中，会生成一个 images 目录及 avatar-b417eb0.jpeg 图片。

除了 file-loader ，还有一个 url-loader 也能够用来打包图片。不一样的是，使用 url-loader 会生成 Base64 格式的图片。你能够经过指定 limit 参数来限定阈值：小于此阈值则使用 Base64 ，不然使用图片文件的格式。

...
{
    test: /\.(jpeg|jpg|png|gif)$/,
    use: {
        loader: 'url-loader', // 使用 url-loader ⭐️
        options: {
            name: '[name]-[hash:7].[ext]', 
            outputPath: 'images/',
            limit: 2048 // 指定生成Base64 图片的阈值 ⭐️
        }
    }
}
...
复制代码

固然，使用 url-loader 也是须要安装的：

npm i url-loader --save-dev
复制代码

推荐使用 url-loader 。

打包样式

---

🚧 💤 （施工中）

Webpack 进阶

🏗 💤 （施工中）

（未完待续...）