WebStorm支持快速生成Vue HTML,只需要在WebStorm中打开Vue文件,然后在文件中按Ctrl+Space,就可以看到Vue HTML模板,可以选择模板进行快速编写,比如可以生成v-for循环、v-if条件判断、v-on事件绑定等Vue HTML代码,简化了Vue HTML的编写,提高了开发效率。需求来看下我们的需求:使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用
路由,访问/a时候显示a.html,/b显示b.html打包成
多个html,给其中引用到资源加md5戳主要目录结构├——src│└——views#每一个文件夹对应一个
页面│└——a│└——index.js│└——b│└——index.js├——output#打包输出的目录|└——└——template.html#将根据这个模版,生成各个页面的html└——webpack.config.js└——dev-server.js#webpack-dev-server+express只列出了主要的目录,这里我们根据一个template.html来生成多个页面的html,他们之间只有引用的资源路径不同。当然,你也可以每个页面单独使用一个html模版。Webpack配置这里主要解决两个小问题。1.打包多个页面的js文件读取src/views下的目录,约定每一个目录当成一个页面,打包成一个jschunk。2.打包多个html循环生成多个HtmlWebpackPlugin插件,把每一个插件的chunks各自指向上面打包的jschunk。//webpack.config.jsvarglob=require('glob')varwebpackConfig={/*一些webpack基础配置*/}//获取指定路径下的入口文件functiongetEntries(globPath){varfiles=glob.sync(globPath),entries={}files.forEach(function(filepath){//取倒数第二层(view下面的文件夹)做包名varsplit=filepath.split('/')varname=split[split.length-2]entries[name]='./'+filepath})returnentries}varentries=getEntries('src/view/**/index.js')Object.keys(entries).forEach(function(name){//每个页面生成一个entry,如果需要HotUpdate,在这里修改entrywebpackConfig.entry[name]=entries[name]//每个页面生成一个htmlvarplugin=newHtmlWebpackPlugin({//生成出来的html文件名filename:name+'.html',//每个html的模版,这里多个页面使用同一个模版template:'./template.html',//自动将引用插入htmlinject:true,//每个html引用的js模块,也可以在这里加上vendor等公用模块chunks:[name]})webpackConfig.plugins.push(plugin)})路由配置在多页应用下,我们希望访问的是localhost:8080/a,而不是localhost:8080/a.html。由于webpack-dev-server只是将文件打包在内存里,所以你没法在express里直接sendfile('output/views/a.html'),因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream,用来输出其内存里的文件,我们可以利用它来做路由。注意,为了自定义路由,你可能需要引进express或koa之类的库,然后将webpack-dev-server作为中间件处理。//dev-server.jsvarexpress=require('express')varwebpack=require('webpack')varwebpackConfig=require('./webpack.config')varapp=express()//webpack编译器varcompiler=webpack(webpackConfig)//webpack-dev-server中间件vardevMiddleware=require('webpack-dev-middleware')(compiler,{publicPath:webpackConfig.output.publicPath,stats:{colors:true,chunks:false}})app.use(devMiddleware)//路由app.get('/:viewname?',function(req,res,next){varviewname=req.params.viewname?req.params.viewname+'.html':'index.html'varfilepath=path.join(compiler.outputPath,viewname)//使用webpack提供的outputFileSystemcompiler.outputFileSystem.readFile(filepath,function(err,result){if(err){//somethingerrorreturnnext(err)}res.set('content-type','text/html')res.send(result)res.end()})})module.exports=app.listen(8080,function(err){if(err){//dosomethingreturn}console.log('Listeningatpackage.json{scripts:{"dev":"node./dev-server.js"}}运行npmrundev,然后在浏览器访问localhost:8080/各个页面,你应该可以看到想要的结果。1,敲。<html>...</html>。
2,框架。 class Index extends React.component{render(){.....}}。
3,ctrl+c & ctrl+v。
4,以上。
评论列表(0条)