1.文件结构
2.初始化，生成 package.json 文件
$ npm init
2.1安装 webpack 和 webpack-cli. (这里使用的是 webpack5 以下的版本)
$ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -D //(开发)
3. 新建 build 文件夹，用于存放打包生成后的 js 文件。
3.1 新建 src 文件夹，用于存放代码文件。
3.1.1 src 文件夹下，新建 index.js 文件，用于项目的入口文件。
3.1.2 src 文件夹下，新建 data.json 文件 和 index.css 文件。
index.js (文件中引入data.json文件,这次用的打包方式处理不了 css 文件，暂时注释掉)
/* index.js: webpack 入口起点文件 1.运行指令: 开发环境: webpack ./src/index.js -o ./build/built.js --mode=development webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/build.js 整体打包环境，是开发环境 生产环境: webpack ./src/index.js -o ./build/built.js --mode=production webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境，是生产环境 2.结论: 1.webpack 只能处理 js、json 类型文件，不能处理 css/img 等其他资源。 2.生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化。 3.生产环境比开发环境多一个js压缩代码。 */ import data from './data.json' console.log('data:',data) // 不能处理 css/img 等其他资源。 // import './index.css' function add(x,y){ return x+y } console.log(add(1,2));
data.json
{ "name":"zs", "age":18 }
index.css
html,body{ height: 100%; background-color: pink; }
4.执行打包命令：
//开发环境: $ webpack ./src/index.js -o ./build/built.js --mode=development //webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js //生产环境: $ webpack ./src/index.js -o ./build/built.js --mode=production //webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
4.1此时，build 问价夹下生成 built.js 文件
5.预览
5.1 build文件夹下新建 index.html, 并引入 built.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./built.js"></script> </head> <body> </body> </html>
浏览器中打开 index.html
end~