webpack --- > [4.x]你能看懂的webpack项目初始化

说明:

• 本篇文章主要做如下事情:

1. 创建一个基本的webpack4.x 项目
2. [报错]: The 'mode' option has not been set, webpack will fallback to 'production' for this value
3. [报错]: ERROR in Entry module not found: Error: Can not resolve './src' in 'D:\L-react\HeiMa\01.webpack-base'
4. [插件] :webpack-dev-server
5. [插件] : html-webpack-plugin

• 项目源代码

---

创建基本的 webpack4.x 项目

• 1.快速初始化一个项目: npm init -y
• 2.在项目根目录创建 src源代码目录和dist产品目录
• 3.在 src 目录下创建index.html
• 4.使用 cnpm 安装 webpack,运行cnpm i webpack -D
• 5.使用 cnpm 安装 webpack-cli,运行cnpm i webpack-cli -D

---

webpack常见报错

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

• 原因是缺少mode
• 4.x中新增了mode. production属性,会默认对文件进行压缩.

---

ERROR in Entry module not found: Error: Can not resolve './src' in 'D:\L-react\HeiMa\01.webpack-base'

• 入口文件未找到,在 webpack 4.x 中,不需要配置入口文件, 采用约定大于配置原则. 默认的打包入口路径是 src -> index.js.

• 默认约定了
• 打包入口文件 ./src/index.js
• 打包的输出文件是 ./dist/main.js

---

新建 webpack.config.js

• 向外暴露成员: mopdule.exports or export default

---

配置好模式和入口文件后

• 手动在最开始的页面中引入 js 文件

<script src="../dist/main.js"></script>

---

webpack-dev-server

• cnpm i webpack-dev-server -D
• 每次写完代码手动调用webpack去打包代码太麻烦,因此使用 webpack-dev-server来进行自动打包构建
• 使用 webpack-dev-server启动.
• Project is running at http://localhost:8080: 项目正在8080端口运行(此时是一个小型的服务器)
• webpack output is served from /: 托管的的路径是根路径. 在此项目中即: 01.webpack-base
• 通过webpack-dev-server打包生成的main.js为了提高性能,是放在内存中的.

[所做事情]

1. 保存时,自动打包生成一个main.js在内存中(注意,不是在磁盘)
2. --open: 自动打开浏览器
3. --port 3000: 指定端口
4. --hot: 热更新
5. --progress: 打包记录
6. --compress: 压缩
7. --host 127.0.0.1: 指定主机ip

---

html-webpack-plugin

• cnpm i html-webpack-plugin -D
• 未配置html-webpack-plugin的主页是在磁盘上面的,磁盘的读取速度不如内存
• 使用

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebpackPlugin({
  template: path.join(__dirname, './src/index.html'),   // 源文件
  filename: 'index.html'  // 生成在内存中首页的名称
})

module.exports = {
  mode： 'development',
  plugins: [
    htmlPlugin
  ]
}

[所做事情]:

1. 根据给定模板,在给定路径下生成内存中的主页
2. 会自动添加<script type="text/javacript" src="main.js"></script>

---

小结:

1. 上面2个插件的主要思想是: 减少磁盘相关的操作,利用内存的快速
2. React的虚拟DOM也是使用内存中的对象来描述真实的DOM