1.文件结构
2.初始化，生成 package.json 文件
$ npm init
2.1安装 webpack 和 webpack-cli. (这里使用的是 webpack5 以下的版本)
$ npm i [email protected] [email protected] -g //(全局) $ npm i [email protected] [email protected] -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~
标签：index,src,JSON,js,webpack,build,打包 From： https://www.cnblogs.com/sener/p/16590933.html