1.什么是webpack
- webpack可以看做模块打包机：它做的事情是：分析你的项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss、TypeScript等），并将其打包为合适的格式以供浏览器使用。（本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。）
- 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插件，选中要运行的代码就可以直接执行了）
我们运行里面的代码，可以发现运行结果是一样的
京公网安备 11010502036488号