webpack快速入门-基本使用

先创建项目，然后来到项目根目录

初始化package.json

npm init -y
1

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

安装webpack

::: info 前提条件

在安装webpack之前，请确保本地环境安装了node.js, 尽量使用node新的长期支持的版本，旧版本可能遇到很多问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

:::

npm install webpack --save-dev
1

如果使用 webpack 4+ 版本，还需要安装 CLI。

npm install webpack-cli --save-dev
1

webpack-cli - 此工具用于在命令行中运行 webpack

创建文件

在项目根目录创建src文件夹, 再创建index.js文件

• index.js

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

sum(2, 3, 5);
1
2
3
4
5

目录结构

webpack-course # 项目根目录（所有指令必须在这个目录运行）
    │── node_modules
    │── src # 项目源码目录
    |    └── index.js # 项目主文件
    |
    └── package-lock.json
    └── package.json
1
2
3
4
5
6
7

webpack打包

npx webpack ./src/index.js --mode=development
1

npx webpack: 是用于运行本地安装 Webpack 包

./src/index.js: 指定 Webpack 从 index.js 文件开始打包

--mode=development：指定打包模式

• 查看

  • 默认 Webpack 会将文件打包输出到 dist 目录下，如果自动创建了dist目录那就代表打包成功了

总结

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到其他资源就会报错

所以我们学习 Webpack，就是主要学习如何处理其他资源

查看本系列文章合集click me

下载本系列文章源码click me