# webpack

**Repository Path**: weiaigewang/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: 个人webpack学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-09
- **Last Updated**: 2023-12-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack-demo

## 1、介绍
个人webpack学习记录

## 2、软件架构
1、webpack是使用node编写，所以webpack遵循node的开发规范。node的语法可以直接使用，包括require等等。

## 3、安装教程
需要安装的工具
1.  npm install --save-dev  webpack
2.  npm install --save-dev  webpack-cli
2.  cnpm install webpack-cli@3 -D
3.  npm install --save-dev  loadsh

## 4、webpack基本概念

### 4.1、入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：
webpack.config.js
```js
module.exports = {
    entry: './path/to/my/entry/file.js'
};
```
### 4.2、输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

## 4.3、loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

>注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。


在更高层面，在 webpack 的配置中 loader 有两个属性：

- 1.test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
- 2.use 属性，表示进行转换时，应该使用哪个 loader。

### 4.4、插件(plugin)
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

>插件接口(plugin interface) 功能极其强大，可以用来处理各种各样的任务。

#### 4.4.1 使用一个插件，
- 1.你只需要 require() 它，
- 2.然后把它添加到 plugins 数组中。
- 3.多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例

## 5.模式(mode)
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
- webpack.config.js文件
```js
module.exports = {
  mode: 'production'
};
```

## 6.浏览器兼容性(browser compatibility)

webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。

## 7、webpack打包
1.  使用webpack打包，可以用```npx webpack```命令也可以使用webpack.config.js配置后的命令。
2.  webpack
3.

#### 5、目地址

https://gitee.com/weiaigewang/webpack.git