• 启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见 ———— 我是不会开启这个的，看不到错误日志，还搞个锤子
• stats: "errors-only" ， 终端中仅打印出 error，注意当启用了 quiet 或者是 noInfo 时，此属性不起作用。 ————— 这个属性个人觉得很有用，尤其是我们启用了 eslint 或者使用 TS进行开发的时候，太多的编译信息在终端中，会干扰到我们。
• 启用 overlay 后，当编译出错时，会在浏览器窗口全屏输出错误，默认是关闭的。还是不要打开了，显示在网页里会看起来心慌
• 

   

   

   clientLogLevel: 当使用内联模式时，在浏览器的控制台将显示消息，如：在重新加载之前，在一个错误           之前，或者模块热替换启用时。如果你不喜欢看这些信息，可以将其设置为 silent (none 即将被移除)。

但是我们一般不会直接将 .map 文件部署到CDN，因为会直接映射到源码，更希望将.map 文件传到错误解析系统，然后根据上报的错误信息，直接解析到出错的源码位置。

还可以设置其他的devtool值，你可以使用不同的值，构建对比差异。

现在我们已经说了 html、js 了，并且也可以在浏览器中实时看到效果了，现在就不得不说页面开发三巨头之一的 css 。

npm install style-loader less-loader css-loader postcss-loader autoprefixer less -D

//webpack.config.js
module.exports = {
    //...
    module: {
        rules: [
            {
                test: /\.(le|c)ss$/,
                use: [‘style-loader‘, ‘css-loader‘, {
                    loader: ‘postcss-loader‘,
                    options: {
                        plugins: function () {
                            return [
                                require(‘autoprefixer‘)({
                                    "overrideBrowserslist": [
                                        ">0.25%",
                                        "not dead"
                                    ]
                                })
                            ]
                        }
                    }
                }, ‘less-loader‘],
                exclude: /node_modules/
            }
        ]
    }
}

//src/index.less
@color: red;
body{
    background: @color;
    transition: all 2s;
}

//src/index.js
import ‘./index.less‘;

body{
    backgroud: url(‘../images/thor.png‘);
}

此处设置 limit 的值大小为 10240，即资源大小小于 10K 时，将资源转换为 base64，超过 10K，将图片拷贝到 dist 目录。esModule 设置为 false，否则， 会出现

将资源转换为 base64 可以减少网络请求次数，但是 base64 数据较大，如果太多的资源是 base64，会导致加载变慢，因此设置 limit 值时，需要二者兼顾。

默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名，例如我上面的图片(thor.jpeg)对应的文件名如下：

//....
use: [
    {
        loader: ‘url-loader‘,
        options: {
            limit: 10240, //10K
            esModule: false,
            name: ‘[name]_[hash:6].[ext]‘
        }
    }
]

 更多的 url-loader 配置可以查看

img src="" />

图片加载OK啦，并且  语法也可以正常使用，吼吼吼~~~
到这里，代码开始报错~~~因为问题比较复杂，所以开了其他帖子写，大家可以参考我的其他报错帖子哦~

虽然，webpack 的默认配置很好用，但是有的时候，我们会有一些其它需要啦，例如，我们不止一个入口文件，这时候，该怎么办呢？

11.入口配置

//webpack.config.js
module.exports = {
    entry: ‘./src/index.js‘ //webpack的默认配置
}

entry 的值可以是一个字符串，一个数组或是一个对象。

字符串的情况无需多说，就是以对应的文件为入口。

为数组时，表示有“多个主入口”，想要多个依赖文件一起注入时，会这样配置。例如:

npm install clean-webpack-plugin -D

//webpack.config.js
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin‘);

module.exports = {
    //...
    plugins: [
        //不需要传参数喔，它可以找到 outputPath
        new CleanWebpackPlugin() 
    ]
}

// 如果有額外的.babelrc配置的話就可以使用這段代碼1
// module.exports = {
//   module: {
//     rules: [
//       {
//         test:/\.jsx?$/,
//         use: [‘babel-loader‘],
//         exclude:/node_modules/  //排除 node_modules目錄
//       }
//     ]
//   }
// }
// 如果有額外的.babelrc配置的話就可以使用這段代碼2
// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼1
//webpack.config.js
// 首先引入插件1
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const isDev = (process.env.NODE_ENV.trim()) === "development"; //html-webpack-plugin 的 config 的妙用4-1
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin‘);//清理dist目錄的插件
const path = require(‘path‘);//設置出口使用
const config = require(‘./public/config‘)[isDev ? ‘dev‘ : ‘build‘];//html-webpack-plugin 的 config 的妙用4-2
module.exports = {
  entry: ‘./src/index.js‘, //webpack的默認配置，也可以寫一個數組
  output: {
    path: path.resolve(__dirname, ‘dist‘), //必須是絕對路徑
    // filename: ‘bundle.js‘,
    // filename: ‘bundle.[hash].js‘,
    filename: ‘bundle.[hash:6].js‘,//考虑到CDN缓存的问题，我们一般会给文件名加上 hash
    publicPath: ‘//127.0.0.1:5500/dist/‘ //通常是CDN地址，例如，你最终编译出来的代码部署在 CDN 上，资源的地址为: ‘https://AAA/BBB/YourProject/XXX‘，那么可以将生产的 publicPath 配置为: //AAA/BBB/
  },
  mode: isDev ? ‘development‘ : ‘production‘,//html-webpack-plugin 的 config 的妙用4-3
  module: {
      rules: [
          {
              test: /\.jsx?$/,
              use: {
                  loader: ‘babel-loader‘,
                  options: {
                      presets: ["@babel/preset-env"],
                      plugins: [
                          [
                              "@babel/plugin-transform-runtime",
                              {
                                  "corejs": 3
                              }
                          ]
                      ]
                  }
              },
              exclude: /node_modules/
          },
          {
            //看清楚啦  這裡有四個loaderloader 的执行顺序是从右向左执行的，也就是后面的 loader 先执行，上面 loader 的执行顺序为: less-loader ---> postcss-loader ---> css-loader ---> style-loader
            test: /\.(le|c)ss$/,
            use: [ 
              ‘style-loader‘, ‘css-loader‘, 
              {
                loader: ‘postcss-loader‘,
                options: {
                  plugins: function () {
                    return [
                      require(‘autoprefixer‘)({
                        ‘overrideBrowserslist‘:[
                          ‘>0.25%‘,‘not dead‘
                        ]
                      })
                    ]
                  }
                }
              }, ‘less-loader‘],
              exclude: /node_modules/
          },
          {
            test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
            use: [
                {
                    loader: ‘url-loader‘,
                    // options: {
                    //     limit: 10240, //10K
                    //     esModule: false 
                    // }
                    // ,
                    // 使用上面的那一段運行後會把圖片名字改為MD5哈希值，使用下面的會保留原有名稱加上六位哈希值
                    options: {
                      limit: 10240, //10K
                      esModule: false,
                      name: ‘[name]_[hash:6].[ext]‘,
                      outputPath: ‘assets‘ //這個可以將打包後的資源放到指定的文件夾下
                  }
                }
            ],
            exclude: /node_modules/
          }
          // {
          //   test: /\.html$/,
          //   use: ‘html-withimg-loader‘
          // },
      ]
  },
  plugins: [
    // 數組，放著所有的webpack插件
    new HtmlWebpackPlugin({
      template: ‘./public/index.html‘,
      filename: ‘index.html‘,
      config: config.template, //html-webpack-plugin 的 config 的妙用4-4
      minify: {
        removeAttributeQuotes: false ,//是否刪除屬性的雙引號
        collapseWhitespace: false, //是否折疊空白
      },
      hash: true //是否加上hash,默認是false
    }),
    new CleanWebpackPlugin() //清理dist目錄插件，不需要傳參數，它自己可以找到outPath
    // new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns:[‘**/*‘,‘!dll‘,‘!dll/**‘]}) //如果你有需要不刪除dll目錄下的文件的話可以這樣子寫
  ],
  devServer: {
    port: ‘3000‘, //默認是8080
    quiet: false, //默認不啟動
    inline: true, // 默認開啟inline 模式，如果設置為false, 開啟 iframe模式
    stats: ‘errors-only‘, //終端僅僅打印 error
    overlay: false, //默認不啟用
    clientLogLevel: ‘silent‘, //日誌等級
    compress: true //是否啟用gzip壓縮
  },
  devtool: ‘cheap-module-eval-source-map‘ //开发环境下使用
}

// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼2