Skip to content

Instantly share code, notes, and snippets.

@fuchao2012

fuchao2012/webpack.build.config.js

Created November 8, 2017 03:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fuchao2012/2fb606fc3688a5a77835dac7d8263b1b to your computer and use it in GitHub Desktop.
Save fuchao2012/2fb606fc3688a5a77835dac7d8263b1b to your computer and use it in GitHub Desktop.
Download ZIP
Webpack builded file chunk-hash changed every time
Raw
webpack.build.config.js
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')
})
]
}
};
@fuchao2012
Copy link
Author

fuchao2012 commented Nov 8, 2017 •
edited 

#!/usr/bin/env bash
build='build/mimg/js'
i=1
if [ ! -d "${build}" ]; then
  echo "\n\nBuild [INIT] ********************** Start Time: $(date +%T)"
  npm run build | grep 'Hash: ' -A 12
fi
for((i=1;i<=$1;i++));do
  echo "\n\nBuild [${i}] ********************** Start Time: $(date +%T)"
  hash=$(ls ${build} | grep "thirdParty" | md5)
  npm run build | grep 'Hash: ' -A 12
  echo "\nOld Hash： ${hash}"
  echo "New Hash： $(ls ${build} | grep "thirdParty" | md5)"
done

@fuchao2012
Copy link
Author 

➜  yanxuan-ark-web git:(master) ✗ sh run.sh 5


Build [INIT] ********************** Start Time: 11:30:38
clean-webpack-plugin: /Volumes/store/workspace/ne/yanxuan-ark/yanxuan-ark-web/build/**/* has been removed.
Hash: d54262224461472f54cd
Version: webpack 3.8.1
Time: 73413ms
                         Asset       Size      Chunks                    Chunk Names
     img/logo-357d1f045cbc.png    3.08 kB              [emitted]
img/popup_btn-805f4a65f353.png    7.08 kB              [emitted]
    js/angular.12766153dac2.js     355 kB     angular  [emitted]  [big]  angular
  js/bootstrap.cbdea57bd651.js     458 kB   bootstrap  [emitted]  [big]  bootstrap
      js/entry.9697885970cb.js    1.44 kB       entry  [emitted]         entry
   js/polyfill.307f4da22e61.js     167 kB    polyfill  [emitted]         polyfill
 js/thirdParty.b704c8c372e1.js     744 kB  thirdParty  [emitted]  [big]  thirdParty
   css/styles.4117b2927298.css     179 kB      styles  [emitted]         styles
                    index.html  684 bytes              [emitted]


Build [1] ********************** Start Time: 11:31:56
clean-webpack-plugin: /Volumes/store/workspace/ne/yanxuan-ark/yanxuan-ark-web/build/**/* has been removed.
Hash: 5370a9086b6bbb778818
Version: webpack 3.8.1
Time: 76877ms
                         Asset       Size      Chunks                    Chunk Names
     img/logo-357d1f045cbc.png    3.08 kB              [emitted]
img/popup_btn-805f4a65f353.png    7.08 kB              [emitted]
    js/angular.12766153dac2.js     355 kB     angular  [emitted]  [big]  angular
  js/bootstrap.cbdea57bd651.js     458 kB   bootstrap  [emitted]  [big]  bootstrap
      js/entry.9697885970cb.js    1.44 kB       entry  [emitted]         entry
   js/polyfill.307f4da22e61.js     167 kB    polyfill  [emitted]         polyfill
 js/thirdParty.b704c8c372e1.js     744 kB  thirdParty  [emitted]  [big]  thirdParty
   css/styles.4117b2927298.css     179 kB      styles  [emitted]         styles
                    index.html  684 bytes              [emitted]

Old Hash： f3c3637c4763ed2b17ec3ef1933f0982
New Hash： f3c3637c4763ed2b17ec3ef1933f0982


Build [2] ********************** Start Time: 11:33:29
clean-webpack-plugin: /Volumes/store/workspace/ne/yanxuan-ark/yanxuan-ark-web/build/**/* has been removed.
Hash: 0931d1358dbab3541bbd
Version: webpack 3.8.1
Time: 68985ms
                         Asset       Size      Chunks                    Chunk Names
     img/logo-357d1f045cbc.png    3.08 kB              [emitted]
img/popup_btn-805f4a65f353.png    7.08 kB              [emitted]
    js/angular.12766153dac2.js     355 kB     angular  [emitted]  [big]  angular
  js/bootstrap.cbdea57bd651.js     458 kB   bootstrap  [emitted]  [big]  bootstrap
      js/entry.9697885970cb.js    1.44 kB       entry  [emitted]         entry
   js/polyfill.307f4da22e61.js     167 kB    polyfill  [emitted]         polyfill
 js/thirdParty.4fbb2fd7c176.js     744 kB  thirdParty  [emitted]  [big]  thirdParty
   css/styles.4117b2927298.css     179 kB      styles  [emitted]         styles
                    index.html  684 bytes              [emitted]

Old Hash： f3c3637c4763ed2b17ec3ef1933f0982
New Hash： 12037166767e1d54ad774cec6a51ef17


Build [3] ********************** Start Time: 11:34:42
clean-webpack-plugin: /Volumes/store/workspace/ne/yanxuan-ark/yanxuan-ark-web/build/**/* has been removed.
Hash: 4b5302512120ee12e00c
Version: webpack 3.8.1
Time: 67546ms
                         Asset       Size      Chunks                    Chunk Names
     img/logo-357d1f045cbc.png    3.08 kB              [emitted]
img/popup_btn-805f4a65f353.png    7.08 kB              [emitted]
    js/angular.12766153dac2.js     355 kB     angular  [emitted]  [big]  angular
  js/bootstrap.cbdea57bd651.js     458 kB   bootstrap  [emitted]  [big]  bootstrap
      js/entry.9697885970cb.js    1.44 kB       entry  [emitted]         entry
   js/polyfill.307f4da22e61.js     167 kB    polyfill  [emitted]         polyfill
 js/thirdParty.4fbb2fd7c176.js     744 kB  thirdParty  [emitted]  [big]  thirdParty
   css/styles.4117b2927298.css     179 kB      styles  [emitted]         styles
                    index.html  684 bytes              [emitted]

Old Hash： 12037166767e1d54ad774cec6a51ef17
New Hash： 12037166767e1d54ad774cec6a51ef17


Build [4] ********************** Start Time: 11:36:04
clean-webpack-plugin: /Volumes/store/workspace/ne/yanxuan-ark/yanxuan-ark-web/build/**/* has been removed.
Hash: 1952b55603781da8795f
Version: webpack 3.8.1
Time: 85603ms
                         Asset       Size      Chunks                    Chunk Names
     img/logo-357d1f045cbc.png    3.08 kB              [emitted]
img/popup_btn-805f4a65f353.png    7.08 kB              [emitted]
    js/angular.12766153dac2.js     355 kB     angular  [emitted]  [big]  angular
  js/bootstrap.cbdea57bd651.js     458 kB   bootstrap  [emitted]  [big]  bootstrap
      js/entry.9697885970cb.js    1.44 kB       entry  [emitted]         entry
   js/polyfill.307f4da22e61.js     167 kB    polyfill  [emitted]         polyfill
 js/thirdParty.b704c8c372e1.js     744 kB  thirdParty  [emitted]  [big]  thirdParty
   css/styles.4117b2927298.css     179 kB      styles  [emitted]         styles
                    index.html  684 bytes              [emitted]

Old Hash： 12037166767e1d54ad774cec6a51ef17
New Hash： f3c3637c4763ed2b17ec3ef1933f0982


Build [5] ********************** Start Time: 11:37:46
clean-webpack-plugin: /Volumes/store/workspace/ne/yanxuan-ark/yanxuan-ark-web/build/**/* has been removed.
Hash: 6bf6c13a5debdf39ae4e
Version: webpack 3.8.1
Time: 91484ms
                         Asset       Size      Chunks                    Chunk Names
     img/logo-357d1f045cbc.png    3.08 kB              [emitted]
img/popup_btn-805f4a65f353.png    7.08 kB              [emitted]
    js/angular.12766153dac2.js     355 kB     angular  [emitted]  [big]  angular
  js/bootstrap.cbdea57bd651.js     458 kB   bootstrap  [emitted]  [big]  bootstrap
      js/entry.9697885970cb.js    1.44 kB       entry  [emitted]         entry
   js/polyfill.307f4da22e61.js     167 kB    polyfill  [emitted]         polyfill
 js/thirdParty.4fbb2fd7c176.js     744 kB  thirdParty  [emitted]  [big]  thirdParty
   css/styles.4117b2927298.css     179 kB      styles  [emitted]         styles
                    index.html  684 bytes              [emitted]

Old Hash： f3c3637c4763ed2b17ec3ef1933f0982
New Hash： 12037166767e1d54ad774cec6a51ef17

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment