使用vue+webpack的多页面架构（转+自己的情况）

var path = require(‘path‘)var utils = require(‘./utils‘)var config = require(‘../config‘)var vueLoaderConfig = require(‘./vue-loader.conf‘)var webpack=require(‘webpack‘); //加入webpack对象//morevar glob = require(‘glob‘); //node-globvar entries = getEntry(‘./src/views/**/*.js‘); // 获得入口js文件. views替换了module//more endfunction resolve (dir) { ?return path.join(__dirname, ‘..‘, dir)}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("base-entrys:",entries); ?return entries;}module.exports = { ?entry:entries , ?// entry: { ?// ??app: ‘./src/main.js‘ ?// }, ?output: { ???path: config.build.assetsRoot, ???filename: ‘[name].js‘, ???publicPath: process.env.NODE_ENV === ‘production‘ ?????? config.build.assetsPublicPath ?????: config.dev.assetsPublicPath ?}, ?resolve: { ???extensions: [‘.js‘, ‘.vue‘, ‘.json‘], ???alias: { ?????‘vue$‘: ‘vue/dist/vue.esm.js‘, ?????‘@‘: resolve(‘src‘), ?????‘basecommon‘:‘./../../../common‘,//base组件引入公共样式 ?????‘components‘:‘./../components‘,//非base组件,./../common ?????‘api‘:‘./../../api‘,//非base组件 ?????‘base‘:‘./../base‘ //非base组件引入base组件 ???} ?}, ?module: { ???rules: [ ?????{ ???????test: /\.vue$/, ???????loader: ‘vue-loader‘, ???????options: vueLoaderConfig ?????}, ?????{ ???????test: /\.js$/, ???????loader: ‘babel-loader‘, ???????include: [resolve(‘src‘), resolve(‘test‘)] ?????}, ?????{ ???????test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, ???????loader: ‘url-loader‘, ???????options: { ?????????limit: 10000, ?????????name: utils.assetsPath(‘images/[name].[hash:7].[ext]‘) ???????} ?????}, ?????{ ???????test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, ???????loader: ‘url-loader‘, ???????options: { ?????????limit: 10000, ?????????name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘) ???????} ?????} ???] ?}, ?plugins: [ ???new webpack.ProvidePlugin({ ?????$:"jquery", ?????jQuery:"jquery", ?????"windows.jQuery":"jquery" ???}) ?] }

var utils = require(‘./utils‘)var webpack = require(‘webpack‘)var config = require(‘../config‘)var merge = require(‘webpack-merge‘)var baseWebpackConfig = require(‘./webpack.base.conf‘)var HtmlWebpackPlugin = require(‘html-webpack-plugin‘)var FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin‘)//morevar path = require(‘path‘);var glob = require(‘glob‘);//more end// add hot-reload related code to entry chunksObject.keys(baseWebpackConfig.entry).forEach(function (name) { ?baseWebpackConfig.entry[name] = [‘./build/dev-client‘].concat(baseWebpackConfig.entry[name])})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("dev-entrys:",entries); ?return entries;}//more endmodule.exports = merge(baseWebpackConfig, { ?module: { ???rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) ?}, ?// cheap-module-eval-source-map is faster for development ?devtool: ‘#cheap-module-eval-source-map‘, ?plugins: [ ???new webpack.DefinePlugin({ ?????‘process.env‘: config.dev.env ???}), ???// https://github.com/glenjamin/webpack-hot-middleware#installation--usage ???new webpack.HotModuleReplacementPlugin(), ???new webpack.NoEmitOnErrorsPlugin(), ???// https://github.com/ampedandwired/html-webpack-plugin ???// new HtmlWebpackPlugin({ ???// ??filename: ‘index.html‘, ???// ??template: ‘index.html‘, ???// ??inject: true ???// }), ???new FriendlyErrorsPlugin() ?]})//more start 先定义后插入var pages = getEntry(‘./src/views/**/*.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));}

var path = require(‘path‘)var utils = require(‘./utils‘)var webpack = require(‘webpack‘)var config = require(‘../config‘)var merge = require(‘webpack-merge‘)var baseWebpackConfig = require(‘./webpack.base.conf‘)var CopyWebpackPlugin = require(‘copy-webpack-plugin‘)var HtmlWebpackPlugin = require(‘html-webpack-plugin‘)var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘)var OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘)//morevar path = require(‘path‘);var glob = require(‘glob‘);//more endvar env = config.build.envvar webpackConfig = merge(baseWebpackConfig, { ?module: { ???rules: 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‘) ?}, ?plugins: [ ???// http://vuejs.github.io/vue-loader/en/workflow/production.html ???new webpack.DefinePlugin({ ?????‘process.env‘: env ???}), ???new webpack.optimize.UglifyJsPlugin({ ?????compress: { ???????warnings: false ?????}, ?????sourceMap: true ???}), ???// extract css into its own file ???new ExtractTextPlugin({ ?????filename: utils.assetsPath(‘css/[name].[contenthash].css‘) ???}), ???// Compress extracted CSS. We are using this plugin so that possible ???// duplicated CSS from different components can be deduped. ???new OptimizeCSSPlugin({ ?????cssProcessorOptions: { ???????safe: true ?????} ???}), ???// 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: 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‘] ???}), ???// copy custom static assets ???new CopyWebpackPlugin([ ?????{ ???????from: path.resolve(__dirname, ‘../static‘), ???????to: config.build.assetsSubDirectory, ???????ignore: [‘.*‘] ?????} ???]) ?]})if (config.build.productionGzip) { ?var CompressionWebpackPlugin = require(‘compression-webpack-plugin‘) ?webpackConfig.plugins.push( ???new CompressionWebpackPlugin({ ?????asset: ‘[path].gz[query]‘, ?????algorithm: ‘gzip‘, ?????test: new RegExp( ???????‘\\.(‘ + ???????config.build.productionGzipExtensions.join(‘|‘) + ???????‘)$‘ ?????), ?????threshold: 10240, ?????minRatio: 0.8 ???}) ?)}if (config.build.bundleAnalyzerReport) { ?var BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin ?webpackConfig.plugins.push(new BundleAnalyzerPlugin())}module.exports = webpackConfig//more startfunction 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("pro-entrys:",entries); ?return entries;}var pages = getEntry(‘./src/views/**/*.html‘);console.log("pro 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, ?????collapseWhitespace: true, ?????removeAttributeQuotes: true ???}, ???inject: ‘body‘, // js插入位置 ???chunks: [pathname, "vendor", "manifest"], // 每个html引用的js模块，也可以在这里加上vendor等公用模块 ????// necessary to consistently work with multiple chunks via CommonsChunkPlugin ???chunksSortMode: ‘dependency‘ ?}; ?// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象 ?module.exports.plugins.push(new HtmlWebpackPlugin(conf));} ????