001 webpack基础 - 简介
[A] 基本使用
webpack是一个静态的模块化打包工具,它以一个或多个文件作为打包的入口,将我们整个项目所有的文件编译组合成一个或者多个文件输出
[B] 功能介绍
webpack本身功能实有限的, 只能处理js,json资源,一旦遇到css等其他资源,就会报错
开发模式:仅能编译 JS 中的 ES Module 语法
生产模式:能编译 JS 中的 ES Module 语法,还能压缩 JS 代码
[C] 实例展示:
1. 现有文件 add.js, minus.js 两个工具文件
// add.js const add = function() { let args = arguments return args.reduce((a, b) => { return a + b }, 0) } export default add
// minus.js const minus = function(x, y) { return x - y } export default minus
2. 另有一个主文件,引用了这两个工具文件
import add from './js/add' import minus from './js/minus' console.log(add([3, 5, 7, 9])) console.log(minus(10, 4))
3. 最后,在一个 index.html 文件中引入这个 main 主文件
<script src="../main.js"></script>
问题:
执行这个html,会报错:Uncaught SyntaxError: Cannot use import statement outside a module
原因:
Nodejs支持commenJS和ES6的模块化导入导出语法,但是浏览器不支持,因此,不管使用commenJS还是ES6方法导入导出,浏览器执行均会报错
解决:
webpack进行打包,将多个文件合并成一个文件,消除模块化导入导出的语法
指令:
npx webpack ./src/main.js --mode=development
// 默认,打包后的文件路径为:dist/main.js
// 可将这段指令写入到 package.json 里面,然后通过 npm run xxx 来执行