webpack的核心概念

一。entry

指定webpack从哪个文件开始入手打包，下面是单入口

多页面开发，每个页面都有自己的js文件，多个文件，所以需要多个入口

我们看看多入口，单出口bundle.js,我们在src仅仅多加了一个 search.js

我们run一下（打包）

多出口写法：

二。loader

了解在哪配置，如何配置loader，webpack本身只能处理js模块（文件）

loader并不是只能只能帮助webpack处理非js文件

为什么包不集成到一起，或者功能不集成到一起，比如为什么不把loader和webpack集成到一起，以及babel为什么那么麻烦一会安装一个一会安装一个包，因为有时候我们仅想使用某些功能，不需要全部，有些浪费资源，电脑奔溃了，分成不同的loader，想用什么功能就加载什么功能

接下来在webpack中使用babel编译代码，把babel和webpack连通的东西就是babel-loader，有了babel-loader ，才能webpack中使用babel编译代码；webpack使用babel-loader借助babel的力量，先把js编译再打包，我们这时候只需要babel/core和babel/preset-env,不需要babel/cli,因为直接在webpack中用，不是直接在命令行中；

使用babel loader

我们继续把webpack初体验的相关文件（圈中）拿过来

这是src下面的index.js文件

①安装webpack的两个包

②安装babel包

先复习一下在cli中babel的使用：

在项目文件夹目录下打开命令行--如果没有package.json文件就要先初始化---根据babel官网指导安装core和cli包---在 package.json 文件中添加执行 babel 的命令

"scripts": {

"build": "babel src -d dist"

src自己创建好，里面放js文件---缺少babel配置文件---安装preset-env包（这个包的作用就是告诉babel具体该怎么转换ES6的语法）---创建.babelrc文件添加{ "presets": ["@babel/preset-env"] }这句代码---执行npm run build即完成了babel的编译（自动创建dist文件夹，里面有个babel.js就是src里面babel.js的编译版）

复习一下webpack的使用：初始化--安装webpack包和webpack/cli包---创建webpack.config.js（默认名）这个文件--配置

---自己创建好src目录下的index.js等文件--在package.json中添加执行webpack的命令