红色为更改后的不同之处
vue 多入口文件搭建
在webpack.base.conf
中修改
文件
module.exports = {
entry: entries,output: {
path:config.build.assetsRoot,publicPath:process.env.NODE_ENV
==='production' ?
config.build.assetsPublicPath :config.dev.assetsPublicPath,filename: '[name].js'
},resolve: {
extensions: ['','.js','.vue'],fallback: [path.join(__dirname,'../node_modules')],alias: {
'src':path.resolve(__dirname,'../src'),'assets':path.resolve(__dirname,'../src/assets'),'components':path.resolve(__dirname,'../src/components')
}
},resolveLoader: {
fallback: [path.join(__dirname,'../node_modules')]
},module: {
loaders: [
{
test: /\.vue$/,loader:'vue'
},{
test: /\.js$/,loader:'babel',include:projectRoot,exclude: /node_modules/
},{
test: /\.json$/,loader:'json'
},{
test: /\.html$/,loader:'vue-html'
},{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader:'url',query: {
limit:10000,name:utils.assetsPath('img/[name].[hash:7].[ext]')
}
},{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,name:utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},vue: {
loaders:utils.cssLoaders()
}
}
function getEntry(globPath) {
var entries = {},basename,tmp,pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry,path.extname(entry));
console.log(1,basename);
tmp = entry.split('/').splice(-3);
console.log(2,tmp);
pathname = basename; // 正确输出js和html的路径
console.log(3,pathname);
entries[pathname] = entry;
console.log(4,entry);
});
console.log("base-entrys:");
console.log(5,entries);
return entries;
}
这样一来的话，就在中细分，最后输出html都在dist下。
这里的字符串操作也是和路径的情况相匹配的，如果有需要进行其他方式的设定，注意在这里修改路径的识别。
vue多页面搭建
原本的webpack.dev.conf中有一个插件的设置内容
输出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'
?
require('../config/test.env')
:
config.build.env
var
glob =require('glob');
module.exports =merge(baseWebpackConfig,{
module: {
loaders:
utils.styleLoaders({sourceMap:
config.build.productionSourceMap,extract:
true })
},devtool:
config.build.productionSourceMap ?'#source-map' :
false,output: {
path:
config.build.assetsRoot,filename:
utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename:
utils.assetsPath('js/[id].[chunkhash].js')
},vue: {
loaders:
utils.cssLoaders({
sourceMap:
config.build.productionSourceMap,extract:
true
})
},plugins: [
// http://vuejs.github.io/vue-loader/workflow/production.html
new
webpack.DefinePlugin({
'process.env':env
}),new
webpack.optimize.UglifyJsPlugin({
compress: {
warnings:
false
}
}),new
webpack.optimize.OccurenceOrderPlugin(),// extract css into its own file
new
ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
// new HtmlWebpackPlugin({
// filename: process.env.NODE_ENV === 'testing'
// ? 'index.html'
// : config.build.index,// template: 'index.html',// inject: true,// minify: {
// removeComments: true,// collapseWhitespace: true,// removeAttributeQuotes: true
// // more options:
// // https://github.com/kangax/html-minifier#options-quick-reference
// },// // necessary to consistently work with multiple chunks via CommonsChunkPlugin
// chunksSortMode: 'dependency'
// }),// split vendor js into its own file
new
webpack.optimize.CommonsChunkPlugin({
name:
'vendor',minChunks:
function (module,count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource)
&&
module.resource.indexOf(
path.join(__dirname,'../node_modules')
) ===
0
)
}
}),// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new
webpack.optimize.CommonsChunkPlugin({
name:
'manifest',chunks: ['vendor']
})
]
})
if (config.build.productionGzip)
{
var
CompressionWebpackPlugin =require('compression-webpack-plugin')
webpackConfig.plugins.push(
new
CompressionWebpackPlugin({
asset:
'[path].gz[query]',algorithm:
'gzip',test:
newRegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|')
+
')$'
),threshold:
10240,minRatio:
0.8
})
)
}
function getEntry(globPath) {
var entries = {},path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0,1) + '/' + basename; // 正确输出js和html的路径
entries[pathname] =entry;
});
console.log("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',// 模板路径
minify:{ //
removeComments:true,collapseWhitespace: false
},inject: true,"manifest"]// 每个html引用的js模块，也可以在这里加上vendor等公用模块
};
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(newHtmlWebpackPlugin(conf));
}
以上这篇vue 多入口文件搭建 vue多页面搭建的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/33240.html