Last active
July 17, 2017 08:44
-
-
Save Mark24Code/9f9f5e82eaccce15b650b9f41acf9554 to your computer and use it in GitHub Desktop.
基于Vue-cli多页面Build
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
webpack.prod.conf.js | |
添加的自定义函数 | |
filename:编译后的目标文件,相对路径是 dist | |
template:明确的模板,相对路径是 项目根目录 | |
然后,来源,是 entry一一对应的入口(这是隐藏的) | |
大原则,就是,和 webpack.base.config.js的Entry一一对应 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var path = require('path') | |
var utils = require('./utils') | |
var config = require('../config') | |
var vueLoaderConfig = require('./vue-loader.conf') | |
function resolve (dir) { | |
return path.join(__dirname, '..', dir) | |
} | |
module.exports = { | |
entry: { | |
// app: './src/main.js', | |
'pages/pageA':'./src/pages/pageA/pageA.js', // <-- 多入口 | |
'pages/pageB':'./src/pages/pageB/pageB.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') | |
} | |
}, | |
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('img/[name].[hash:7].[ext]') | |
} | |
}, | |
{ | |
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, | |
loader: 'url-loader', | |
options: { | |
limit: 10000, | |
name: utils.assetsPath('media/[name].[hash:7].[ext]') | |
} | |
}, | |
{ | |
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, | |
loader: 'url-loader', | |
options: { | |
limit: 10000, | |
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') | |
} | |
} | |
] | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
var glob = require('glob') | |
var env = config.build.env | |
var 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' | |
// }), | |
// | |
// // **************************************************** <-- 手动复制,添加插件对象也行 | |
// new HtmlWebpackPlugin({ | |
// filename: './box/AA.html', | |
// template: './src/pages/pageA/pageA.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' | |
// }), | |
// new HtmlWebpackPlugin({ | |
// filename: './page/BB.html', | |
// template: './src/pages/pageB/pageB.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()) | |
} | |
//******************************************** <-- 自己加入的生成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 = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径 | |
entries[pathname] = entry; | |
}); | |
return entries; | |
} | |
var pages = getEntry('./src/pages/**/*.js'); | |
for (var pathname in pages) { | |
if(pathname=='vendor'){ | |
return; | |
}; | |
// 配置生成的html文件,定义路径等 | |
var conf = { | |
filename: './'+pathname + '.html',//输出路径 | |
template: pages[pathname].slice(0,-3)+'.html', // 模板路径 | |
inject: true, // js插入位置 | |
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' | |
}; | |
if (pathname in webpackConfig.entry) { | |
conf.chunks = ['manifest', 'vendor', pathname]; | |
conf.hash = true; | |
} | |
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf)); | |
} | |
// console.log(JSON.stringify(webpackConfig)) | |
//******************************************** <-- 自己加入的生成plugin的函数断 | |
module.exports = webpackConfig |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment