Webpack基础用法通俗来讲，webpack就是一个打包工具，用来将你编写的项目代码进行打包编译成静态资源文件，然后你

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言

本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个bundle，用于展示你的内容。

通俗来讲，webpack就是一个打包工具，用来将你编写的项目代码进行打包编译成静态资源文件，然后你就可以将打包后的静态资源文件部署到服务器上面去。

核心概念

入口（entry）

entry用来指示webpack 应该使用哪个模块，来作为打包构建的开始。通过入口起点，webpack会找出哪些模块和库是入口起点（直接和间接）依赖的。
```
module.exports = {
    entry: './src/main.js'
}
```
输出（output）

output属性告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件。

以下示例中，通过设置output.filename 和 output.path 属性，来告诉webpack，最终生成的bundle 名称以及存放路径。
```
const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
};
```
loader

webpack 只能理解JavaScript 和JSON 文件，无法理解css，less，img 等内容，loader 让webpack 能够去处理这些其他类型的文件，供应用程序使用。

在webpack 的配置中，loader 有两个属性
1. test 属性，识别出哪些文件会被转换。
2. use 属性，定义在进行转换的时候，应该使用哪个loader。
```
module.exports = {
  module: {
      rules: [
          {
              test: /\.txt$/,
              use: 'raw-loader'
          }
      ]
  }
};
```
插件（pluigin）

不同于loader用来转换某些类型的模块，插件会用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量等。

想要使用一个插件，你需要require() 它，然后把它添加到plugins 数组中。通常需要使用new 操作符来创建一个插件实例。
```
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
      new HtmlWebpackPlugin({
          template: './src/index.html'
      })
  ]
};
```
模式（mode）

通过对mode值的不同选择，可以启用webpack 内置在相应环境下的优化，development，production，none。默认值是production。
```
module.exports = {
  mode: 'production'
};
```

详细配置

入口（entry）

单入口语法：entry: string | [string]

module.exports = {
    entry: './src/main.js'
}

对象语法：entry: { string | [string] } | {}。

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

当我们使用对象语法描述入口的时候，还可以使用如下属性：

dependOn：当前入口所依赖的入口。它们必须在该入口被加载之前被加载。
filename: 指定要输出的文件名称。
import：启动时需要加载的模块。
library：指定library选项，为当前entry 构建一个library。
runtime：运行时chunk的名字。如果设置了，就会创建一个新的运行时chunk。
publicPath：当该入口的输出文件在浏览器中被引用时，为它们指定一个公共URL地址。

module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};
    
// 注意：  
// runtime 和 denpenOn 不应该在同一个入口上同时使用。
// runtime 不能指向已存在的入口名称。
// dependOn 不能循环引用。

输出

在webpack 配置中，output 属性的最低要求是，只需要配置输出文件的文件名称：output.filename。这个时候webpack 会将打包好的文件输出到dist 目录中去。

module.exports = {
  output: {
    filename: 'bundle.js',
  },
};

当entry 配置了多个入口的时候，在output 中，我们需要使用占位符来确保每个文件具有唯一的名称。

module.exports = {
 entry: {
   app: './src/app.js',
   search: './src/search.js',
 },
 output: {
   filename: '[name].js',
   path: __dirname + '/dist',
 },
};

// 写入到硬盘：./dist/app.js, ./dist/search.js

loader

loader 执行顺序简单理解：从下往上，从右往左。

loader使用有两种方式：

配置方式：在webpack.config.js 文件中指定loader。

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          { loader: 'sass-loader' },
        ],
      },
    ],
  },
};

内联方式：在每个import 语句中显示指定loader。

import Styles from 'style-loader!css-loader?modules!./styles.css';

应该尽可能使用配置方式，因为这样可以减少源码中样板文件的代码数量，并且可以在出错是，更快地调试和定位loader 中的问题。

plugin

通常配置用法只需要进行类似如下配置即可：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

mode

mode 有两种用法：

配置对象中使用

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

从CLI 参数中进行传递

webpack --mode=development