Webpack

最新推荐文章于 2023-07-06 00:34:03 发布

耶梦加得儿

最新推荐文章于 2023-07-06 00:34:03 发布

阅读量616

点赞数

Webpack

Webpack是时下最流行的模块打包器
它的主要任务就是将各种格式的JavaScript代码，甚至是静态文件
进行分析、压缩、合并、打包，最后生成浏览器支持的代码

特点：

代码拆分方案：webpack可以将应用代码拆分成多个块，每个块包含一个或多个模块，块可以按需异步加载，极大提升大规模单页应用的初始加载速度
智能的静态分析：webpack的智能解析器几乎可以处理任何第三方库
Loader加载器：webpack只能处理原生js模块，但是loader可以将各种资源转换为js模块
plugin插件：webpack有功能丰富的插件系统，满足各种开发需求
快速运行：webpack 使用异步 I/O 和多级缓存提高运行效率，使得它能够快速增量编译

不过它也有自己的缺点
配置过于复杂；如果使用不当（比如过度优化），会产生难以预料的问题
但是瑕不掩瑜，它仍是优秀的前端自动化构建工具

安装

webpack是使用Node.js开发的工具，可通过npm（node.js的包管理工具）进行安装
我们可以去Node.js官网下载

我的电脑是Windows×64位操作系统，那么我就点击Windows Installer 64-bit下载

下载安装完毕后我们可以打开命令提示符检测一下
使用Win+R快捷键，输入cmd打开命令行
输入：node -v

显示了node版本6.2
这就证明我们安装成功了

准备

下面我们要做的是在全局安装webpack
因为大部分情况我们需要已命令行工具的形式使用webpack，所以安装在全局更方便（-g）
输入：npm install webpack -g
安装完毕后我们需要手动构建项目文件

现在我在桌面上新建了一个项目文件夹demo

内部很简单，一个网页index.html和一个用来放资源的文件夹

下面我们还要配置package.json项目文件
一个很简单的方式就是利用npm自动创建
现在将命令符引导到我们项目的根路径

（如果下载了Git，可以直接在桌面git bash）

输入：npm init

（最好将webpack也作为项目依赖安装到项目中，而不限于全局，官方推荐，方便引用 npm install webpack）

输入这个命令后，会让你输入项目名称、项目描述等等
由于我们不需要发布，这些都不重要，所以我们直接回车默认就可以了

完毕后我们就会发现文件根目录下多了一个文件

有了package.json，webpack才能管理好模块之间的依赖关系

文件

下面做一个十分简单的页面

/* greet.css */
p {
    font-size: 50px;
    color: orangered;
}
 
 1
2
3
4
5
 
 1
2
3
4
5

css中我们为p标签添加样式

/* greet.js */
require('../css/greet.css');
var p = document.createElement('p');
p.innerHTML = 'hello world!';
module.exports = p;
 
 1
2
3
4
5
 
 1
2
3
4
5

greet.js中引入模块，创建p标签

/*entry.js*/
var p = require('./greet');
document.appendChild(p);
 
 1
2
3
 
 1
2
3

入口文件中将p标签添加到页面

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./out/index.js"></script>
</body>
</html>
 
 1
2
3
4
5
6
7
8
9
10
11
 
 1
2
3
4
5
6
7
8
9
10
11

html值只是简单的引入脚本
不过此时它还不存在
它是我们要使用webpack将会生成的文件

上面的依赖关系用图片来展示就是个这个样子地

配置文件

仅仅做了这些还不够
我们还有一个最重要的步骤没有完成——编写webpack配置文件
在项目根目录下创建一个文件webpack.config.js

/* webpack.config.js */
module.exports = {
    entry: './src/js/entry.js',
    output: {
        path: './out',
        publicPath: './out',
        filename: 'index.js'
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: 'babel'},
            {test: /\.css$/, loader: 'style!css'},
            {test: /\.(jpg|png|gif|svg)$/, loader: 'url?limit=8192}
        ]
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

entry是项目的入口文件
output是构建项目输出结果的描述，本身为对象

path：输出目录
publicPath：输出目录对应外部路径（从浏览器中访问）
filename：输出文件名

publicPath其实是很重要的配置，它表示构建结果最终被真正访问的路径
但在我们的demo中，直接通过相对路径访问静态资源，不涉及打包上线CDN，所以没那么重要

加载器

要想使用loaders就必须安装
为了让我们不用在所有文件中都重复的引用加载器
我们还需要在webpack.config.js下的module中添加配置信息
形式参考上面的代码
它有以下配置选线：

test（必选）：匹配loaders处理文件拓展名的正则表达式
loader（必选）：加载器名称
include/exclude（可选）：手动添加必须处理的文件或屏蔽不需要处理的文件；
query（可选）：为加载器提供额外设置选项

babel-loader

Babel是一种多用途的编译器，通过它我们可以：

使用浏览器没有完全支持的新标准（ES6、ES7）
使用基于JavaScript拓展的语言（React JSX、CoffeeScript…）

Babel是几个模块化的包，其核心功能位于babel-core的npm包中
每一个功能的拓展包，都需要我们单独下载
比如解析Es6的babel-preset-es2015包
解析JSX的babel-preset-React包
我们可以在命令行中统一下载它们 npm install + 要下载的包（多个包用空格隔开）
输入：npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
（我们的demo中可能用不到这些加载器，我是为了演示）

注：–save命令可以把信息自动写进package.json的dependencies字段
–save-dev可以写入到devDependences中
（dependencies表示在生产环境中需要依赖的包，DevDependencies表示仅在开发和测试环节中需要依赖的包）

module: {
    loaders:[
        {
            test: /\.js$/, 
            loader: 'babel',  //loader: 'babel-loader'
            query: {
                presets: ['es2015','react']
            }
        },
        ...
    ]
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
 
 1
2
3
4
5
6
7
8
9
10
11
12

注意我的注释，‘-loader’是可以省略的

css-loader

css-loader使我们能够利用@import 和 url(…)替代 require()
style-loader将计算后的样式加入页面中
二者组合在一起使我们能够把css嵌入webpack打包后的js文件中（style标签中）
在命令行中下载
输入：npm install css-loader style-loader --save-dev

module: {
    loaders:[
        {
            test: /\.css$/, 
            loader: 'style!css'  //loader: 'style-loader!css-loader'
        },
        ...
    ]
}
 
 1
2
3
4
5
6
7
8
9
 
 1
2
3
4
5
6
7
8
9

使用“！”可以加载并列的加载器

url-loader

webpack中一切都是模块，包括JavaScript，包括css，也包括图片等静态资源
为了将图片资源变成模块，我们需要url-loader（将图片转换为base64），它还依赖file-loader
所以都需要下载
输入：npm install url-loader file-loader --save-dev

module: {
    loaders:[
        {
            test: /\.(jpg|png|gif|svg)$/, 
            loader: 'url?limit=8192'    //loader: 'url-loader?limit=8192'
        },
        ...
    ]
}
 
 1
2
3
4
5
6
7
8
9
 
 1
2
3
4
5
6
7
8
9

上面的limit=8192意思是不大于8KB（1024×8）的图片才会被打包处理为base64的图片

打包监听

完成了配置文件
在命令行输入webpack -w
可以打包我们的文件并且时刻监控我们的文件
（如果仅仅想打包就输入webpack 命令）
一旦发生变化（Ctrl+S保存后），立刻重新打包
（ps：若想在命令行取消监听，使用Ctrl+C）

出现了这些，表示打包成功了

回到我们的文件夹，我们发现out文件夹由webpack自动生成了
node-modules内部装的就是我们刚刚下载的那些loaders

页面中也成功显示了hello world

耶梦加得儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack

WebpackWebpack是时下最流行的模块打包器它的主要任务就是将各种格式的JavaScript代码，甚至是静态文件进行分析、压缩、合并、打包，最后生成浏览器支持的代码特点：代码拆分方案：webpack可以将应用代码拆分成多个块，每个块包含一个或多个模块，块可以按需异步加载，极大提升大规模单页应用的初始加载速度智能的静态分析：webpack的智能解析器几
复制链接

扫一扫