// url-loader:和file-loader类似,不过他能将比limit小的图片转成base64,limit以上依然由file-loader来解析
module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], }, ], }, }; // style-loader | css-loader | sass-loader module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings 'style-loader', // Translates CSS into CommonJS 'css-loader', // Compiles Sass to CSS 'sass-loader', ], }, ], }, };
hash摘要
Hash 文件名(vendor.f02bc2.js)是实现持久化缓存的第一步,目前 webpack 有两种计算 hash 的方式:
- 计算所有 chunks 的 hash —— [hash]
- 为每个 chunk 计算 hash —— [chunkhash]
第一种是每次编译生成一个唯一 hash,适合 chunk 拆分不多的小项目,但所有资源全打上同一个 hash,无法完成持久化缓存的需求。
第二种是 webpack 为每个 chunk 资源都生成与其内容相关的 hash 摘要,为不同的资源打上不同的 hash。
===============================================================================
image打包之后的文件名
[hash]生成32位的随机数,[hash:7]指定了hash的位数