Skip to content

Commit

Permalink
Update webpack build process to speed up build times
Browse files Browse the repository at this point in the history
  • Loading branch information
cannoneyed committed Aug 6, 2019
1 parent f05c592 commit 087c1b0
Show file tree
Hide file tree
Showing 11 changed files with 513 additions and 2,188 deletions.
73 changes: 58 additions & 15 deletions configs/webpack/common.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,60 @@ limitations under the License.
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const AutoDllPlugin = require('autodll-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const packageJSON = require('../../package.json');
const vendorDependencies = Object.keys(packageJSON.dependencies);

let dllFilename = '[name].dll.js';
if (process.env.NODE_ENV === 'dev') {
vendorDependencies.push('react-hot-loader');
// Add a random id to prevent issues where DLL isn't being served by
// dev-server
const id = Math.random()
.toString()
.split('.')[1];
dllFilename = `[name].${id}.dll.js`;
}

module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
entry: './index.tsx',
context: resolve(__dirname, '../../src'),
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
use: [
{ loader: 'cache-loader' },
{
loader: 'thread-loader',
options: {
// there should be 1 cpu for the fork-ts-checker-webpack-plugin
workers: require('os').cpus().length - 1,
poolTimeout: Infinity, // set this to Infinity in watch mode - see https://github.com/webpack-contrib/thread-loader
},
},
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['react-hot-loader/babel'],
},
},
{
loader: 'ts-loader',
options: {
happyPackMode: true, // IMPORTANT! use happyPackMode mode to speed-up compilation and reduce errors reported to webpack
transpileOnly: true,
},
},
],
exclude: /node_modules/,
},
{
Expand All @@ -41,14 +79,6 @@ module.exports = {
{ loader: 'css-loader', options: { importLoaders: 1 } },
],
},
{
test: /\.scss$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
Expand All @@ -59,8 +89,21 @@ module.exports = {
],
},
plugins: [
new ForkTsCheckerWebpackPlugin({
checkSyntacticErrors: true,
tsconfig: resolve(__dirname, '../../tsconfig.json'),
exclude: '',
}),
new Dotenv(),
new HtmlWebpackPlugin({ template: 'index.html.ejs' }),
new HtmlWebpackPlugin({ inject: true, template: 'index.html.ejs' }),
new AutoDllPlugin({
inject: true, // will inject the DLL bundles to index.html
filename: dllFilename,
entry: {
vendor: vendorDependencies,
},
context: resolve(__dirname, '../../src'),
}),
],
performance: {
hints: false,
Expand Down
22 changes: 0 additions & 22 deletions configs/webpack/dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,13 @@ limitations under the License.
==============================================================================*/

const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');

module.exports = merge(commonConfig, {
mode: 'development',
resolve: {
alias: {
'react-dom': '@hot-loader/react-dom',
},
symlinks: false, // To use local packages (e.g., @magenta/music), turn off symlink resolution https://github.com/webpack/webpack/issues/811
},
entry: [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.tsx', // the entry point of our app
],
devServer: {
hot: true, // enable HMR on the server,
},
devtool: 'eval',
plugins: [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
],
optimization: {
removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false,
},
cache: true,
});
6 changes: 0 additions & 6 deletions configs/webpack/prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,10 @@ const commonConfig = require('./common');

module.exports = merge(commonConfig, {
mode: 'production',
entry: './index.tsx',
output: {
filename: 'bundle.[hash].min.js',
path: resolve(__dirname, '../../dist'),
publicPath: '/cococo',
},
devtool: 'source-map',
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
plugins: [],
});
26 changes: 0 additions & 26 deletions express.js

This file was deleted.

20 changes: 8 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,37 @@
"build": "yarn run clean-dist && webpack -p --config=configs/webpack/prod.js",
"clean-dist": "rm -f -r -d dist",
"start": "yarn run dev",
"dev": "webpack-dev-server --config=configs/webpack/dev.js",
"dev": "NODE_ENV=dev webpack-dev-server --config=configs/webpack/dev.js",
"test-dev": "NODE_ENV=dev webpack --config=configs/webpack/dev.js",
"deploy": "yarn build && node deploy.js"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"@hot-loader/react-dom": "^16.8.6",
"@types/jest": "^24.0.13",
"@types/lodash": "^4.14.132",
"@types/node": "^12.0.2",
"@types/react": "^16.8.17",
"@types/react-dom": "^16.8.4",
"awesome-typescript-loader": "^5.2.1",
"autodll-webpack-plugin": "^0.4.2",
"babel-loader": "^8.0.6",
"cache-loader": "^4.1.0",
"css-loader": "^2.1.1",
"dotenv-webpack": "^1.7.0",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^1.5.0",
"gh-pages": "^2.0.1",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.6.0",
"jest": "^24.8.0",
"node-sass": "^4.12.0",
"prettier": "^1.17.1",
"react-hot-loader": "^4.8.4",
"sass-loader": "^7.1.0",
"react-hot-loader": "^4.12.10",
"style-loader": "^0.23.1",
"tslint": "^5.16.0",
"thread-loader": "^2.1.2",
"ts-loader": "^6.0.4",
"typescript": "^3.5.1",
"uglifyjs-webpack-plugin": "^2.1.3",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-middleware": "^3.7.0",
"webpack-dev-server": "^3.3.1",
"webpack-merge": "^4.2.1"
},
Expand Down
79 changes: 3 additions & 76 deletions src/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,80 +1,7 @@
/* Copyright 2019 Google LLC. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/

import React from 'react';
import { observer } from 'mobx-react';
import { style } from 'typestyle';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { ThemeProvider } from '@material-ui/styles';

import { Controls } from './controls';
import { Editor } from './editor';
import { Sequences } from './sequences';
import { Working } from './working';

import { engine, layout } from '../core';
import { theme } from '../core/theme';

@observer
export default class App extends React.Component {
stageRef: HTMLDivElement;

render() {
const stageContainerStyle = style({
marginTop: 20,
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
});
const editorContainerStyle = style({
width: layout.editorWidth,
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
});
const sequencesContainerStyle = style({
width: layout.sequencesWidth,
height: '100%',
});
import Main from './main';

return (
<ThemeProvider theme={theme}>
<AppBar position="static" color="primary">
<Toolbar>
<Typography variant="h6" color="inherit">
𝄡 Bach CoCoCo
</Typography>
</Toolbar>
</AppBar>
<div className={stageContainerStyle} ref={ref => (this.stageRef = ref)}>
<div className={editorContainerStyle}>
<Editor />
<Controls />
</div>
<div className={sequencesContainerStyle}>
<Sequences />
</div>
</div>
<Working open={engine.isWorking} title="Working..." />
</ThemeProvider>
);
}
export default function App() {
return <Main />;
}
80 changes: 80 additions & 0 deletions src/components/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/* Copyright 2019 Google LLC. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/

import React from 'react';
import { observer } from 'mobx-react';
import { style } from 'typestyle';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { ThemeProvider } from '@material-ui/styles';

import { Controls } from './controls';
import { Editor } from './editor';
import { Sequences } from './sequences';
import { Working } from './working';

import { engine, layout } from '../core';
import { theme } from '../core/theme';

@observer
export default class Main extends React.Component {
stageRef: HTMLDivElement;

render() {
const stageContainerStyle = style({
marginTop: 20,
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
});
const editorContainerStyle = style({
width: layout.editorWidth,
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
});
const sequencesContainerStyle = style({
width: layout.sequencesWidth,
height: '100%',
});

return (
<ThemeProvider theme={theme}>
<AppBar position="static" color="primary">
<Toolbar>
<Typography variant="h6" color="inherit">
𝄡 Bach CoCoCo
</Typography>
</Toolbar>
</AppBar>
<div className={stageContainerStyle} ref={ref => (this.stageRef = ref)}>
<div className={editorContainerStyle}>
<Editor />
<Controls />
</div>
<div className={sequencesContainerStyle}>
<Sequences />
</div>
</div>
<Working open={engine.isWorking} title="Working..." />
</ThemeProvider>
);
}
}
File renamed without changes.
Loading

0 comments on commit 087c1b0

Please sign in to comment.