Webpack学习笔记_01

1.什么是webpack

1. webpack可以看做模块打包机：它做的事情是：分析你的项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss、TypeScript等），并将其打包为合适的格式以供浏览器使用。（本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。）
2. webpack是基于node进行编写的

2.webpack可以做什么？

代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

3.webpack的基本配置

webpack安装

有全局安装和本地安装两种方式，推荐使用本地安装，全局安装可能导致版本不一致的问题

1.项目初始化

生成package.json
进入项目目录project_dir
执行npm init，一路回车，默认即可或者直接npm init -y生成默认的配置文件
项目文件夹下，会生成文件夹node_modules（下载的模块都会在这个文件里）和文件package.json

2.全局安装

npm/cnpm install webpack -g
npm/cnpm install webpack-cli -g

或者

> npm/cnpm install webpack webpack-cli -g

3.局部安装

在项目目录下打开cmd（可以直接在vscode打开终端）
执行命令：

npm install webpack webpack-cli -D

我们一般安装为开发依赖，表示上线的时候不需要这个依赖包

我们需要了解的是webpack可以进行0配置，另外一层意思就是webpack的配置很弱

4.打包测试

我们先来看下webpack基本使用方法
webpack是一个打包工具，也就是说webpack可以把我们的源码进行打包，打包出输出后的结果，默认识别的是js模块，它会从入口把所有的js进行打包，然后输出
首先我们在该项目根目录下新建一个src目录，在src目录里建立一个index.js文件

代码如下：

console.log('hello world')

我们如果想把这个index.js进行打包应该怎么做呢？
我们可以直接使用npx webpack进行打包

执行这个命令以后我们就可以在项目根目录上看到一个dist文件夹，里面有一个main.js文件，里面就是webpack打包好的代码（里面的内容很多）

（如果在VSCode中我们可以直接安装Code Runner插件，选中要运行的代码就可以直接执行了）

我们运行里面的代码，可以发现运行结果是一样的