学习webpack5之前，首先要了解什么是webpack，webpack解决了什么问题。
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
除了打包，webpack还可以翻译、压缩代码：
- less/sass => csss
- ES6/7/8 => ES5
- html/css/js => 压缩合并
下面，就通过一个简单的例子来了解下webpack的使用.
一、例子
创建一个test0的目录，并创建三个文件index.html, index.js与math.js
mkdir test0 && cd test0
touch index.html index.js math.js
在math.js, index.js分别加入以下代码：
// math.js
const add = (a, b) => {
return a + b;
};
export default add;
// index.js
import add from './math.js';
console.log(add(1, 2));
然后我们在index.html中引入index.js:
// ...
<body>
<script src="./index.js"></script>
</body>
// ...
然后我们在浏览器中打开index.html，会发现控制台报错了：
这是因为浏览器不能够识别ES6里的import语句导致的。
通过webpack打包，就能够生成让浏览器能识别的代码。下面，我们就通过webpack打包
index.js,main.js
二、webpack打包
1. 安装webpack
直接使用npm安装即可
npm install webpack webpack-cli --save-dev
2. 运行webpack
npx webpack --entry ./index.js --mode development // 不加npx会使用全局的webpack打包
其中，entry是入口文件，mode是打包模式。
打包后，项目根目录会生成一个dist文件，里面有个main.js文件（打包后的js文件）。
我们在index.html中引入main.js:
// ...
<body>
<script src="./dist/main.js"></script>
</body>
// ...
然后在浏览器打开, 会发现代码执行的结果 3
这样我们就通过webpack将index.js与math.js打包成了一个js文件main.js。
三、自定义webpack配置
通过命令行打包文件，不能够直观的看到我们的一些配置。因此webpack提供了通过文件去自定义配置的能力。在根目录下新建webpack.config.js文件：
touch webpack.config.js
在文件中加入以下代码：
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development'
};
webpack运行在node环境中，使用的是node中的commonJs模块语法，所以使用module.exports来定义。
ouput是输出文件名和路径。需要注意的是，输出路径必须是绝对路径。因此，这里我们使用了path.resolve(__dirname, './dist')来获取绝对路径。
然后我们通过npx webpack命令来打包，会发现dist中出现了一个bundle.js文件，这就是我们打包生成的文件。
在
index.html中引入bundle.js:
// ...
<body>
<script src="./dist/bundle.js"></script>
</body>
// ...
然后在浏览器打开, 同样会出现代码执行的结果 3
四、小结
- 安装webpack
npm install webpack webpack-cli --save-dev - 运行webpack
npx webpack - 自定义webpack配置 webpack.config.js (entry, output, mode)
网友评论