富贵资源网 Design By www.hznty.com
红色为更改后的不同之处
vue 多入口文件搭建
在webpack.base.conf
中修改
var path = require('path') var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname,'../') var glob = require('glob'); var entries = getEntry('./src/module/*.js'); // 获得入口js文件 module.exports = { entry: entries, output: { path:config.build.assetsRoot, publicPath:process.env.NODE_ENV ==='production' "base-entrys:"); console.log(5,entries); return entries; }
这样一来的话,就在中细分,最后输出html都在dist下。
这里的字符串操作也是和路径的情况相匹配的,如果有需要进行其他方式的设定,注意在这里修改路径的识别。
vue多页面搭建
原本的webpack.dev.conf中有一个插件的设置内容
对这部分内容进行修改
var config = require('../config') var webpack = require('webpack') var merge = require('webpack-merge') var utils = require('./utils') var baseWebpackConfig = require('./webpack.base.conf') var HtmlWebpackPlugin = require('html-webpack-plugin') var path = require('path'); var glob = require('glob'); // add hot-reload related code to entry chunks Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) module.exports =merge(baseWebpackConfig, { module: { loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // eval-source-map is faster for development devtool: '#eval-source-map', plugins: [ new webpack.DefinePlugin({ 'process.env':config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin ] }) function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function(entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-3); pathname = basename; // 正确输出js和html的路径 entries[pathname] = entry; }); console.log("dev-entrys:"); console.log(entries); return entries; } var pages = getEntry('./pages/*.html'); console.log("dev pages----------------------"); for (var pathname in pages) { console.log("filename:" + pathname + '.html'); console.log("template:" + pages[pathname]); // 配置生成的html文件,定义路径等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路径 minify: { //传递 html-minifier 选项给 minify 输出 removeComments: true }, inject: 'body', // js插入位置 chunks: [pathname, "vendor", "manifest"] // 每个html引用的js模块,也可以在这里加上vendor等公用模块 }; // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象 module.exports.plugins.push(new HtmlWebpackPlugin(conf)); } ---------------------------------------------- webpack.prod.conf配置 和webpack.dev.conf.js中做类似的处理, 先注释掉原来的HtmlWebpackPlugin,然后在下面添加函数, 通过迭代插入多个HtmlWebpackPlugin。 var path =require('path') var config =require('../config') var utils =require('./utils') var webpack =require('webpack') var merge =require('webpack-merge') var baseWebpackConfig =require('./webpack.base.conf') var ExtractTextPlugin =require('extract-text-webpack-plugin') var HtmlWebpackPlugin =require('html-webpack-plugin') var env =process.env.NODE_ENV ==='testing' "prod-entrys:"); console.log(entries); return entries; } var pages =getEntry('./pages/*.html'); console.log("prod pages-----"); for (varpathname inpages) { console.log("filename:"+pathname +'.html'); console.log("template:"+pages[pathname]); // 配置生成的html文件,定义路径等 var conf = { filename: pathname +'.html', template: pages[pathname],// 模板路径 minify:{ // removeComments:true, collapseWhitespace: false }, inject: true,// js插入位置 chunks: [pathname,"vendor", "manifest"]// 每个html引用的js模块,也可以在这里加上vendor等公用模块 }; // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象 module.exports.plugins.push(newHtmlWebpackPlugin(conf)); }
以上这篇vue 多入口文件搭建 vue多页面搭建的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...