写这篇文章的初衷在于, 虽然网络上关于 webpack 的教程不少, 但是大多已经过时, 由于 webpack 版本更新后许多操作变化很大, 很多教程的经验已经不适合. 当我们使用 npm 安装 webpack 时, 若不指定 webpack 的版本, 将默认安装最新版, 笔者测试时默认安装的是 4.1.1, 并不能照搬老教程的方法. 为此, 笔者进行了最新版配置的探索, 使用的是 windows 操作系统, 如果你的是 webpack4.x 版本, 可参考进行配置.
注意: 本文并不是直接把正确步骤放上去, 而是分析了各种报错情况及原因, 文章的步骤显得绕弯子. 如果仅仅想看正确步骤, 建议直接看第八点的配置步骤再返回查找各步骤的操作.
一, 全局安装 webpack
如果我们按照旧版本的安装方式, 直接使用 npm 全局安装 webpack, 我们预期全局安装 webpack 后, 便能在命令行中使用 webpack 指令. 我们在命令行输入:
npm install -g webpack
当执行该操作后, 便在 C:\Users \ 你的用户名 \ AppData\Roaming\npm\node_modules 创建了 webpack 文件夹, 里面存储了刚刚全局安装的 webpack 模块.
二, 创建项目
我们在合适位置新建一个文件夹 webpack-test, 用于存放我们的项目.
命令行中定位到 webpack-test 文件夹下, 输入以下命令进行项目的初始化:
npm init
这里, 要求设置很多选项, 可以按项目情况配置也可以不填直接回车. 完成后, 我们发现文件夹中增加了 package.json 文件, 它用于保存关于项目的信息.
三, 尝试打包出现提示
我们在项目根目录新建一个文件 hello.js, 并在其中输入代码:
- function hello(str) {
- alert(str);
- }
- hello('hello world!');
然后, 我们便可以满怀期待地尝试打包, 在命令行输入:
webpack hello.js bundle.js
意思是将 hello.js 打包成另一个文件 bundle.js. 但很不幸, 4.1.1 版本会提示:
The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
翻译成中文:
CLI(命令行工具) 已经转移到了一个单独的包 webpack-cli 中.
除了 webpack 自身外, 请额外安装 webpack-cli 来使用 CLI.
-> 使用 npm 安装: npm install webpack-cli -D
-> 使用 yarn 安装: yarn add webpack-cli -D
意思是, 我们需要额外安装 webpack-cli, 否则便不能在命令行中使用 webpack 的相关命令.
四, 安装 webpack-cli
我们在项目中本地安装 webpack-cli:
npm install webpack-cli -D
这里 - D 参数和 - save-dev 的作用相同, 只是一种简写而已. 笔者这里安装完成后, 显示 webpack-cli 版本是 2.0.10.
我们在根目录再次输入:
webpack hello.js bundle.js
很不幸, 还是提示:
The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
这表明我们本地安装 webpack-cli 后并没有起作用, 在命令行中依然不能使用 webpack 命令. 那么是什么地方出了问题呢?
我们不难想到,
旧版本的 webpack 中, webpack 指令要能在命令行中使用, 需要全局安装 webpack, 而不是本地安装, 因此这里的 webpack-cli 也应该是同理.
我们卸载本地安装的 webpack-cli, 全局安装 webpack-cli:
- npm uninstall webpack-cli
- npm install -g webpack-cli
五, 设置模式
我们再次尝试打包:
webpack hello.js bundle.js
看样子似乎是可以运行了, 但又出现了新的提示:
- WARNING in configuration
- The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this enviroment.
ERROR in multi ./hello.js bundle.js
Module not found:ERROR:Can't resolve'bundle.js'in'C:/Users / 你的用户名 / Desktop/webpack-test'
@ multi ./hello.js bundle.js
翻译成中文:
配置警告:
"mode" 选项尚未设置. 将 "mode" 选项设为 "development" 或 "production" 以启用此环境的默认设置.
multi 错误 ./ hello.js bundle.js
未发现模块: 错误: 无法解析'C:/Users / 你的用户名 / Desktop/webpack-test'中的 bundle.js
@ multi ./hello.js bundle.js
这里提示我们存在的第一个问题是没有配置 webpack 的 mode 选项, 默认有 production 和 development 两种模式可以设置, 因此我们尝试设为 development 模式, 在命令行输入:
webpack --mode development
我们看到进行了打包并显示了 Hash,Version,Time,Build at 信息, 表明已经可以打包. 不过, 仍然有错误提示:
ERROR in Entry module not found:ERROR:Can't resolve'./src'in'C:/Users / 你的用户名 / Desktop/webpack-test'
翻译成中文:
未找到入口模块发生错误: 错误: 无法解析'C:/Users / 你的用户名 / Desktop/webpack-test'中的'./src'
六, 创建入口文件
这表明 webpack4.x 是以项目根目录下的'./src'作为入口, 但我们的项目中缺乏该路径, 因此我们在根目录下创建 src 文件夹, 事实上 webpack4.x 以'./src/index.js'作为入口, 单单创建 src 文件而没有 index.js 文件仍然会报错, 因此我们
将 hello.js 移动到'./src', 并重命名为 index.js.
现在如果我们再次执行
webpack index.js bundle.js
会提示 can.t resolve 相关的错误.
原因是, webpack4.x 的打包已经不能用 webpack 文件 a 文件 b 的方式, 而是直接运行 webpack --mode development 或者 webpack --mode production, 这样便会默认进行打包, 入口文件是'./src/index.js', 输出路径是'./dist/main.js', 其中 src 目录即 index.js 文件需要手动创建, 而 dist 目录及 main.js 会自动生成.
因此我们不再按 webpack 文件 a 文件 b 的方式运行 webpack 指令, 而是直接运行
webpack --mode development
或者
webpack --mode production.
这样便能够实现将'./src/index.js'打包成'./dist/main.js'.
不过每次都要输入这个命令, 非常麻烦, 我们在 package.json 中 scripts 中加入两个成员:
- "dev":"webpack --mode development",
- "build":"webpack --mode production"
以后我们只需要在命令行执行 npm run dev 便相当于执行 webpack --mode development, 执行 npm run build 便相当于执行 webpack --mode production.
我们在根目录执行:
npm run dev
可以看到根目录下生成了 dist 目录, 并且 dist 目录下生成了 main.js 文件, main.js 文件已经打包了 src 目录下 index.js 文件的代码.
七, 配置其他参数
我们如果需要配置 webpack 指令的其他参数, 只需要在 webpack -mode production/development 后加上其他参数即可, 如:
webpack --mode development --watch --progress --display-modules --colors --display-reasons
当然, 这也可以写入 package.json 的 scripts 之中.
八, 总结
我们可以将以上探索进行整理总结, 首先是注意事项:
1,webpack-cli 必须要全局安装, 否则不能使用 webpack 指令;
2,webpack 也必须要全局安装, 否则也不能使用 webpack 指令.
3,webpack4.x 中 webpack.config.js 这样的配置文件不是必须的.
4, 默认入口文件是./src/index.js, 默认输出文件./dist/main.js.
配置步骤:
1, 创建工程目录;
2, 初始化工程目录: npm init.
3, 全局安装 webpack-cli.
4, 全局安装 webpack.
5,webpack -mode development/production 进行打包, 可在 package.json 中配置 dev 和 build 的脚本, 便只需运行 npm run dev/build, 作用相同.
6, 在 webpack -mode development/production 可串联设置其他参数.
来源: https://www.2cto.com/kf/201805/750088.html