In this example we are going to create a production bundle using webpack.
We will start from 00-boilerplate.
npm installto install previous sample packages:
npm install-
First, we will check the current
baseanddevwebpack configuration. -
Then, we need to add a new file
prod.jsusingproductionmode:
./config/webpack/prod.js
const { merge } = require('webpack-merge');
const base = require('./base');
module.exports = merge(base, {
mode: 'production',
});- As we did on
dev, we have to configure the ouput:
./config/webpack/prod.js
const { merge } = require('webpack-merge');
const base = require('./base');
+ const helpers = require('./helpers');
module.exports = merge(base, {
mode: 'production',
+ output: {
+ path: helpers.resolveFromRootPath('dist'),
+ filename: './js/[name].[chunkhash].js',
+ assetModuleFilename: "./images/[hash][ext][query]",
+ },
});
NOTE: Remember to add
chunkhashto avoid cache issues.
- Next one, it's apply optimization to split
node_modulesas different chunk fromapp:
./config/webpack/prod.js
...
output: {
path: helpers.resolveFromRootPath('dist'),
filename: './js/[name].[chunkhash].js',
assetModuleFilename: './images/[hash][ext][query]',
},
+ optimization: {
+ runtimeChunk: 'single',
+ splitChunks: {
+ cacheGroups: {
+ vendor: {
+ chunks: 'all',
+ name: 'vendor',
+ test: /[\\/]node_modules[\\/]/,
+ enforce: true,
+ },
+ },
+ },
+ },
});
- Finally, we will provide a different env variables for
production:
./prod.env
NODE_ENV=production
ORGANIZATION=facebook
- And use it:
./config/webpack/prod.js
const { merge } = require('webpack-merge');
+ const Dotenv = require('dotenv-webpack');
const base = require('./base');
...
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'all',
name: 'vendor',
test: /[\\/]node_modules[\\/]/,
enforce: true,
},
},
},
},
+ plugins: [
+ new Dotenv({
+ path: 'prod.env',
+ }),
+ ],
});
- Now, we can add the
buildcommand:
./package.json
...
"scripts": {
"start": "run-p -l type-check:watch start:dev",
"start:dev": "webpack-dev-server --config ./config/webpack/dev.js",
+ "build": "run-p -l type-check build:prod",
+ "build:prod": "npm run clean && webpack --config ./config/webpack/prod.js",
"type-check": "tsc --noEmit",
...
},- Run it:
npm run buildWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
Basefactor, consultancy by Lemoncode provides consultancy and coaching services.
Lemoncode provides training services.
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent