你不得不懂的 webpack

1、webpack 简介

webpack is a module bundler (模块打包⼯具)

Webpack 是⼀个打包模块化 JavaScript 的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递
归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中

是⼯程化、⾃动化思想在前端开发中的体现

2、安装 webpack

2.1、环境准备

安装 node

版本参考官⽹发布的最新版本，可以提升 webpack 的打包速度

一直下一步即可安装成功

2.2、全局安装 webpack (不推荐)

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm install webpack webpack-cli -g
# 检查版本
webpack -v
# 卸载
npm uninstall webpack webpack-cli -g

全局安装 webpack ，这会将你项⽬中的 webpack 锁定到指定版本，造成不同的项⽬中因为 webpack 依赖不同版本⽽导致冲突，构建失败。

2.3、项目安装（推荐）

# 安装最新的稳定版本
npm i -D webpack
# 安装指定版本
npm i -D webpack@<version>
# 安装最新的体验版本 可能包含bug,不要⽤于⽣产环境
npm i -D webpack@beta
# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

2.4、检查安装是否成功

webpack -v //command not found 默认在全局环境中查找
npx webpack -v// npx帮助我们在项⽬中的node_modules⾥查找webpack
./node_modules/.bin/webpack -v//到当前的node_modules模块⾥指定webpack

输出版本号就说明安装成功了

3、启动 webpack 执⾏构建

3.1、webpack 默认配置

• webpack 默认⽀持 JS 模块和 JSON 模块
• ⽀持 CommonJS、Es moudule、 AMD 等模块类型
• webpack4+ ⽀持零配置使⽤,但是很弱，稍微复杂些的场景都需要额外扩展

3.2、准备执行构建

• 新建src⽂件夹
• 新建src/index.js、src/index.json、src/other.js

### index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2, 3));
### index.json
{
 "name": "JOSN"
}
### other.js
export function add(n1, n2) {
 return n1 + n2; 
}

3.3、执行构建

方法一：
直接 npx webpack

方法二：
修改package.json⽂件：

"scripts": {
 "test": "webpack"
},

控制台运行 npm run test

原理： 通过 shell 脚本在 node_modules/.bin ⽬录下创建⼀个软链接。

3.4、构建成功

执行完命令之后，会发现目录下会多出一个 dist 文件夹，里面有个 main.js 文件，文件内容是个立即执行函数。

3.5、默认配置

那么为什么执行完命令，就会有如上的响应，是由于 webpack4+ 之后有了默认配置，内容如下：

const path = require("path");
module.exports = {
 // 必填 webpack执⾏构建⼊⼝
 entry: "./src/index.js",
 output: {
 // 将所有依赖的模块合并输出到main.js
 filename: "main.js",
 // 输出⽂件的存放路径，必须是绝对路径
 path: path.resolve(__dirname, "./dist")
 }
};

4、webpack 配置核⼼概念

零配置是很弱的，特定的需求，总是需要⾃⼰进⾏配置

webpack 有默认的配置⽂件，叫 webpack.config.js ，我们可以对这个⽂件进⾏修改，进⾏个性化配置

• 使⽤默认的配置⽂件：webpack.config.js
• 不使⽤⾃定义配置⽂件： ⽐如 webpack.common.js，可以通过 --config webpack.common.js 来指定 webpack 使⽤哪个配置⽂件来执⾏构建

webpack.common.js配置基础结构:

module.exports = {
  entry: './src/index.js', // 打包⼊⼝⽂件
  output: './dist', // 输出结构
  mode: 'production', // 打包环境
  module: {
    rules: [
      // loader模块处理
      {
        test: /\.css$/,
        use: 'style-loader',
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()], // 插件配置
};

4.1、entry（入口）

指定 webpack 打包⼊⼝⽂件:Webpack 执⾏构建的第⼀步将从 Entry 开始，可抽象成输⼊

• 单⼊⼝：SPA，本质是个字符串

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

可以简写成

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

• 多⼊⼝：是个对象

module.exports = {
	entry:{
		index:"./src/index.js",
		login:"./src/login.js"
	}
}

4.2、output（输出结果）

用来告诉 webpack 如何将编译后的⽂件输出到磁盘，在 Webpack 经过⼀系列处理并得出最终想要的代码后输出结果

• 单入口配置

module.exports = {
	entry:'./src/index.js',
	output: {
		filename: "bundle.js",//输出⽂件的名称
		path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
	}
}

• 多入口配置

module.exports = {
	entry:'./src/index.js',
	output: {
		filename: "bundle.js",//输出⽂件的名称
		path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
	}
}

4.3、mode（模式）

mode⽤来指定当前的构建环境

• production
• development
• none
  设置 mode 可以⾃动触发 webpack 内置的函数，达到优化的效果。
  支持以下字符串值：
  
  如果没有设置，webpack 会给 mode 的默认值设置为 production。

4.4、loader

webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。

本身是一个函数，接受源文件作为参数，返回转换的结果。

常见的 loader 有：

loader 的用法

module.exports = {
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' },
    ],
  },
};

自定义 loader

详见

4.5、plugin（插件）

• plugin 可以在webpack 运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念。
• 扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。
• 作⽤于整个构建过程。

常见的 plugin 有：

plugin 的用法

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:
'./src/index.html',
    }),
  ],
};

自定义 plugin

详见