乐趣区

关于前端: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
启动后每次更该我的项目代码后,会主动的对我的项目文件进行打包编译

退出移动版