Webpack, Azure Pipelines & Caching — build your Frontend in seconds

const path = require('path');module.exports = {entry: entryPoints,devtool: 'source-map',cache: {  type: 'filesystem',  cacheDirectory: path.resolve('./.webpack_cache'),},
...
}
variables:- name: npm_config_cache  value: $(Pipeline.Workspace)/.npmstages:- stage: Build  displayName: Build  jobs:  - job: Build    displayName: Build    workspace:    clean: all    steps:
...
- task: Cache@2 inputs: key: 'npm | "$(Agent.OS)" | $(Build.SourcesDirectory)/**/package-lock.json' restoreKeys: npm | "$(Agent.OS)" path: $(npm_config_cache) displayName: Cache npm - task: Cache@2 inputs: key: 'webpack | "$(Agent.OS)" | $(Build.SourcesDirectory)/**/webpack.config.js' restoreKeys: webpack | "$(Agent.OS)" path: $(Build.SourcesDirectory)/PATHTOPROJECT/.webpack_cache displayName: Cache webpack...
Build your Frontend and Backend here
plugins: [  new ForkTsCheckerWebpackPlugin(),],
...
module: {rules: [{ test: /\.ts$/, exclude: /node_modules/, use: { loader: 'ts-loader', options: { transpileOnly: true, happyPackMode: true } }},
output: {
pathinfo: false,},optimization: { runtimeChunk: true, removeAvailableModules: false, removeEmptyChunks: false,},
resolve: {
symlinks: false,}...

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store