Concepts - Concepts（官网）

官网链接：https://webpack.js.org/concepts/

这一章节讲述了 Webpack 的必须知道的核心概念

• Entry
• Output
• Loaders
• Plugins
• Mode

一、Entry

entry 属性用于定义 Webpack 进行打包入口的地方，默认 ./src/index.js，我们也可以自定义地址

module.exports = {
  entry: './path/to/my/entry/file.js',
};

二、Output

output 属性用于确定如何输出打包文件，它有两个属性

1. path：用于定义 Webpack 生成捆绑包的地址，默认 ./dist/main.js
2. filename：定义这些捆绑包的名字 ```javascript const path = require(‘path’);

module.exports = { entry: ‘./path/to/my/entry/file.js’, output: { path: path.resolve(__dirname, ‘dist’), filename: ‘my-first-webpack.bundle.js’, }, };

<a name="jLxX2"></a>
## 三、Loaders
Webpack 默认只支持 JS 和 JSON 类型的文件打包，通过 loader 可以将其他类型的文件打包成有效的模块，并运行在应用中，它有两个属性
- test：定义哪些文件进行转换
- use：定义使用哪个 loader 对文件进行转换
（Loaders 的定义位置在 `module.rules`，这个位置需要注意一下，容易错）
```javascript
const path = require('path');
module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

四、Plugins

与 loaders 打包文件不同，plugins 用于执行范围更广的任务，比如捆绑包优化、静态资源管理、环境变量注入等。同一个 plugin 可以因为不同的目的使用多次，使用方式如下，在 plugins 数组中，使用 new 操作符创建一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

五、Mode

mode 属性可以让 Webpack 对应不同环境做不同的优化。可以设置为 production、development 或 none。默认是 production。

module.exports = {
  mode: 'production',
};

六、Browser Compatibility

Webpack 默认支持所有符合 ES5 标准的浏览器
对于 import() 和 require.ensure()，需要用到 Promise
如果想支持更老的浏览器，需要加载一个 polyfill

七、Environment

Webpack5 需要运行在 10.13.0+ 版本的 Node.js。

「@浪里淘沙的小法师」