webpack多页⾯，动态⽣成模板并插⼊对应的js（代码分析）1、⼯具代码分析(utils.js)
var path =require('path')
var glob =require('glob')
/**
* 读取指定路径下的⽂件
* @param {String} glob 表达式
* @param {String} base 基础路径
*/
var entries ={}
glob.sync(globPath).forEach(function(entry){
/
/获取对应⽂件的名称
var moduleName = entry.match(/(\w+).\w+$/)[1];
if(base){
let temp= lative(base,entry)
ame(entry),'')
console.log(moduleName);
}
//moduleName 去掉第⼀次出现的replaceed字符串，并去掉所有‘\’
if(replaceed){
let idx=moduleName.indexOf(replaceed)
if(idx>=0){
let pre= moduleName.substring(0,idx)
let after = moduleName.substring(idx+replaceed.length).replace(/^[\\\/]*/,'')
moduleName=pre+after
}
}
//对象key中，‘\’替换成‘/’，以便插⼊的代码路径是‘/’
moduleName = place(/\\/g,"\/");
entries[moduleName]= entry
})
return entries;
}
网站底部代码js特效2、webpack配置⽂件（fig.js）
var path =require('path');
var webpack =require('webpack');
var HtmlWebpackPlugin =require('html-webpack-plugin');//html模板⽣成器
var CleanPlugin =require('clean-webpack-plugin');// ⽂件夹清除⼯具
var CopyWebpackPlugin =require('copy-webpack-plugin');// ⽂件拷贝
var utils =require('./utils.js');
var glob =require('glob')
//当前⼯作⽬录的绝对路径
var ROOT_PATH= solve(__dirname);
//要打包的源代码路径
var RESOURCES_PATH= solve(ROOT_PATH,'resources');
//设置要打包的js⽂件为⼊⼝⽂件
var entrys = Entries(path.join(RESOURCES_PATH,'/static/js/**/*.js'), path.join(RESOURCES_PATH,'/static/js'));
var webpackConfig ={
entry: entrys,
output:{
path: solve(__dirname,'dist'),
//插⼊的js后⾯跟上chunkhash（⽂件修改后，chunkhash会变换）
filename:'static/js/[name].js?v=[chunkhash:7]',
},
module:{
loaders:[
{     
test:/\.html$/,
loader:'html',//处理html中图⽚的打包后路径问题　
loader:'html',//处理html中图⽚的打包后路径问题　
query:{
minimize:false
}
}]
},
plugins:[
/
/ 清空dist⽂件夹
new CleanPlugin(['dist']),
//复制不改动的⽂件到对应的地址
new CopyWebpackPlugin([{
from:'./resources/static/lib',
to:'./static/lib'
}
])
]
}
//读取html⽂件，⽣成多个html，并把对应的js插⼊对应页⾯
let pages = Entries(path.join(RESOURCES_PATH,'/templates/**/*.html'), path.join(RESOURCES_PATH,'/templates'));
for(var page in pages){
let conf ={
//输出⽂件的⽂件名称，默认为index.html，不配置就是该⽂件名；此外，还可以为输出⽂件指定⽬录位置（例如'html/index.html'）    filename:'templates/'+page +'.html',
//本地模板⽂件的位置
template: pages[page],
/**
* 向template或者templateContent中注⼊所有静态资源，不同的配置值注⼊的位置不经相同。
* true或者body：所有JavaScript资源插⼊到body元素的底部
* head：所有JavaScript资源插⼊到head元素中
* false：所有静态资源css和JavaScript都不会注⼊到模板⽂件中
*/
inject:true,
//按chunks的顺序对js进⾏引⼊
chunkSortMode:'dependency',
/**
* true|false，是否为所有注⼊的静态资源添加webpack每次编译产⽣的唯⼀hash值
* 例如：<script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
*/
hash:true,
minify:{
/
/剥离HTML注释
removeComments:true,
//尽可能删除属性的引号
removeAttributeQuotes:false,
//折叠对⽂档树中的⽂本节点有贡献的空⽩空间
collapseWhitespace:false
},
chunks:Object.keys(entrys).filter(x =>{
//place(/js[\/\\]*/,'') === place(/html[\/\\]*/,'')
return x === page
})
}
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。