babel:处理浏览器兼容的问题。
一、使用webpack进行工程化开发：
1、需要在本地先全局安装webpack工具。（打开cmd)
如何查看 webpack -v 移除：npm remove webpack
（1）、安装：npm install webpack@4 -g (-g:全局安装)
（2）、安装： npm install webpack-cli@3 -g
2、在当前项目中安装webpack。要想使用webpack，当前项目必须是一个包文件。
（1）、先在当前项目里面初始化一个包的描述文件。(打开集成终端）
npm init -y
(2）、再安装webpack和webpackm-cli。
npm install webpack@4 -D (-D:开发环境依赖)
npm install webpack-cli@3 -D
二、使用webpack打包js文件
1、新建一个入口文件：main.js。（所有需要执行的文件，都应该在入口文件中引用）
2、新建一个webpack.config.js：是webpack的配置文件。
（1）、注意：这里面只能使用commonjs模块化的规范
（2）、需要引入path模块（node.js的内置模块。用于处理路径。）
const path = require('path')
(3)、导出一个对象
module.exports={
}
对象里面有五个核心的配置
1、入口(entry:''):整个项目必须要指定一个打包的入口文件。
modules.exprots={
entry: './src/main.js',
}
2、出口。项目打包后输出的目录。
module.exports={
entry: './src/main.js',
output: {
// 打包后的文件名。
filename:'app.js',
// 打包文件的输出路径。__dirname:全局变量返回的是当前项目的绝对路径。dist：是打包后文件保存的目录(自定义)
// resolve:用于路径拼接。
path:path.resolve(__dirname, "dist"),
},
}
3、Looder
4、 plugins
5、模式(mode)：采用什么方式打包。有两种方式：1、开发模式(development)：保留完整代码以及调试代码。2、生产模式(production):会对打包之后的代码进行压缩。最终使用生产模式打包。
modules.exports = {
// 五个核心的配置项:
// 1、入口
entry: './src/main.js',
// 2、出口
output: {
// 打包后的文件名。
filename:'app.js',
// 打包文件的输出路径。__dirname:全局变量返回的是当前项目的绝对路径。dist：是打包后文件保存的目录(自定义)
// resolve:用于路径拼接。
path:path.resolve(__dirname, "dist"),
},
// 3、Looder
//4、 plugins
//5、 模式(mode)
mode:'development'
}
（4）、在集成终端中输入：webpack 会根据设置的模式自动导出文件。自动生成dist目录。目录里面是js文件。
在需要引用整个文件的页面中直接引入就好了
<script src="./app.js"></script>
三、打包css文件
1、由于webpack默认处理的是js文件和json文件。因此在处理其他文件的时候，需要下载相应的加载器。
-D:开发环境依赖
npm install css-loader@3.4.2 -D
npm install style-loader@1.1.3 -D
2、用来处理css文件。两者需要配合使用.
3、loader：加载器（也可以理解为翻译官）用来识别各种文件。通过module选项，是Loader加载器的一个选项。配置加载器
module:{
},
4、rules：规则模块，是一个数组（因为可能要处理很多的文件。所以在rules选项中配置具体的加载器，（用来配置loader、解析器等选项）
module:{
rules:[
]
},
5、每种文件的处理，通过一个对象去设置。每个对象处理一种 文件。
module:{
rules:[{
}
]
},
6、test：指定文件的格式。这个里面是一个正则格式 / $/i i：忽略大小写。
module:{
rules:[
{
test:/\.css$/i,
}
]
},
7、use：处理该文件，使用到了哪些loder。这里我们使用到了style-loader和css-loader。
注意：Loader的加载顺序是从右向左加载的。所以，一定要先写style-loader再写css-loader。
style-loader：用于将css文件以模块化方式导入到js中。
css-loader：用于将js中的css代码，以style标签的方式嵌入到网页中。
module:{
rules:[
{
test:/\.css$/i,
use: ["style-loader", "css-loader"],
}
]
},
8、使用。
先在入口的js文件中导入此文件（impor '文件地址')。然后再在集成终端输入（webpack）自动生成一个总的js文件。最后在需要引用的页面中引用（<script src="文件地址"></script> ）此文件就可以了。
四、使用webpack打包时生成html文件
1.安装插件
npm install html-webpack-plugin@3.2.0 -D
由于plugins是一个插件(是一个数组).所以安装完之后需要引用方可使用.
2.引入.
// 引入深层html页面的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
3.配置plugins插件.
plugins:插件.功能比loader强大,用来处理复杂的业务.配置选项是数组类型(表示可以使用很多插件)
plugins: [ ],
有两种方法配置html文件
(1).自动新建一个html文件,并自动将js文件引入.
plugins: [
new HtmlWebpackPlugin()
],
(2)指定一个html文件,作为页面模板被创建
新建一个文件夹(public:静态资源目录)
plugins: [
new HtmlWebpackPlugin({
template:`./public/index.html`
})
],
4.使用.直接在集成终端运行webpack即可.
五、使用webpack打包图片文件
1.新建一个图片文件夹.把需要的图片放进去.
2.在min.js文件中导入
(1).导入图片资源
import i1 from './img/1.jpg'
(2).创建三个图片对象
let img1=document.createElement('img')
img1.src=i1
(3).获取容器
let app=document.getElementById('app')
(4).将图片添加到容器内
app.appendChild(img1)
3.安装包
npm install file-loader@5.0.2 -D
4.设置选项.在module的rules里面设置.
(1).因为是一个对象处理一种文件,所以新建一个对象.
(2).设置test
{
test:/\.(png|jpg|gif)$/i,
}
(3).设置use
{
test:/\.(png|jpg|gif)$/i,
use:['file-loader']
}
重新在集成终端上运行webpack.就自动把图片打包.
但是这样存在一个问题,无论图片的大小,都统一打包到了根路径下面.
小图片直接打包在app.js文件
3.安装包
npm install url-loader@3.0.0 -D
4.设置选项.在module的rules里面设置.
(1).因为是一个对象处理一种文件,所以新建一个对象.
(2).设置test.
{
test:/\.(png|jpg|gif)$/i,
}
(3).设置use.里面是一个对象.
loader:指定具体的loader.
options:选项.配置该loader的选项.
limit:超过指定大小的图片直接参与打包.否则直接转为base64编码.单位是字节.打包到js文件里.
base64编码:一种用64个字符来表示任意二进制数据的方法。它是一种编码方式，而非加密方式。它通过将二进制数据转变为64个“可打印字符”，完成了数据在HTTP协议上的传输。
test:/\.(png|jpg|gif)$/i,
use:[{
loader: 'file-loader',
options: {
limit:1024*4 //超过4kb大小的图片参与打包
},
}]
