loader: 'url-loader', //使用url-loader处理
query: {
limit: 10000, //字体文件小于1000字节的时候处理方式
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') //文件名为name.7位hash值.拓展名
}
}
]}
注: 关于query 仅由于兼容性原因而存在。请使用 options 代替。
webpack.dev.conf.js
开发环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
module.exports = merge(baseWebpackConfig, {}）模块配置
module: {
//通过传入一些配置来获取rules配置，此处传入了sourceMap: false,表示不生成sourceMap
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
}在util.styleLoaders中的配置如下
exports.styleLoaders = function (options) {
var output = [] //定义返回的数组，数组中保存的是针对各类型的样式文件的处理方式
var loaders = exports.cssLoaders(options) // 调用cssLoaders方法返回各类型的样式对象(css: loader)
for (var extension in loaders) { //循环遍历loaders
var loader = loaders[extension] //根据遍历获得的key(extension)来得到value(loader)
output.push({ //
test: new RegExp('.' + extension + '$'), // 处理的文件类型
use: loader //用loader来处理，loader来自loaders[extension] })
}
return output
}
上面的代码中调用了exports.cssLoaders(options),用来返回针对各类型的样式文件的处理方式,具体实现如下
exports.cssLoaders = function (options) {
options = options || {} var cssLoader = {
loader: 'css-loader',
options: { //options是loader的选项配置
minimize: process.env.NODE_ENV === 'production', //生成环境下压缩文件
sourceMap: options.sourceMap //根据参数是否生成sourceMap文件
}
}
function generateLoaders (loader, loaderOptions) { //生成loader
var loaders = [cssLoader] // 默认是css-loader
if (loader) { // 如果参数loader存在
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, { //将loaderOptions和sourceMap组成一个对象
sourceMap: options.sourceMap
})
})
}
if (options.extract) { // 如果传入的options存在extract且为true
return ExtractTextPlugin.extract({ //ExtractTextPlugin分离js中引入的css文件
use: loaders, //处理的loader
fallback: 'vue-style-loader' //没有被提取分离时使用的loader
})
} else {
return ['vue-style-loader'].concat(loaders)
