近些年,前端发展一日千里,前端涌现出了很多新技术,比如:es6、TypeScript、less、Scss等等。这些新技术极大地提高了开发效率,但是由于浏览器的发展相对迟缓,很多新技术并没有被浏览器很好的支持,总的来说吧,目前前端开发面临一些问题:
- 模块化支持不太好
- 文件依赖关系处理比较多
ES6+
语法兼容程度较低- 静态资源请求的效率不高等
面对这些问题,虽然手动处理也能解决,但是比较繁琐,如果项目上了规模,估计能把人整疯。因此人们想进行自动化处理这些问题,webpack
就是目前使用比较广的自动化处理工具中的一个。
webPack
可以看做是模块打包器(项目构建工具):它做的事情是,分析你的项目结构,找到JavaScript
模块以及其它的一些浏览器不能直接运行的拓展语言,并将其转换和打包为合适的格式供浏览器使用。它提供了比较友好的模块化支持,以及JS
语法兼容性处理、代码压缩混淆、性能优化等强大的功能,可以让程序员不再考虑前面我们说的问题,从而把工作的重心放到具体的业务功能实现上,提高了开发效率和项目的可维护性
注意:您需要安装npm
。
webpack官方文档:https://webpack.js.org/concepts/
webpack中文文档:https://www.webpackjs.com/concepts/
1. 安装webpack
# 创建项目目录(目录名不要叫webpack)
mkdir webpacktest
cd webpacktest
# 初始化操作项目
npm init
# 安装webpack 它只是项目开发过程中才需要,项目上线后并不需要
npm install webpack webpack-cli --save-dev
2. 简单使用
2.1 打包JS
文件
# 将index.js 打包输出为index.b.js
npx webpack index.js -o index.b.js
通过上面的操作,我们可以看到,会生成一个index.b.js
文件,我们使用的时候,只需要在html
代码中引入这个打包后的文件即可。
2.2 打包css
代码
webpack
不仅可以打包JS
文件,也可以打包其它文件,比如打包CSS
文件。比如我们在项目中新建个index.css
文件(我们的项目现在有index.html
、index.js
、index.css
三个文件)
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>哈哈哈1</li>
<li>哈哈哈2</li>
<li>哈哈哈3</li>
</ul>
<script src="./index.b.js"></script>
</body>
</html>
/* index.css */
ul li{
color: blue;
}
// index.js
import $ from 'jquery';
$('li').eq(3).css('color', 'red');
// 导入css文件
import './index.css';
// 也可以用require导入模块,因为webpack是基于node的,因此node的commonJs规则是支持的
// require('./index.css');
上面的文件写完,我们就可以打包编译我们的js了,不过我们发现并不能打包成功,而是报错了!报错内容大概是这样的:
ERROR in ./index.css 1:3
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
这是为什么呢?这是因为webpack
默认只能打包处理以.js
后缀名结尾的模块,其他非 .js
后缀名结尾的模块是处理不了的,如果需要打包其它类型的文件,则需要调用 对应的loader
加载器才可以正常打包,否则会报错!比如,我们打包css
的时候,需要使用css-loader
和style-loader
,下面我们看一下怎么操作:
# 安装css-loader和style-loader
npm install css-loader style-loader --save-dev
安装完以后,css
的代码不需要改变,只需要在加载css
文件的时候,做个小更改就行了:
import $ from 'jquery';
$('li').eq(3).css('color', 'red');
// 导入css文件
import 'style-loader!css-loader!./index.css';
// 或者
// require('style-loader!css-loader!./index.css');
更改后,重新打包即可。
2.3 webpack命令的一些参数的使用
webpack
命令还有一些参数,可以实现更多的功能。常见的参数有:
# 自动监听涉及到的文件的改变
--watch
# mode分为development/production,默认为production
# 修改的话可以 --mode=development
--mode
# 打包时指定使用的模块
# 下面这个表示凡是css的地方就用style-loader!css-loader处理,不用在代码中指定loader了
--module-bind 'css=style-loader!css-loader'
# 显示打包过程
--progress
# 显示打包时涉及的模块
--display-modules
# 指定打包配置文件
--config
参数的使用例子:
# 打包的过程中显示打包过程
npx webpack index.js -o index.b.js --progress
# 监听文件变化,如果涉及的文件有变化,则自动重新打包
npx webpack index.js -o index.b.js --watch
更多参数可以参考:https://webpack.js.org/api/cli/#src/components/Sidebar/Sidebar.jsx