关于前端:Webpack打包图片资源和其他资源以及devServer配置

30次阅读

共计 1139 个字符，预计需要花费 3 分钟才能阅读完成。

在 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: {
  // 我的项目构建后门路
  contentBase: resolve(__dirname, 'build'),
  // 启动 gzip 压缩
  compress: true,
  // 端口号
  port: 3000,
  // 主动关上浏览器
  open: true
}

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

正文完