1.`ES6` 或者更高级的语法转化为 `ES5` (babel)

1.安装 babel-loader：转换加载器，和 babel/core（babel 的核心），和babel/preset-env (转化模块)

yarn add babel-loader @babel/core @babel/preset-env

2.安装完成之后，在配置文件中配置 js规则：

 {
                test: /\.js$/,
                use:{
                    loader: 'babel-loader',
                    options: { // 用 babel-loader，需要把 es6 转换为 es5
                        presets: [  //预设库
                            '@babel/preset-env'  //包含把es6转换为es5的模块
                            '@babel/preset-react' //解析 react语法
                        ]
                    }
                }
            },

//配置完成后就可以解析 `es6` 语法。 
   
//更高一级的语法的配置：(注意：先安装完在配置)
   
   {
                   test: /\.js$/,
                   use:{
                       loader: 'babel-loader',
                       options: { // 用 babel-loader，需要把 es6 转换为 es5
                           presets: [  //预设库
                               '@babel/preset-env'  //包含把es6转换为es5的模块
                           ],
                           plugins: [
                               //更高级的语法解析（如装饰器写法）
                          ["@babel/plugin-proposal-decorators", { "legacy": true }],
                          ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                           ]
                       }
                   }
               },

2.`ES6` 或者更高级的语法转化为 `ES5` 常用插件：

@babel / plugin-transform-runtime (可以处理异步，如 Promise等)代码运行时的包开发依赖：

yarn add @babel / plugin-transform-runtime -D 先进行插件的安装
@babel/runtime : 这个包上线时需要，所以安装时不要加 -D

yarn add @babel/runtime
安装好之后，进入到配置文件中配置安装好的插件：

		{
                test: /\.js$/,
                use:{
                    loader: 'babel-loader',
                    options: { // 用 babel-loader，需要把 es6 转换为 es5
                        presets: [  //预设库
                            '@babel/preset-env'  //包含把es6转换为es5的模块
                        ],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                            "@babel/plugin-transform-runtime"  //加入到这个位置
                        ]
                    }
                },
                include:path.resolve(__dirname,'src'), //找 src下面的 js
                exclude:/node_modules/  //不包含 node_modules 下面的 js
            },

默认找到的是全部的 js，我们还得写一些规则来让它只找 src 下面的 js文件。

4.还有一些更高级的语法不支持转换，安装一个补丁模块：

yarn add @babel/polyfill 这个模块在代码运行时需要，所以安装时不要加 -D。

用的时候需要在上面引入这个模块： require('@babel/polyfill')

3.JS校验：（校验器：eslint）

需要先安装 eslint 和 eslint-loader：

yarn add eslint eslint-loader -D
然后在配置文件中的模块配置中去配置 js 规则:

	{
            	//在配置一个 js 规则，用来校验 js
                test: /\.js$/,
                use: {
                    loader: 'eslint-loader',
                    options: {
                        enforce: 'pre' // 强制  强制在下一个 loader 之前执行  post 是后面
                    }
                }
            },
            {
                test: /\.js$/,
                use:{
                    loader: 'babel-loader',
                    options: { // 用 babel-loader，需要把 es6 转换为 es5
                        presets: [  //预设库
                            '@babel/preset-env'  //包含把es6转换为es5的模块
                        ],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                include: path.resolve(__dirname, 'src'), // 包含 src 下面的 js 文件
                exclude: /node_modules/  // 去除掉 node_modules
            },

4.全局变量引入问题（第三方模块的使用）：

loader 的类型：pre 前面执行的 loader， normal 普通 loader，内联 loader，post 后置 loader。

用 jquery 举例说明：

>>>>> 内联 loader，就是在代码中就可以直接使用的 loader。

1. 先安装 jquery ， yarn add jquery

2. 在代码中引入：import $ from 'jquery'

3. 将 $ 符暴露到全局去：那么这就需要一个暴露全局的 loader：expose-loader ，这个loader是内联的。

import $ from 'expose-loader?$!jquery'

这是内联 loader 在代码中的直接用法。 jquery 暴露出一个 $ 符到全局。

也可以在配置文件中去配置内联 loader：

module: { //模块
        rules: [ //规则   
            {
                test: require.resolve('jquery'), //只要引用了 jquery 就去匹配
                use: 'expose-loader?$'
            },
        ]
}

注解的方式：在每个模块中注入 $ 对象：

这个时候需要 webpack 的插件：先要引入 webpack
```
let webpack = require('webpack')
```
然后在配置文件的插件配置中去配置：

new webpack.ProvidePlugin({  // 在每个模块中都注入 $ （提供插件）
           $:'jquery'
       })

在模板中直接引入 jquery 的 cdn ,但是这样在打包的时候会将 jquery 一起打包，这个时候需要在配置文件中添加一个属性来不打包 jquery ：
```
// 表明这是外部引入的，并不需要打包。
externals: {
jquery: '$' 
}
```

5.`webpack` 打包图片：

在 `js` 中创建图片来引入：

// 1）在 js 中创建图片来引入
let image = new Image()
image.src = './logo.png' //就是一个普通的字符串
document.body.appendChild(image)

这样来引入的话，找不到这张图片，因为这样写的话图片只是一个普通的字符串。要用es6的语法来导入图片.

import logo from './logo.png' //把图片引入，返回的结果是一个新的图片地址
let image = new Image() 
console.log(logo)
image.src = logo
document.body.appendChild(image)

这样写的话是不支持的，需要引入一个 loader 来实现这种写法：file-loader 。

安装完成 loader 之后，我们需要到配置文件中去配置加载图片的规则：

module: { //模块
        rules: [ //规则   
            {
                test: /\.(png|jpg|gif)$/,
                use: "file-loader"
            },
        ]
}

在 `css` 中引入图片：

background: url('图片地址') /* 可以直接这样来写，这是默认支持的，因为我们用了 css-loader css-loader会吧这个转化为 require()这种写法*/

在 `html` 中直接引入

<img src="./logo.png" alt="">

这样写会报错，因为在我们打包的文件中根本找不到这张图片。这个时候我们需要一个 loader 来支持这种写法。

yarn add html-withimg-loader -D 这个 loader 会帮我们解析 html 编译图片.

安装完成之后到配置文件中配置我们的 loader：

module: { //模块
        rules: [ //规则   
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            },
        ]
}

一般我们用于图片的loader 不是用 file-loader，而是用 url-loader

			{
                test: /\.(png|jpg|gif)$/,
                use: {
                    // 做一个限制，当我们的图片 小于多少k的时候 用base64 来转换
                    // 否则用 file-loader 来产生真实的图片
                    loader: "url-loader",
                    options: {
                        limit: 1
                    }
                }
            },

6.打包文件分类

图片放到 `img` 文件夹下面：

在配置文件中的图片规则中加上一个输出的路劲：

 		{
                test: /\.(png|jpg|gif)$/,
                use: {
                    // 做一个限制，当我们的图片 小于多少k的时候 用base64 来转换
                    // 否则用 file-loader 来产生真实的图片
                    loader: "url-loader",
                    options: {
                        limit: 1,
                        outputPath: 'img/' //这样打包的图片就会放到 img 文件夹下面
                    }
                }
            },

这样就会把图片生成到 img 文件夹下面。

`css` 文件生成到 `css` 文件夹下面：

在配置文件中，压缩 css 的插件中加入路径：

new MiniCssExtractPlugin({
            filename:'css/main.css', //抽离出来的css的文件的名字
        }),

如何在引用资源的时候加上一个域名，在输出的时候加上一个公共的路径：

 output: {  //出口
        filename: 'bundle.js', //打包后的的文件名
        path: path.resolve(__dirname, 'build'),  
        publicPath: 'http://www.fanqiang.com' //加上一个公共的路径
    },

这样的话引用的资源（css，js，img等）都会加上公共的路径。

如果你只想要给某一个资源前面加上公共的路径，比如图片上面加上公共路径，那么就不要在出口中写，只需要在图片规则中定义即可

{
                test: /\.(png|jpg|gif)$/,
                use: {
                    // 做一个限制，当我们的图片 小于多少k的时候 用base64 来转换
                    // 否则用 file-loader 来产生真实的图片
                    loader: "url-loader",
                    options: {
                        limit: 1,
                        outputPath: '/img/',
                        publicPath: 'http://www.fanqiang.com' //公共路径
                    }
                }
            },

自学 webpack4.x 基础篇---webpack 解析ES6及打包图片

1.ES6 或者 更高级的语法 转化为 ES5 (babel)

2.ES6 或者 更高级的语法 转化为 ES5 常用插件：

3.JS校验：（校验器：eslint）

4.全局变量引入问题（第三方模块的使用）：

5.webpack 打包图片：

在 js 中创建图片来引入：

在 css 中引入图片：

在 html 中直接引入