Created
November 8, 2017 03:28
-
-
Save fuchao2012/2fb606fc3688a5a77835dac7d8263b1b to your computer and use it in GitHub Desktop.
Webpack builded file chunk-hash changed every time
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
const path = require('path'); | |
const fs = require('fs-extra'); | |
const os = require('os'); | |
const DefinePlugin = require('webpack/lib/DefinePlugin'); | |
const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
const ProgressBarPlugin = require('progress-bar-webpack-plugin'); | |
const HappyPack = require('happypack'); | |
const CleanWebpackPlugin = require('clean-webpack-plugin'); | |
const ngtools = require('@ngtools/webpack'); | |
const NamedLazyChunksWebpackPlugin = require('../utils/named-lazy-chunks-webpack-plugin'); | |
const SuppressExtractedTextChunksWebpackPlugin = require('../utils/suppress-entry-chunks-webpack-plugin.ts'); | |
const { HashedModuleIdsPlugin, NoEmitOnErrorsPlugin } = require('webpack'); | |
const { OccurrenceOrderPlugin, UglifyJsPlugin, CommonsChunkPlugin, ModuleConcatenationPlugin } = require('webpack').optimize; | |
const happThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); | |
const entryPoints = ['polyfill', 'entry', 'angular', 'thirdParty', 'bootstrap']; | |
module.exports = function(config) { | |
const nodeModules = path.join(config.__dirname, 'node_modules'); | |
const realNodeModules = fs.realpathSync(nodeModules); | |
const genDirNodeModules = path.join(config.__dirname, '$$_gendir', 'node_modules'); | |
return { | |
entry: { | |
bootstrap: [path.join(config.srcPath, 'bootstrap.ts')], | |
polyfill: config.polyfillChunk, | |
styles: config.styleChunk | |
}, | |
output: { | |
path: config.buildClient, | |
filename: 'js/[name].[chunkhash:12].js', | |
chunkFilename: 'js/chunk-[name].[chunkhash:12].js', | |
publicPath: config.contextPath + '/' | |
}, | |
module: { | |
rules: [{ | |
test: /\.js$/, | |
include: [ | |
path.join(config.__dirname, 'node_modules/@shark') | |
], | |
use: { | |
loader: 'babel-loader', | |
options: { | |
presets: ['env'] | |
} | |
} | |
}, | |
{ | |
test: /\.ts$/, | |
use: '@ngtools/webpack' | |
}, | |
{ | |
test: /\.html$/, | |
use: 'html-loader' | |
}, | |
{ | |
test: /\.(jpg|png|webp|gif)$/, | |
use: { | |
loader: 'url-loader', | |
options: { | |
name: 'img/[name]-[hash:12].[ext]', | |
limit: 100 | |
} | |
} | |
}, | |
{ | |
test: /\.(otf|ttf|woff|woff2|ani|eot|svg|cur)$/, | |
loader: 'url-loader?name=font/[name].[hash:12].[ext]' | |
}, | |
{ | |
test: /\.scss$/, | |
include: [ | |
path.join(config.srcPath, 'styles') | |
], | |
use: ExtractTextPlugin.extract({ | |
fallback: 'style-loader', | |
use: ['css-loader', 'sass-loader'] | |
}) | |
}, | |
{ | |
test: /\.scss$/, | |
include: [ | |
path.join(config.srcPath, 'app'), | |
path.join(config.__dirname, 'node_modules') | |
], | |
use: 'happypack/loader?id=scss' | |
}, | |
{ | |
test: /\.ejs$/, | |
include: [ | |
path.join(config.srcPath) | |
], | |
use: 'ejs-loader' | |
} | |
] | |
}, | |
resolve: { | |
extensions: ['.ts', '.js'] | |
}, | |
plugins: [ | |
new HappyPack({ | |
id: 'scss', | |
loaders: [ | |
'to-string-loader', | |
'css-loader', | |
'sass-loader' | |
], | |
threadPool: happThreadPool | |
}), | |
new HashedModuleIdsPlugin(), | |
new NamedLazyChunksWebpackPlugin(), | |
new OccurrenceOrderPlugin(), | |
new ModuleConcatenationPlugin(), | |
new ProgressBarPlugin({ | |
format: 'Building: :bar' + ' :percent' + ' (:elapsed seconds)', | |
width: 100, | |
complete: '█', | |
incomplete: '▒', | |
summary: false | |
}), | |
new CleanWebpackPlugin([config.build + '/**/*'], { | |
root: config.__dirname | |
}), | |
new UglifyJsPlugin({ | |
comments: false, | |
compress: { | |
warnings: false | |
} | |
}), | |
new NoEmitOnErrorsPlugin(), | |
new DefinePlugin({ | |
'ENV': '"prod"' | |
}), | |
new ExtractTextPlugin('css/[name].[contenthash:12].css'), | |
new SuppressExtractedTextChunksWebpackPlugin(), | |
new HtmlWebpackPlugin({ | |
filename: 'index.html', | |
template: path.join(config.srcPath, 'index.ejs'), | |
chunksSortMode: 'manual', | |
chunks: entryPoints | |
}), | |
new CommonsChunkPlugin({ | |
name: ['entry'], | |
chunks: ['bootstrap'] | |
}), | |
new CommonsChunkPlugin({ | |
name: 'angular', | |
chunks: ['bootstrap'], | |
minChunks: module => /@angular/.test(module.resource) | |
}), | |
new CommonsChunkPlugin({ | |
name: ['thirdParty'], | |
chunks: ['bootstrap'], | |
minChunks: (module) => { | |
return module.resource && | |
(module.resource.startsWith(nodeModules) || | |
module.resource.startsWith(genDirNodeModules) || | |
module.resource.startsWith(realNodeModules) | |
); | |
} | |
}), | |
new ngtools.AotPlugin({ | |
skipCodeGeneration: false, | |
tsConfigPath: path.join(config.__dirname, 'tsconfig.json') | |
}) | |
] | |
} | |
}; |
Author
fuchao2012
commented
Nov 8, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment