Webpack打包图片资源和其他资源以及devServer配置

打包图片资源

在webpack.config.js文件下添加如下配置

{
    // 处理图片资源
    test: /\.(jpg|png|gif)$/,
    loader: 'url-loader',
    options: {
      // 图片大小小于8kb，就会被base64处理
      // 优点: 减少请求数量（减轻服务器压力）
      // 缺点：图片体积会更大（文件请求速度更慢）
      limit: 8 * 1024,
},

通过你npm命令安装所需的loader
npm i url-loader file-loader -D

注意：通过以上配置只能够打包样式文件中引入的图片资源；处理不了html中img图片

需要安装html-loader，并添加如下配置

{
    test: /\.html$/,
    // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
    loader: 'html-loader',
},

问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
解析时会出问题：[object Module]；在打包后的html文件中的图片引入会出问题
解决：关闭url-loader的es6模块化，使用commonjs解析

关闭url-loader的es6模块化，需要在url-loader配置的options下添加以下内容

esModule: false,

打包后的图片资源的命名会以哈希值的形式，可以通过 name: '[hash:10].[ext]'，对打包后的图片进行重命名
[hash:10]取图片的hash的前10位
[ext]取文件原来扩展名

打包其他资源

对于其他资源打包（除了html/js/css资源意外的资源），例如字体图标等资源

 添加如下内容，排除css/js/html资源，通过name对资源文件进行重命名

{
    exclude: /\.(css|js|html|less)$/,
    loader: 'file-loader',
    options: {
      name: '[hash:10].[ext]'
    }
}

devServer配置

在开发环境中，通常会使用devServer实现自动化编译的过程

开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
特点：只会在内存中编译打包，不会有任何输出

devServer配置如下

devServer: {
  // 项目构建后路径
  contentBase: resolve(__dirname, 'build'),
  // 启动gzip压缩
  compress: true,
  // 端口号
  port: 3000,
  // 自动打开浏览器
  open: true
}

启动devServer指令为：
npx webpack-dev-server
启动后每次更该项目代码后，会自动的对项目文件进行打包编译