webPack基本使用步骤

关于webPack
webPack配置的几个概念
基本使用过程示例
- 1.创建测试目录和代码
- [2. 将index.js通过webpack进行打包](#2. 将index.js通过webpack进行打包)

关于webPack

简单来说，webpack就是一个打包工具，可以将相互依赖的html，css，js以及图片字体等资源文件，经过处理打包成一个可执行的项目文件。

webPack配置的几个概念

entry（入口）

配置entry是告诉 webpack 从哪个文件开始打包，构建内部的依赖关系图。当确定了入口起点后，webpack 将从这个文件出发，追踪并识别出所有它直接或间接依赖的模块和库。这样，webpack 就能知道整个项目中哪些资源是必需的，并将它们组织起来。

默认值是 ./src/index.js，但我们可以通过在 webpack.config.js 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

output（输出）

配置output是告诉webpack打包后的文件以什么文件名存在什么路径下面。默认情况下，主输出文件会被放置在 ./dist/main.js 路径下，而其他的生成文件则会被存放在 ./dist 目录中。

loader（输出）

默认的webpack只能处理js和json文件，为了拓展处理CSS、图片或字体文件等其他文件的能力，则需要借助loader。

plugin（插件）

插件可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量等。

mode（模式）

通过设置 mode 参数为 development、production 或 none，你可以启用 webpack 在不同环境下的内置优化。mode 参数的默认值是 production。

development：适用于开发环境，启用快速编译和友好错误提示等功能，但不会进行代码压缩等生产环境优化。

production：适用于生产环境，默认启用代码压缩、树摇（去除未使用的代码）等优化措施，以减小打包后的文件体积。

none：不启用任何优化，适用于需要完全控制构建过程的情况。

基本使用过程示例

本示例没有配置loader和plugin，以开发过程中的js文件为例，演示webpack最基本的使用方法。

1.创建测试目录和代码

在根目录下，创建文件下 src文件夹，用于放开发过程中的源代码，并在src文件夹下新建html文件和js文件。

js文件中写一个简单的打印代码

html中进行引用js

检验下是否生效

可以看到正常打印出了js中的日志。

2. 将index.js通过webpack进行打包

第1步所示的index.js是我们的源代码，现在我们看看如何使用webpack对index.js进行打包。

1）在根目录打开终端，输入指令npm init -y 初始化项目环境

初始化后，根目录下会多一个package.json文件

2）执行npm add webpack webpack-cli --dev将webpack安装到开发环境；此时，文件结构如下：

3）在根目录下手动新建一个webpack.config.js文件，用于配置webpack的参数（前文所提到的entry、output等），该文件配置如下：

复制代码

const path = require('path');

module.exports = {
  // 模式：开发模式（不压缩代码）
  mode: 'development',
  
  // 入口文件
  entry: './src/index.js',
  
  // 输出配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  
  // 添加 watch 选项实现自动打包
  watch: true, // 关键配置：监听文件变化
};

上面的配置内容包括三部分：我们的入口文件路径、输出文件的路径和自动打包的配置（如果此项不配置的话，后续开发过程中修改index.js后需要手动输入命令行去打包以更新输出结果）。

4）安装npm add --dev webpack-dev-server，使自动打包配置生效。

5）输入打包命令：npx webpack

可以看到根据我们配置的output信息，新建了dist文件夹和下面的bundle.js文件，bundle.js文件就是我们打包后的文件，其包含了源文件index.js的信息。

6）验证打包后文件是否生效

修改html中的引用信息，直接引用bundle。

运行后，发现原来index.js里面打印日志的功能仍然可以正常输出，说明打包后的文件可以代替源文件进行工作了。

7）检验自动打包是否生效

保持html文件内容不动，直接修改index.js源文件的内容，刷新浏览器，发现日志输入结果变化了，说明我们在修改源文件的同时，webpack已经检测到变化并帮我们更新了打包文件。