Created
July 17, 2016 10:30
-
-
Save sivabudh/6da7221748d58358fd094b4ec0a3c033 to your computer and use it in GitHub Desktop.
Our 2 Webpack config files which we use to 1) Compile TypeScript files 2) Compile SASS files 3) ...and bundle them all up in a single `build.js` file
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.dev.js | |
// | |
var loaders = require('./webpack.loaders'); | |
var failPlugin = require('webpack-fail-plugin'); | |
module.exports = { | |
entry: [ | |
'./static/typescripts/index.ts', | |
], | |
output: { | |
filename: 'build.js', | |
path: 'static/dist', | |
}, | |
plugins: [failPlugin], | |
resolve: { | |
root: __dirname, | |
extensions: ['', '.ts', '.js', '.json'], | |
}, | |
resolveLoader: { | |
modulesDirectories: ['node_modules'] | |
}, | |
devtool: 'source-map', | |
module: { | |
loaders: loaders | |
}, | |
}; | |
// | |
// webpack.loaders.js | |
// | |
module.exports = [{ | |
test: /\.tsx?$/, | |
loader: 'ng-annotate!awesome-typescript' | |
}, { | |
test: /\.jsx?$/, | |
loader: 'ng-annotate', | |
exclude: ['/node_modules/'] | |
}, { | |
test: /\.html$/, | |
loader: 'html' | |
}, { | |
test: /\.css$/, | |
loader: 'style!css' | |
}, { | |
test: /\.scss$/, | |
loader: 'style!css!sass' | |
}, { | |
test: /\.png$/, | |
loader: "url?limit=10000" | |
}, { | |
test: /\.(jpg|ttf|eot|woff2?|svg)$/, | |
loader: "file" | |
}, ]; |
@TheLarkInn Thank you so much. I will run some benchmarks and let you know the improvement after these changes 👍
Early results:
Baseline: webpack --config webpack/webpack.dev.js -p
real 0m40.175s
Without -p: webpack --config webpack/webpack.dev.js
real 0m12.080s
CheapEvalSourceMap: webpack --config webpack/webpack.dev.js
real 0m9.467s
Since we're not using -p in development anyway, only the 2nd one really counts. Still a ~20% speed-up for almost zero effort.
Am now looking into DLLPlugin. FWIW, the docs and "example" on this are pretty spartan, is there a good writeup/blog post that explains this more for a beginner?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
So a few things I spot that I think could really help:
npm install
the functions you use. Moment, I'm not sure if you can get a lighter version, however look into thenoParse
property. It speeds up performance by ignoring already built libs. May be useful to apply to angular and moment which can't really be broken apart.-p
flag and what it means in the webpack source. A lot of times personally I will roll without it and customize my sourcemap types manually.cheap-eval-source-map
for local development as well which will speed things up.vendor DLL bundle
which is done in a separate build step (you would only have to build it once unless you change your vendors). Since this DLL bundle is pre-built, when you run your app build, all the time it would take to bundle and trace your vendor dependencies would be already taken care of. (I've heard this can drop build times by 70%).