1. 打包资源

/ 不同文件必须配置不同loader处理;
/ use数组中loader执行顺序：从右到左，从下到上，依次执行
/ resolve用来拼接绝对路径的方法
const {resolve} = require('path')
module.exports = {
  //  入口文件
  entry:'./src/index.js',
  // 输出
  output:{
    //  输出文件名
    filename:'built.js',
    //输出路径  __dirname   node.js的变量，代表当前文件的目录绝对路径
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      // loader的配置
      ]
  },
  plugins:[
      // 详细的plugins的配置
  ],
    // 模式
  mode:'development'  //开发模式
}

1-1. 打包样式（css/less）资源

module:{
    rules:[
     {
          test:/\.css$/, 
          // 使用哪些loader进行处理
          use:['style-loader','css-loader']
      },
      {
          // 将less文件编译成css文件
          test:/\.less$/,
          //  需要下载less-loader和less
          use:['style-loader','css-loader','less-loader']
      },
      ]
},

1-2. 打包html资源

/ html资源在plugins中配置
/ HtmlWebpackPlugin用来打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
    // 详细的plugins的配置
    new HtmlWebpackPlugin({
        template:'./src/index.html'
    })
],

1-3. 打包样式中的图片资源

  module:{
    rules:[
      {
          // 问题：默认处理不了html中的img图片
          // 处理图片资源
          test:/\.(jpg|png|gif)$/,
          // 下载url-loader file-loader
          // 使用一个loader
          loader:'url-loader',
          options:{
              // 图片大小小于8kb，就会被base64处理
              // base64优点：减少请求数量（减轻服务器压力）
              // base64缺点：图片体积会更大（文件请求速度更慢）
              limit:8*1024,
              // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是common.js
              // 解析时会出问题：[object Module]
              // 解决：关闭url-loader的es6模块化，使用commonjs解析
              esModule:false,
              // 给图片进行重命名 [hash:10] 取图片的hash的前10位 [ext] 取文件原来扩展名
              name:'[hash:10].[ext]'
          }
      },
    ]
  },

1-4. 处理html文件中的img图片

module:{
  rules:[
    {
        // 处理html文件中的img图片，(负责引入img，从而能被url-loader进行处理)
        test:/\.html$/,
        loader:'html-loader'
    }
  ]
}

1-5. 打包其他资源

module:{
    rules:[
        //exclude 打包其他资源（除了hrml/css/js之外的资源）
        {
            exclude:/\.(css|js|html)$/,
            loader:'file-loader'
        }
    ]
},