近些年，前端发展一日千里，前端涌现出了很多新技术，比如：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
扫一扫
4112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
