打包图片资源

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