vue 多入口文件搭建 vue多页面搭建的实例讲解

vue 多入口文件搭建 vue多页面搭建的实例讲解

红色为更改后的不同之处

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' ?

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)(\?.*)?$/,

loader:'url',

query: {

limit:10000,

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(2AGAqeVYOUD,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中有一个插件的设置内容

对这部分内容进行修改

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'

?

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].[contAGAqeVYOUDenthash].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 = {},

basename, tmp,pathname;

glob.sync(globPath).forEach(function (entry) {

basename = path.basename(entry,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',

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));

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。