webpack由文档可知，基本介绍webpack五个核心概念，之后在开发和生产环境下的运行方式，验证js和json文件

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

由文档可知，webpack是一种前端资源构建工具，是一个静态模块打包器

首先来看一下五个核心概念

就是指入口，指示webpack以哪个文件为入口起点开始打包

就是指输出，webpack打包后的资源bundles输出到哪里去

Loader让webpack能够处理那些非JavaScript文件，因为webpack本身只理解JavaScript

就是指插件，可以用来执行范围更广的任务，其范围包括从打包优化和压缩，一直到重新定义环境中的变量

就是指模式，指示webpack使用相应模式的配置又分为development(开发模式)，能让代码本地测试运行的环境 production模式，能让代码优化上线运行的环境

先来安装webpack两个包

npm i webpack webpack-cli -g

之后进行

npm i webpack webpack-cli -D

在src里创建index.js文件，作为webpack的入口起点文件在该文件里验证一些功能

function fn(x，y){
return x+y;
}
console.log(fn(1,5));

下面我们会说明运行指令

1.开发环境的运行指令:webpack ./src/index.js -o./build/build.js --mode=development 那么webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/build.js 整体打包环境，是开发环境

2生产环境的运行指令:webpack ./src/index.js -o./build/build.js --mode=production 那么webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/build.js` 整体打包环境，是生产环境

运用时直接在对于的html文件里，例如index.html里通过<script src = "./build.js"></script>引入打包后的资源

如果在src文件里新建data.json文件，在里面写入

"name":"goosenough";
"age":18

下面在对应的index.js文件里写入

import data from "./data.json";
console.log(data);

function fn(x，y){
return x+y;
}
console.log(fn(1,5));

运行之后发现可以成功打印运行那么webpack是可以处理js/json文件