揭秘webpack基础篇，直击核心概念

2023-12-16 20:41:20




## webpack基础篇

webpack是一个现代JavaScript应用程序的打包工具，它将不同的JavaScript模块组合成一个或多个捆绑文件，以便在浏览器中运行。webpack有很多强大的特性，包括代码分割、模块加载、代码压缩等，使之成为前端开发人员必不可少的工具。

webpack有四个核心概念，分别是entry、output、loader和plugin。

**1. entry** 

entry代表应用程序的入口文件，它是webpack打包的起点。entry可以是单个文件，也可以是多个文件。如果是单个文件，则webpack会从该文件开始解析应用程序的依赖项，并将它们打包成一个捆绑文件。如果是多个文件，则webpack会将它们打包成多个捆绑文件。

**2. output** 

output代表应用程序的输出目录，它是webpack打包的终点。output可以是单个文件，也可以是多个文件。如果是单个文件，则webpack会将打包后的代码输出到该文件中。如果是多个文件，则webpack会将打包后的代码输出到不同的文件中。

**3. loader** 

loader用于将非JavaScript文件（如CSS、图片、字体等）转换成JavaScript模块，以便webpack可以打包它们。loader可以是内置的，也可以是第三方开发的。

**4. plugin** 

plugin用于增强webpack的功能，可以完成各种任务，如代码压缩、代码分割、生成source map等。plugin可以是内置的，也可以是第三方开发的。

## 代码示例

下面是一个简单的webpack配置示例：

```javascript
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};