之前学习webpack都是3系列的，这次好好深入学习，为之后自己搭脚手架做准备。
- 安装webpack
依稀记得以前先要全局安装webpack，然后使用webpack a.js b.js就可以实现打包功能。
npm install -g webpack
image.png
- 创建项目
新建一个文件夹webpack-demo,然后项目初始化
npm init
生成package.json文件。
在根目录下添加index.html以及index.js两个文件，
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script src="bundle.js"></script>
</html>
index.js
document.write("hello webpack");
3.打包
随后执行代码
webpack index.js bundle.js
结果出现错误
执行webpack.png
webpack-cli必须安装，因为它变成了单独的包，使用npm install -D进行安装。
我不喜欢按照他提示来(晕死)，先webpack -v看看自己webpack安装了没，发现提醒一样的，并问我要不要安装，我就点了yes。
image.png
点击yes之后，还是报了错没有找到webpack-cli模块。
image.png
更无语的是，package.json有webpack-cli。
image.png
既然这样，那就试一试他么的
npm install webpack-cli -D吧
image.png
没有报错了，执行
webpack index.js bundle.js
image.png
还是一样的结果，说明，并没有安装好webpack-cli，google得到答案，先卸载webpack-cli再全局安装webpack-cli。
npm uninstall webpack-cli
npm install -g webpack-cli
image.png
重新安装webpack-cli之后，运行webpack index.js bundle.js
image.png
mode选项没有设置，设置mode值为development或者production确保环境有默认值。因此我们需要设置webpack的mode
webpack --mode development
但仍然有问题，不能解析./src。
image.png
归根到底，webpack4，以根目录下的'./src'为入口，所以要创建src目录，并将index.js放置其中，执行
webpack index.js bundle.js，我这辈子都不想执行这个命令，再次报错。
image.png
因为webpack4不在使用这个命令执行，而是
webpack --mode development
webpack --mode production
这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。
但每次输入会非常麻烦，因此，可以在package.json的脚本script中写上：
"dev":"webpack --mode development"
"build":"webpack --mode production"
npm run dev或者npm run build
- 总结
总的来说，webpack的普通配置方法为：
1.npm init -y创建目录
2.全局安装webpack和webpack-cli
npm install -g webpack webpack-cli
3.在package.json中配置dev和build的脚本
4.运行
网友评论