課程
/前端開發(fā)
/前端工具
/webpack深入與實戰(zhàn)
如題
<div class="layer">
<img src="${require('../../assets/a.jpg')}" alt="">
<div>this is a layer</div>
</div>
2017-04-05
源自:webpack深入與實戰(zhàn) 4-7
正在回答
var?htmlWebpackPlugin?=?require('html-webpack-plugin'); var?path?=?require('path'); module.exports?=?{ ?entry:?'./src/app.js', ?output:?{ ??path:?path.resolve(__dirname,?'./dist/js'), ??filename:?'js/[name].bundle.js' ?}, ?module:?{ ??loaders:?[ ??? ???{ ????test:?/\.tpl$/, ????loader:?'ejs-loader' ???}, ???{ ????test:?/\.html/, ????loader:?'html-loader' ???? ???}, ???{ ????test:?/\.less$/, ????use:?[ ?????'style-loader', ?????{ ??????loader:?'css-loader', ??????options:?{ ???????importLoaders:?1 ??????} ?????}, ?????{ ??????loader:?'postcss-loader', ??????options:?{ ???????plugins:?(loader)?=>?[ ????????require('postcss-import')({root:?loader.resourcePath}), ????????require('autoprefixer')(),?//CSS瀏覽器兼容 ????????require('cssnano')()??//壓縮css ???????] ??????} ?????}, ?????{ ??????loader:?'less-loader' ?????} ????] ???}, ???{ ????test:?'/\.js$', ????loader:?'babel-loader', ????exclude:?path.resolve(__dirname,?'./node_modules'),?//排除那些文件不打包?include?制定打包那些 ????query:?{ ?????presets:?['latest'] ????} ???}, ???{ ????test:?/\.css$/, ????use:?[ ?????'style-loader', ?????{ ??????loader:?'css-loader', ??????options:?{importLoaders:?1}?//這里可以簡單理解為,如果css文件中有import?進來的文件也進行處理 ?????}, ?????{ ??????loader:?'postcss-loader', ??????options:?{???????????//?如果沒有options這個選項將會報錯?No?PostCSS?Config?found ???????plugins:?(loader)?=>?[ ????????require('postcss-import')({root:?loader.resourcePath}), ????????require('autoprefixer')(),?//CSS瀏覽器兼容 ????????require('cssnano')()??//壓縮css ???????] ??????} ?????} ????] ???}, ???{ ????test:?/\.(png|jpg|gif|svg)$/i, ????loaders:?[ ?????'url-loader?limit=20000&name=assets/[name]-[hash:5].[ext]', ?????'image-webpack-loader' ????] ????//?loader:?'url-loader',?//file-loader ????//?query:?{ ????//???limit:?20000, ????//???name:?'assets/[name]-[hash:5].[ext]' ????//?} ???} ??] ?}, ? ?plugins:?[ ??new?htmlWebpackPlugin({ ???filename:?'index.html', ???template:?'index.html', ???inject:?'body'?????//將js文件插入body文件內 ??}), ?] };
<div?class="layer"> ????<img?src="${require('../../assets/bg.jpg')}"?alt=""> ????<div>this?is<%=?name?%></div> ????????<%?for?(var?i?=?0;?i?<?arr.length;?i++){?%> ????????<%=?arr[i]?%> ????????<%?}?%> ????</div> ????另外看看是不是webpack.config.js配置寫錯了。
webpack里不用$ require語法了??梢灾苯觟mg標簽就插入的。
看看圖片路徑是否正確。。
舉報
webpack實戰(zhàn)教程,用真實項目帶你探索 webpack 強大的功能
1 回答在模板引擎里,圖片解析不來????
2 回答模板引擎問題
3 回答使用<%=>是否要先安裝模板引擎呢
1 回答jade模板下的圖片路徑
2 回答json文件解析出錯,怎么改
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2017-05-18
2017-05-18
2017-05-14
webpack里不用$ require語法了??梢灾苯觟mg標簽就插入的。
2017-04-13
看看圖片路徑是否正確。。