由于一些原因，我卸载了之前安装的webpack3.6.1，重新安装了webpack4.41.6的版本

注意：

npm install webpack -g 之后，还要安装 npm install webpack-cli -g

在本地项目亦是如此。

在网上看到：

webpack4 默认不需要再创建webpack.config.js来配置打包的入口和出口；

默认情况下，

入口为./src/index.js文件

出口为./dist/main.js文件

这一点我自己还暂未去试。

接下来进入这次记录的正题：

（一）webpack中url-loader的使用

默认情况下，webpack无法处理css文件中的url地址，不管是图片还是字体库，只要是url地址，都处理不了。需要借助第三方loader。

1.安装loader

cnpm i url-loader file-loader -D

2.配置规则

module:{//这个节点用于配置所有第三方模块加载器
    rules:[//所有第三方模块的匹配规则
        {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
        {test:/\.less/,use:['style-loader','css-loader','less-loader']},
        {test:/\.scss/,use:['style-loader','css-loader','sass-loader']},
        {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=7631&name=[hash:8]-[name].[ext]']}
        //处理图片路径的loader
        //limit 给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或者等于给定的limit值，则不会被转为base64格式的字符串，
        // 如果，图片小于给定的limit值，则会被转为base64的字符串
    ]
}

（二）webpack中使用url-loader处理字体文件

例如：我们使用了bootstrap的字体文件

（1）首先安装bootstrap：

cnpm i bootstrap -S

（2）现在boostrap的css里删除了图标，分开了

4.x版本icon文件分离出去了，所以还需要下载open-iconic：

npm i https://github.com/iconic/open-iconic.git -D

（3）在mian.js引入css

import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'

（4）在webpack.config.js配置规则

{ test: /\.(ttf|eot|svg|woff|woff2|svg|otf)$/, use: 'url-loader' } // 处理 字体文件的 loader

（三）webpack中babel的配置

在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的 ES6 语法或者 ES7 语法，webpack 是处理不了的，这时候，就需要借助第三方的 loader，来帮助 webpack 处理这些高级的语法

（1）在 webpack 中，运行如下两套命令，安装 Babel 相关的loader 功能。

         cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

         cnpm i babel-preset-env babel-preset-stage-0 -D

（2）打开webpack.config.js文件，在module节点下的rules数组中，添加一个新的配置规则：

         {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

（3）在项目根目录中，新建一个 .babelrc 的配置文件，写如下配置：

（注意：这个配置文件属于 json 格式，所以在写配置的时候，必须符合json语法规范，不能写注释，字符串必须用双引号。）

 { "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] }



注意：
    在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
1.如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
2.哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！

webpack.config.js配置如下：

module: { // 配置所有第三方loader 模块的
  rules: [ // 第三方模块的匹配规则
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
    { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
    { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
    // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
    { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
  ]
}