Closed loveeazy closed 6 years ago
关于webpack.prod.conf.js的配置还是应用当前项目的配置 /*此配置文件主要操作 1 合并基础的webpack配置 2 使用styleLoaders 3 配置webpack的输出 4 配置webpack插件 5 gzip模式下的webpack插件配置 6 webpack-bundle分析
构建的时候用到的webpack配置来自webpack.prod.conf.js,该配置同样是在webpack.base.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')
// 用于从webpack生成的bundle中提取文本到特定文件中的插件 // 可以抽取出css,js文件将其与webpack输出的bundle分离 var ExtractTextPlugin = require('extract-text-webpack-plugin') var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
//支持二级目录的配置 var entries = utils.getMultiEntry('./src/' + config.moduleName + '///*.js'); // 获得入口js文件 var chunks = Object.keys(entries);
var env = process.env.NODE_ENV === 'testing' ?require('../config/test.env') :config.build.env
// 合并基础的webpack配置 var webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, //devtool: config.build.productionSourceMap ? '#source-map' : false, // 配置webpack的输出 output: { // 编译输出目录 path: config.build.assetsRoot, // 编译输出文件名格式 filename: utils.assetsPath('js/[name].[hash].js'), // 没有指定输出名的文件输出的文件名格式 chunkFilename: utils.assetsPath('js/[id].js') }, // 配置webpack插件 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 // 抽离css文件 new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].css') // 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(), // 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: 'vendor',
chunks: chunks,
minChunks: 4 || chunks.length
}),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'manifest',
// chunks: ['vendor'],
// })
/*
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])*/
]
})
// gzip模式下需要引入compression插件进行压缩 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()) }
//构建生成多页面的HtmlWebpackPlugin配置,主要是循环生成 var pages = utils.getMultiEntry('./src/' + config.moduleName + '///*.html'); for (var pathname in pages) {
var conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
chunks: ['vendor', pathname], // 每个html引用的js模块
inject: true, // js插入位置
hash: true
};
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
module.exports = webpackConfig
但是在浏览器加载的时候并没有办法保证,每次都优先载入公共的js! 请蓝狐赐教,不胜感激!!!!
发现问题了,是由于电信运营商进行了劫持,导致公共JS文件引用出错!现在着手解决,http下,如何不被运营商劫持
自己的项目,在开发环境中一切都好!但是到了生成环境,会时不时出现,webpackJsonp的问题! 具体情况如下: 1.当出现这个问题时,公共的vendor.js会被加载两次,第一次不是完整的! 2.第二次加载的时完整的,但是页面白屏了!
根据搜索得出的结论,是因为公共的JS文件没有在当前页面逻辑之前载入 但是我查看了html文件的导入顺序如下,并没有错误!