一、基本使用

1. 概念

Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将 Webpack 输出的文件叫做 bundle。

2. 开始使用

使用es6语法

(1) 资源目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
└── src # 项目源码目录
├── js # js文件目录
│ ├── count.js
│ └── sum.js
└── main.js # 项目主文件

(2) 创建文件

• count.js

export default function count(a, b) {
	return a + b;
}

• sum.js

export default function sum(...args) {
	return args.reduce((p, c)=> p + c, 0);
}

• main.js

import count from './js/count'
import sum from './js/sum'

console.log(count(2,4));
console.log(sum(1,2,3,4,5));

(3) 下载依赖

• 初始化package.json

项目根目录：npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

• 下载依赖

npm i webpack webpack-cli -D

(4) 启用 Webpack

• 开发模式

npx webpack ./src/main.js --mode=development

• 生产模式

npx webpack ./src/main.js --mode=production

参数说明：

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）。

(5) 输出文件

默认 Webpack 会将文件打包输出到 dist 目录下

二、基本配置

1. 五大核心

• entry（入口）

指示 Webpack 从哪个文件开始打包

• output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

• loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

• plugins（插件）

扩展 Webpack 的功能

• mode（模式）

主要由两种模式：开发模式：development；生产模式：production

2. Webpack 配置文件

在项目根目录下新建文件：webpack.config.js

module.exports = {
  //入口
  entry: '',
  //输出
  output: {},
  //加载器
  module: {
    rules: [
    ]
  },
  //插件
  plugins: [
  ],
  //模式
  mode:''
};

3. 修改配置文件

• 配置文件

const path = require('path')
module.exports = {
  //入口：相对路径和绝对路径都行
  entry: './src/main.js',
  //输出
  output: {
    /**
    * path：文件输出目录，必须是绝对路径
    * path.resolve方法返回一个绝对路径
    * __dirname当前文件的文件夹绝对路径
    */
    path: path.resolve(__dirname,'dist'),
    //文件输出的名字
    filename: 'main.js'
  },
  //加载器
  module: {
    rules: [
    ]
  },
  //插件
  plugins: [
  ],
  //模式
  mode:'development', //开发模式
};

• 运行命令

npx webpack

通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能

结语：

　你说对生活绝望，完全失去了热情和动力，这种情况说到底，就是你比较懒。

回复webpack，可以获得全套笔记