webpack配置（第五步：less/css篇（url图片篇））

摘要: 通过配置url-loader加载器，将less/css文件引入的图片归纳生成

下载url-loader

$ cnpm install file-loader url-loader --save-dev

webpack.config.js

const path = require('path');

let htmlwebpackplugin = require('html-webpack-plugin');//引入html-webpack-plugin插件
let get_html = function(name,chunk){//封装
return {
template: './app/ejs/generate/'+ name + '.ejs',
filename:  name+ '.html',
chunks  : ['main',chunk||null],//这里引入公共文件main.js，另外一个文件按需引入，当然也可以把这个的值设为数组，传入function的第二个值用数组就行
chunksSortMode: 'manual',//将chunks按引入的顺序排序
inject  : true,//所有JavaScript资源插入到body元素的底部
hash    : true,
xhtml	: true
}
};

//配置css、less文件入口
let ExtractTextPlugin = require('extract-text-webpack-plugin');

let export_html= {
entry:  {
main:__dirname+"/app/js/main.js",//入口文件
main1:__dirname+"/app/js/main1.js",//入口文件
},
output: {
path: __dirname+"/_build/",
filename: "js/[name].js",//产出文件，name根据entry的入口文件键名定
},
module: {
loaders: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
,
{
test: /\.ejs$/,
loader: 'ejs-loader?variable=data'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
publicPath: "../../_build/",
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
publicPath: "../../_build/",
fallback: "style-loader",
use: [
{
loader: "css-loader"
},
{
loader: "less-loader"
}
]
})
},
{
test: /\.(png|gif|jpg|jpeg|bmp|svg)/,
use:[
{
loader: "url-loader",
options: {
limit: 8192,
name: path.posix.join('static', './css_img/[hash:8].[name].[ext]')
}
}
]
}
]
}
,
plugins: [
new ExtractTextPlugin("./css/[name].css"),
//new一个模板出来测试一下
　　		new htmlwebpackplugin(get_html("home","main1"))
]

};
module.exports=export_html;

可以对比一下，这次引入的文件只是在loaders里面加入了

,
{
test: /\.(png|gif|jpg|jpeg|bmp|svg)/,
use:[
{
loader: "url-loader",
options: {
limit: 8192,
name: path.posix.join('static', './css_img/[hash:8].[name].[ext]')
}
}
]
}

path.posix.join('static', './css_img/[hash:8].[name].[ext]')，

括号内的内容：static:是生成文件的主目录，第二个值是生成文件的位置（产出目录下面）

目录结构



app目录下新建static目录，再建css_img，其下放入图片

style.less

@f:white;
p{
color: red;
}
p{
width: 100%;
height: 100px;
background: url(../static/css_img/32132131.jpg) no-repeat center center;
background-size: 100%;
a{
color: @f;
}
}

产出文件后的结构



可以看见，在_build目录下生成了编写的文件

main.css

p {
color: red;
}
p {
width: 100%;
height: 100px;
background: url(../../_build/static/css_img/183f148e.32132131.jpg) no-repeat center center;
background-size: 100%;
}
p a {
color: white;
}

浏览器打开home.html



成功！