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的命令

---npm run webpack---会默认创建一个dist文件夹，然后里面有一个bundle.js，这就是打包后的，代码是经过压缩混淆的；

 

在webpack中使用babel的步骤

 

配置babel

接下来配置loader，凡是和webpack相关的配置都要在webpack的配置文件中配置，loader也在webpack的配置文件中配置

test后面跟正则，表面想要在哪些文件上使用babel loader

这时如果运行npm run webpack，则会去匹配项目目录下的所有js文件

运行npm run webpack

babel编译好后再交给webpack去打包，步骤和webpack初体验一样；

 

但是对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都还是不能直接编译，此时我们还是需要引入其他的模块；

 

下面就是我们要引的模块：这个模块帮我们实现ES6新增对象，api等，让浏览器兼容

通过import导进来

把dist删了再次编译打包（run），打包最终的文件，ES6语法 ，新增api，promise，Array.from,Object.assign都被转换成ES5,浏览器也都能兼容了

 

三。plugins

 

如何在webpack中配置插件

我们把webpack包安装一遍

接着安装plugin包

在webpack配置文件中配置，在配置文件中将这个包引入

HtmlWebpackPlugin是类或者说是构造函数

执行npm run webpack