1. webpack 介绍&基本使用
1. 创建目录
先创建以下目录
python
sgg-webpack # 项目根目录(所有指令必须在这个目录运行)
└── src # 项目源码目录
├── js # js文件目录
│ ├── count.js
│ └── sum.js
└── main.js # 项目主文件
2. 创建文件
count.js
js
export default function count(x, y) {
return x - y;
}
sum.js
js
export default function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
main.js
js
import count from "./js/count";
import sum from "./js/sum";
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
3. 安装依赖
bash
yarn i webpack webpack-cli -D
4. 启动 webpack
- 开发模式启动
bash
npx webpack ./src/main.js --mode=development
就可以看到当前目录下面生成了dist
文件夹。
- 生产模式启动
bash
npx webpack ./src/main.js --mode=production
可以看见 productin 模式下打包后的文件里面少了很多东西。
4. 小结
当前我们只用 webpack 来打包 js 文件,那么其他资源怎么打包呢?例如 css js vue .jsx, 这个在后面会写到。
2. 基本配置
1. 5大核心概念
- entry(入口) 指示 webpack 从那个文件开始打包。
- output(输出) 指示 webpack 打包完的文件输出到哪里去,怎么文件怎样命名
- loader(加载器) webpack 本身只能处理 JS JSON 等资源,其他类型的资源需要 loader 的帮助,webpack 才能够解析。
- plugins(插件) 扩展 webpack 的功能
- mode(模式) 指定打包的模式,主要有两种
- 开发模式: development
- 生产模式: production
2. 准备webpack配置文件
在项目的根目录下面创建 webpack.config.js 文件
js
const path = require("path");
module.exports = {
// 入口
entry: "./src/main.js",
// 出口
output: {
// __dirname 是当前文件的文件夹绝对路径
// path.resolve 方法返回的是一个绝对路径
// path 是文件输出的目录
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};
运行命令
npx webpack
效果和第一次用 命令行打包是一样的
3. 小结
之后我们都会通过 webpack.config.js 文件来进行配置,并增强 webpack 的功能。
在平时的开发中我们基本上都会进行区分,开发模式,和生产模式,来编写 webpack 的配置文件。