Webpack4
最近在使用Webpack的时候，发现Webpack4版本和前面有很大的不同，弄了很久，记录下了配置的过程，希望帮助后面的兄弟少挖点坑。在安装和使用过程中借鉴了几篇文章，得到了很多帮助。
webpack怎么安装、webpack彻底删除
package.json的配置、webpack打包报错
Webpack可以做什么事情
- 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
- 将代码打包的同时进行混淆，提高代码的安全性。
Webpack的安装：
一、 安装Node.js
node.js自带npm,所以node.js安装完成后，不需要再安装npm。
可通过node -v;npm-v;查看对应的版本。
image.png
二、 通过npm init创建package.json文件
cd进入文件夹后，输入npm init -y 命令，此时在文件夹中可以看到node_modules文件。
三、 安装webpack
输入npm install --global webpack 命令。
四、 安装webpack-cli
Webpack4之后都需要安装它。
通过 npm install --global webpack-cli命令进行安装。
- 此时输入webpack-v，能看到webpack的版本，就代表安装成功。
image.png - 最后需要在package.json中配置scripts字段
"scripts": {
"dev": "./node_modules/.bin/webpack --mode development",
"build": "./node_modules/.bin/webpack --mode product",
"des": "./node_modules/.bin/webpack-dev-server"
}
- 输入npm run dev命令即可打包
image.png
注意点
- 如果遇到了依赖性丢失的问题，删掉node_module文件，再使用npm install命令重新安装，之前安装的包都还会存在。
- package.json中不能写注释，只要是json文件都不可以写
- 安装包安到一半的时候终止了，要删掉整个包重新安装
-
安装模块的命令形式
1、npm install moduleName # 安装模块到项目目录下
2、npm install -g moduleName # -g 的意思是将模块安装到全局
3、npm install -save moduleName # -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
4、 npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
-
上述命令的区别
devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。
