Webpack4的配置超详细版

Webpack4

最近在使用Webpack的时候，发现Webpack4版本和前面有很大的不同，弄了很久，记录下了配置的过程，希望帮助后面的兄弟少挖点坑。在安装和使用过程中借鉴了几篇文章，得到了很多帮助。
webpack怎么安装、webpack彻底删除
package.json的配置、webpack打包报错

---

Webpack可以做什么事情

• 可以处理JS文件的相互依赖关系
• 可以处理JS的兼容问题，把高级的、浏览器不识别的语法，转为低级的，浏览器能够正常识别的语法

---

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 的形式安装。