最近把博客前端的 CSS 和 JS 用 Webpack 打包了一下，其中就包含了 Bootstrap、jQuery、jQuery 插件 和 字体图标。这里就简单写一下 Webpack 配置和打包 jQuery、Bootstrap 和 字体图标。

如果您还不了解 Webpack 的话，可以先看一下 Webpack 简易使用指南 。

安装 Webpack

这里使用本地安装，安装之前别忘了使用 npm init 初始化项目。

安装 webpack 和 webpack-cli ：

npm install --save-dev webpack webpack-cli

安装完成后在 package.json 中的 script 中加入执行脚本：

"build": "webpack --config webpack.config.js"

这里配置的打包命令是：

npm run build

在项目根目录中创建一个 webpack.config.js ，在 webpack.config.js 中编写配置信息：

const path = require('path'); //  Node.js 处理文件路径的模块

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
};

上面的入口文件是 src/main.js，打包后的文件会放在 dist 目录。

使用 jQuery

使用 npm 安装 jQuery：

npm install --save jquery

jQuery 有两种引入方式。

方式一

在入口文件中引入和挂载 jQuery，如下：

import $ from 'jquery';  //  引入 jQuery
window.$ = $;  //  挂载 jQuery
window.jQuery = $;  //  挂载 jQuery

按照上面的方式引入和挂载后就可以使用了。

不过按照方式一引入的 jQuery 在使用一些 jQuery 插件的时候可能会报错。

方式二

这里需要用到 Webpack 的 ProvidePlugin 插件。

打开 webpack.config.js，加载 Webpack：

const webpack = require('webpack');

添加 ProvidePlugin 的插件配置信息：

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
  }),
];

上面已经全局挂载了 jQuery，可以直接使用 jQuery 了，jQuery 插件也不会报错。

使用 Bootstrap

Bootstrap 需要依赖 jQuery ，除了安装和配置 Bootstrap 外也需要安装和配置 jQuery。

安装 Bootstrap：

npm install --save bootstrap

在入口文件中引入 Bootstrap：

import 'bootstrap';  //  引入 Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';  //  引入 Bootstrap 的 css

Bootstrap 的一些功能还需要依赖 popper.js，安装 popper.js：

npm install --save-dev popper.js

popper.js 可以不需要引入。

这里需要打包后生成独立的 CSS 文件，所以还需要安装和配置 css-loader 和 mini-css-extract-plugin 插件。

安装 mini-css-extract-plugin ：

npm install --save-dev mini-css-extract-plugin

打开 webpack.config.js ，引入 mini-css-extract-plugin 插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

在插件配置区域添加 mini-css-extract-plugin 的配置：

plugins: [
  new MiniCssExtractPlugin({
    filename: 'style.css',
  }),
];

其中的 style.css 就是打包后输出的文件名。

安装 css-loader：

npm install --save-dev css-loader

配置 css-loader 和 mini-css-extract-plugin 的 loader：

{
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: './dist',
      },
    },
    {
      loader: 'css-loader',
    },
  ],
}

到这里就可以打包 Bootstrap 了。

使用 npm 安装的 Bootstrap 还包含 .scss 的 Sass 文件，Sass 文件分为很多个，如果你了解每个 Sass 文件的作用的话，可以只打包用到的功能。

如果要查看 Sass 文件的打包配置可以访问 Webpack 简易使用指南 。

处理字体图标

字体图标可以打包到 CSS 中，也可以打包为独立的字体文件，如果字体文件不是太大的话可以打包到 CSS 中。

以 IcoMoon 的字体图标为例，因为 IcoMoon 的图标数量是可定制的，所以字体文件也不会太大，这里就直接打包到 CSS 中。

下面是要打包的字体文件：

.
├── fonts
│   ├── icomoon.eot
│   ├── icomoon.svg
│   ├── icomoon.ttf
│   └── icomoon.woff
└── icon.css

其中的 icon.css 就是字体图标的 CSS，4 个字体图标都在 fonts 目录中。

打开字体图标的 CSS，设置一下字体图标的路径：

@font-face {
  font-family: 'icomoon';
  src:  url('./fonts/icomoon.eot?n4lnkm');
  src:  url('./fonts/icomoon.eot?n4lnkm#iefix') format('embedded-opentype'),
    url('./fonts/icomoon.ttf?n4lnkm') format('truetype'),
    url('./fonts/icomoon.woff?n4lnkm') format('woff'),
    url('./fonts/icomoon.svg?n4lnkm#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Webpack 的路径写法和常见的路径写法有点不一样，在 Webpack 中即便是同级的文件，在文件名前也需要加 ./。

要把字体文件打包到 CSS 中还需要 url-loader。

安装 url-loader：

npm install --save-dev url-loader

在 webpack.config.js 中的 loader 配置区域添加 url-loader 的配置：

{
  test: /\.eot$|\.svg$|\.ttf$|\.woff$/,
  use: [
    {
      loader: 'url-loader',
    },
  ],
}

在 JS 入口文件中引入字体图标的 CSS 文件就可以打包了，Webpack 会根据 CSS 文件中的字体文件路径寻找和打包字体文件，字体图标最终会以 base64 的方式被打包到 CSS 中。

相关文章：