图片，html,和其他的打包（2）

html

html-webpack-plugin

作用： 默认创建一个空的THML

           自动引入打包输出的所有资源

配置：

plugins:[

  new HtmlWebPackPlugin({

     template: './src/index.html' // 把这个文件复制，并自动引入打包，输出的所有资源（可以自定义）

  })     

]

图片

rules:[

// 在less 中引入img,在把less导入

// 多个loader用 use

{

  test: /\.less$/,

  use:['style-loader', 'css-loader', 'less-loader' ]

}，

{

  test:/\.(jpg|png|gif)$/,

  loader: 'url-loader', // url-loader 依赖 file-loader，所以都要下

  options:{

     limit: 8 * 1024,  // 超过8kb，base64处理，一般小于8-12kb

     // 优点：减少请求量

    // 缺点： 图片体积变大

    esModule:false

 },

// 在html中直接引入img

// url-loader 解决不了html中直接引入图片的问题，用html-loader，这个是负责引入img的（不知道问什么要用html做名字）

//url-loader是 ES6模块解析，html-loader是commonJS，要关闭es6

{

  test:/\/html/,

  loader: 'html-loader'

}

}

]

 

打包其他

module:{

  rules:[

// 其他打包用file-loader

  exclude:/\/(css|JS|html|less)$ ///自定义，除掉这些

  options:{name: [hash:10].[ext]}

                            |                |

          //取hash前10个      // 后缀还是原来的

]

}