最近把博客前端的 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-dev 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-dev 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-loadermini-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-loadermini-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 中。

相关文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/855/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年05月03日 ©著作权归作者所有

发表评论

正在加载 Emoji