打包工具 Webpack（一）

打包工具 Webpack（一）

为什么需要打包工具？

开发时，我们会使用框架（React、Vue），ES6 语法、less/scss 等 css 预处理器

但是浏览器只认识纯粹的 HTML / CSS / JavaScript

所以我们需要打包工具帮我们转成浏览器认识的语法

除此之外，打包工具还能压缩代码、提升代码性能等

让我们来个案例演示一下，当我们把如下代码放入index.html文件中，用浏览器打开，会发现有一个报错Uncaught SyntaxError: Cannot use import statement outside a module

import {getSum} from './util/sum'
console.info(getSum([1, 2, 3, 4]))

接下来安装npm i webpack webpack-cli -D，就可以使用webpack xxx.js --mode=development编译文件

改用编译后的文件，就不会报错了

Webpack 本身功能是有限的:

• 开发模式：仅能编译 JS 中的 ES Module 语法
• 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码