webpack入门系列教程-引用第三方类库

简介


  前文已经提到,webpack用来将种种模块打包,最终输出一个全量 js 文件,引入到页面。一些针对项目的功能性模块,固然是需要我们自己去完成,但是 node 所提供的丰富类库,更是我们开发时必不可少的工具。因此,我们在开发过程中,一定会涉及到结合第三方类库开发的情况。本节中,将通过实例,讲解如何在webpack中引用第三方类库。

整理项目结构


  前文的练习中,我们构建了一套项目结构,用以测试相应的代码,下面我们重新建立一个项目,并修改项目结构。建立如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
project
├── app
│   ├── index.js
│   ├── script.js
│   └── style.js
├── node_modules
│   └── ...
├── package.json
├── source
│   ├── image
│   │   └── 1.jpg
│   ├── libs
│   │   └── rander.js
│   ├── style
│   │   ├── css
│   │   │   └── index.css
│   │   └── sass
│   │   ├── index.scss
│   │   └── variables.scss
│   └── template
│   └── index.html
└── webpack.config.js

  简单介绍一下各个目录的约定规则:

  1. app/index.js:项目入口文件
  2. app/script.js:类库引用
  3. app/style.js:样式引用
  4. node_modules:通过 npm 安装类库
  5. source/libs:存放我们自己写的类库
  6. 其它目录及文件与原来的相同

安装依赖


插件安装

1
2
# npm install html-webpack-plugin extract-text-webpack-plugin@next uglifyjs-webpack-plugin --save-dev
# npm install webpack-dev-server -g

  其中,我们本篇中暂不介绍 extract-text-webpack-plugin@nextuglifyjs-webpack-plugin的使用,用法将在后续文章介绍。

安装加载器及相关解释器

1
# npm install file-loader css-loader style-loader sass-loader url-loader babel-loader node-sass --save-dev

注意事项

  以上所安装的依赖中, 插件 部分皆不是本文章所讲解功能的必须插件,但为了我们开发、调试便利,建议全部安装。
  其中html-webpack-pluginwebpack-dev-server前面文章已经提到过,灵活使用它们,可以加快开发进度。
  extract-text-webpack-plugin为文本抽离插件,将在后续文章举例讲解。
  uglifyjs-webpack-plugin为压缩插件,将在后续文章举例讲解。
   加载器 部分,必须全部安装。

配置


  根据前面所安装的依赖,对项目进行配置:

package.json

1
2
3
4
5
6
7
8
{
...
"script": {
...,
"start": "webpack-dev-server --hot --inline"
}
...
}

   ...代表源文件保持不变,因此上面的意思是:在package.json中找到script字段,并在其结尾添加"start": "webpack-dev-server --hot --inline",并且在所添加的前一行结尾增加一个逗号[,](参考js对象的写法,每个键值对后都要有个逗号),其它位置保持不变。
  因为配置较多的话,重复内容过多,占用篇幅。因此,文章中其它配置,也会有这种写法,后文不在赘述

webpack.config.js

  配置webpack运行时需要的配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const path = require('path');
const hwp = require('html-webpack-plugin');

const ROOT_PATH = path.resolve(__dirname);
const APP_PATH = path.resolve(ROOT_PATH, 'app');
const BUILD_PATH = path.resolve(ROOT_PATH, 'build');
const SOURCE_PATH = path.resolve(ROOT_PATH, 'source');

module.exports = {
mode: 'development',
entry: APP_PATH,
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.s?css$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
include: ROOT_PATH
}, {
test: /\.(jpe?g|png|gif|ico)$/,
loader: 'url-loader?limit=10240'
}, {
test: /\.((ttf|eot|woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(ttf|eot|woff2?|svg)$/,
loader: 'url-loader?limit=10000&name=fonts/[hash:8].[name].[ext]'
}]
},
plugins: [
new hwp({
title: 'hello world app',
template:__dirname + '/source/template/index.html'
}),
],
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
}

安装第三方类库


  本篇文章中,我们使用moment库。

A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.
引自 Moment.js

1
# npm install moment --save-dev

  OK!等待控制台跑完,Moment 库就安装完成了,其实跟我们安装插件、加载器的方式是相同的。

编写与测试


编写代码

  首先编辑source/libs/rander.js,我们在这个类中,引用了 Moment 库,并利用它向一个 DOM 元素渲染当前时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Moment from 'moment';

export class Rander {

/** 构造方法 */
constructor(dom) {
this._dom = dom;
this.randerTime();
}

/** 时间渲染方法 */
randerTime() {
this._dom.innerHTML = Moment().format('YYYY-MM-DD hh:mm:ss')
}
}

  很简单的一个工具类,在创建 Rander 实例时,传入一个 DOM 对象,然后利用 randerTime 方法想所传入的 DOM 对象,渲染当前时间。接下来是构建用于显示的 html 模板,以及相应样式文件。

模板文件

source/template/index.html

1
2
3
4
5
6
7
8
9
<html>
<head>
<meta charset='utf-8'>
<title>Moment app</title>
</head>
<body>
<div class="time"></div>
</body>
</html>

样式文件

  为了熟悉 sass ,我们同时使用 css样式表 与 sass样式表。

source/style/css/index.css

1
2
3
.time {
color: #fff;
}

source/style/sass/variables.scss

1
2
3
4
5
$body-background-color: rgba(0, 0, 0, 0.72);

$time-margin: 20% auto;
$time-width: 500px;
$time-text-align: center;

source/style/sass/index.scss

1
2
3
4
5
6
7
8
9
10
11
@import './variables.scss';

body {
background: $body-background-color;
}

.time {
margin: $time-margin;
width: $time-width;
text-align: $time-text-align;
}

  最后,编辑入口目录 app 下的脚本引入文件 app/script.jsapp/style.js 引入我们上面写的的类库与样式文件,并将在入口文件 app/index.js 中导入上面两个文件。

app/script.js
  在 app/script.js 中,我们将引入我们所写好的 /source/libs/rander.js 工具类,并且写入我们所需要的基本逻辑代码。如下代码所示,非常简单的一段代码,利用 Rander 对象,向 DOM 渲染当前时间:

1
2
3
4
5
6
7
8
import {Rander} from '../source/libs/rander';

let rnd = new Rander(document.querySelector(".time"));

(function loop() {
rnd.randerTime();
setTimeout(loop, 1000)
})()

app/style.js
  在 app/style.js 中,引入所有样式文件:

1
2
import '../source/style/css/index.css';
import '../source/style/sass/index.scss';

app/index.js
  在 app/index.js 中,导入上述两个文件,完成本文全部代码:

1
2
import './script.js';
import './style.js';

测试运行


  如果你安装了 webpack-dev-server 插件,那么直接运行就可以:

1
2
# cd ~/project 
# npm start

  如果你未安装 webpack-dev-server 插件,那么可以直接利用 webpack 命令打包,然后运行 build/index.html 文件即可:

1
2
# cd ~/project 
# webpack

  之后在浏览器产看页面即可,最终的页面效果如下:
图片无法显示

谢谢你的支持