下载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;
}
}
产出文件后的结构
扫描二维码关注公众号,回复:
173212 查看本文章
可以看见,在_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
成功!