webpack学习笔记（一）：认识webpack

初识webpack

根据官网介绍，

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

这么说可能有点抽象，用过vue的同学可以这样想，vue框架中组件是以.vue结尾的，但是浏览器并不认识这类文件，需要把.vue文件译成浏览器能识别的代码，这就需要webpack打包工具了。webpack中有一个重要的概念，即万物皆模块，前端的所有资源文件(js/json/css/img/less…)都会作为模块处理。

五个核心概念

• Entry：入口文件，指示webpack应该使用哪个模块来作为构建其内部依赖图的开始
• Output：告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist/
• Loader：让webpack能处理那些非js和json文件
• Plugins：可以用于执行范围更广的任务，插件的范围包括从打包优化到压缩，一直到重新定义环境中的变量等
• Mode：模式，有生产模式production和开发模式development

准备

在开始学习webpack之前，需要：

• 安装node.js。webpack是用node.js写的，使用时需要node环境，安装后自带npm包管理器
• 使用npm init -y初始化工程，会生成一个package.json文件
• 开发环境下下载依赖包npm i webpack webpack-cli -D
• 点开package.json文件，可以看到下面一行：
  
  main对应的index.js表示webpack在打包时默认以src目录下的index.js为入口文件，因此需要在根目录下创建src目录，再创建index.js文件：
  
  在index.js中添加以下代码：

function add(a, b) {
  console.log(a + b)
}
add(1, 2)

在命令行项目根目录下输入npx webpack进行打包操作，会出现dist目录，其中的main.js就是打包完成的输出文件

可见代码已经被处理过。

• 在src目录下再创建a.js文件，以commonJS规范写入以下代码：

const say = function() {
  console.log('say')
}
module.exports = {
  say
}

在index.js中引入a.js文件：

再输入npx webpack打包一次，查看main.js：

可见代码被压缩，即打包模式默认是生产环境，也就是mode取值为production。mode的另一个取值为development，即将打包模式指定为开发环境，开发环境下代码不会被压缩。

• 创建index.html文件，引入main.js，打开浏览器，打包后的代码可以直接在浏览器中运行：
  
  如果直接引入带有commonJS语法规范的index.js，浏览器会解析不了，报错：
  
  将commonJS规范换成ESM规范，同样会报错：
  
  说明使用webpack可以将高级的js语法翻译成浏览器认识的代码。

本篇笔记是看了B站up主“左耳击水兽”的讲解视频记录下来，感兴趣的同学可以直接看他视频哦。