Webpack相关概念

什么是webpack

本质上，webpack是一个用于javascript应用程序的静态模块打包工具。当webpack处理应用程序时，他会在内部从一个或多个入口构建一个依赖关系，然后将项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示我们的内容。

配置项概念

使用webpack需要做好相应的配置，在使用之前我们需要先了解其相关的核心概念

• 入口（entry）
• 输出（output）
• loader
• 插件（plugin）
• 模式（mode）
• 浏览器兼容性（browser compatibility）
• 环境（environment）

入口（entry）

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

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

webpack.config.js

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

输出（output）

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

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

const path = require('path');

module.exports = {
  entry: './path/src/entry/index.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack.bundle.js'
  }
}

output还有很多可配置特性，关于output的其他用法例如hash等可查看官网输出章节

loader

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

loader有两个属性

1. test：识别出哪些文件会被转换
2. use：定义在进行转换时，应该使用哪个loader

const path = require('path');

module.exports = {
  entry: './path/src/entry/index.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack.bundle.js'
  },
  module:{
  	rules: [{test: /\.tet$/, use: 'raw-loader'}]
  }
}

以上配置中，对module对象定义了rules属性，其中两个必须属性：test和use。告知webpack以下信息：

在碰到require()/import语句中被解析为.txt的路径时，在对它打包之前，先use（使用）raw-loader转换一下。

插件（plugin）

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

我们也可以通过插件接口，来扩展webpack能力。

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

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

module.exports = {
  entry: './path/src/entry/index.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack.bundle.js'
  },
  module:{
  	rules: [{test: /\.tet$/, use: 'raw-loader'}]
  },
  plugin: [new HtmlWebpackPlugin({ template: './src/index.html' })]
}

html-webpack-plugin为应用程序生成一个HTML文件，并自动将生成的所有bundle注入到此文件中。

模式（mode）

通过选择development，production或none之中的一个，来设置mode参数，我们可以启用webpack内置在响应环境下的优化。其默认值为production。

Webpack5运行于Node.js v10.13.0+的版本。