webpack5学习前言_2配置webpack环境

该代码已上传github,想学习请自行下载

一、node与webpack的联系
webpack 是运行在node之上，且node目前只识别 Commonjs 语法，所以要配置 webpack 识别 ES6 语法

二、文件目录：
1、截图：

2、解释说明：
webpack_code # 系类文件路径（所有指令必须在这个目录运行）
├──── webpack_1 # webpack学习前言_2配置webpack环境
│ ├──── package_1 # Commonjs 语法文件
│ │ ├──── introduce.md # Commonjs 语法文件文件介绍
│ │ ├──── src # 该文件主要代码存放路径
│ │ │ ├──── js # 存放js代码文件
│ │ │ │ ├──── sum.js # 求和代码文件
│ │ │ ├──── main.js # package_1文件的代码主入口
│ ├──── package_2 # ES6 语法文件
│ │ ├──── introduce.md # ES6 语法文件文件介绍
│ │ ├──── src # 该文件主要代码存放路径
│ │ │ ├──── js # 存放js代码文件
│ │ │ │ ├──── sum.js # 求和代码文件
│ │ │ ├──── main.js # package_2文件的代码主入口

三、代码说明：
1、Commont 语法内容

// Commont 语法
// 路径：webpack_1\package_1\src\js
// 作用：使用Commont 语法导出求和函数
module.exports.sum = (...args) => {
  return args.reduce((p, c) => p + c, 0);
}

// 路径：webpack_1\package_1\src\main.js
// 作用：使用模块导出的sum方法
const { sum } = require("./js/sum")
console.log(sum(1, 2, 3, 4));

运行结果：成功

2、Es6 语法内容——不能直接运行，需要配置webpack环境

// Es6 语法
// 路径：webpack_1\package_2\src\js
// 作用：使用 Es6 语法语法导出求和函数
export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

// 路径：webpack_1\package_2\src\main.js
// 作用：使用模块导出的sum方法
import sum from "./js/sum.js";
console.log(sum(1, 2, 3, 4));

运行结果：显示语法报错

四、配置 webpack 的 es6 环境(直接使用webpack，也可以自行配置Babel):

• 初始化package.json

  npm init -y
  

  需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

• 下载依赖

  npm i webpack webpack-cli -D
  

• 启用 webpack

  开发模式

  npx webpack ./src/main.js --mode=development
  

  生产模式

  npx webpack ./src/main.js --mode=production
  

  npx webpack: 是用来运行本地安装 Webpack 包的。

  ./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

  --mode=xxx：指定模式（环境）。

五、直接使用webpack的生产或开发打包文件命令，并运行

六、git源码仓库：
https://github.com/Dreamljy/webpack_code