amikhalev/sprinklers3
1
1
Fork 0
Code Issues 9 Pull Requests 1 Releases Wiki Activity

Use cache-loader and thread-loader instead of HappyPack

Browse Source
This commit is contained in:
Alex Mikhalev 2018-09-02 15:38:53 -06:00
parent 68e828e2e5
commit 69c4c1c8e1
5 changed files with 570 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,6 +1,8 @@
/node_modules
package-lock.json
npm-debug*
yarn-error*
/.cache-loader
/dist
/public
.idea

451
client/webpack.config.js
View File

@ -6,14 +6,12 @@ const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const DashboardPlugin = require("webpack-dashboard/plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HappyPack = require("happypack");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const {
getClientEnvironment
} = require("./env");
const { getClientEnvironment } = require("./env");
const paths = require("../paths");
// Webpack uses `publicPath` to determine where the app is being served from.
@ -24,225 +22,250 @@ const publicPath = paths.publicPath;
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = paths.publicUrl.slice(0, -1);
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
// Get environment variables to inject into our app.
const environ = getClientEnvironment(publicUrl);
const postCssConfig = {
loader: require.resolve("postcss-loader"),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
stage: 0,
}),
],
},
loader: require.resolve("postcss-loader"),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
stage: 0
})
]
}
};
const sassConfig = {
loader: require.resolve("sass-loader"),
options: {},
loader: require.resolve("sass-loader"),
options: {}
};
const rules = (env) => {
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
const styleLoader =
(env === "prod") ? {
loader: MiniCssExtractPlugin.loader
} : require.resolve("style-loader");
const cssRule = {
test: /\.css$/,
use: [
styleLoader,
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
},
},
postCssConfig,
]
};
const sassRule = {
test: /\.scss$/,
use: [
styleLoader,
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
},
},
postCssConfig,
sassConfig,
],
};
return [{
// "oneOf" will traverse all following loaders until one will
// match the requirements. when no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data urls to avoid requests.
// a missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
limit: (env === "prod") ? 10000 : 0,
name: "static/media/[name].[hash:8].[ext]",
},
},
cssRule,
sassRule,
// Process TypeScript with TSC through HappyPack.
{
test: /\.tsx?$/,
use: "happypack/loader?id=ts",
include: [paths.clientDir, paths.commonDir],
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn"t use a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// it"s runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve("file-loader"),
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
],
}, ];
}
const getConfig = module.exports = (env) => {
const isProd = (env === "prod");
const isDev = (env === "dev");
// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
if (isProd && environ.stringified["process.env"].NODE_ENV !== '"production"') {
throw new Error("Production builds must have NODE_ENV=production.");
}
const plugins = [
new HtmlWebpackPlugin({
inject: true,
template: paths.clientHtml,
minify: isProd ? {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
} : undefined,
}),
new FaviconsWebpackPlugin(path.resolve(paths.clientDir, "images", "favicon-96x96.png")),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === "production") { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(environ.stringified),
new CaseSensitivePathsPlugin(),
isProd && new UglifyJsPlugin({
sourceMap: shouldUseSourceMap,
}),
isDev && new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HappyPack({
id: "ts",
threads: 2,
loaders: [{
loader: "ts-loader",
options: {
configFile: paths.clientTsConfig,
happyPackMode: true,
},
}],
}),
new ForkTsCheckerWebpackPlugin({
checkSyntacticErrors: true,
tsconfig: paths.clientTsConfig,
tslint: paths.resolveRoot("tslint.json"),
}),
isDev && new DashboardPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false,
reportFilename: path.resolve(paths.serverBuildDir, "report.html"),
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
isProd && new MiniCssExtractPlugin({
filename: "static/css/[name].[chunkhash:8].css",
chunkFilename: "static/css/[id].[chunkhash:8].css",
})
].filter(Boolean);
return {
mode: isProd ? "production" : "development",
bail: isProd,
devtool: shouldUseSourceMap ?
isProd ? "source-map" : "inline-source-map" : false,
entry: [
isDev && require.resolve("react-hot-loader/patch"),
isDev && require.resolve("react-dev-utils/webpackHotDevClient"),
require.resolve("./polyfills"),
paths.clientEntry,
].filter(Boolean),
output: {
path: paths.clientBuildDir,
pathinfo: isDev,
filename: isProd ?
'static/js/[name].[chunkhash:8].js' : "static/js/bundle.js",
chunkFilename: isProd ?
'static/js/[name].[chunkhash:8].chunk.js' : "static/js/[name].chunk.js",
publicPath: publicPath,
devtoolModuleFilenameTemplate: isDev ?
(info) =>
"webpack://" + path.resolve(info.absoluteResourcePath).replace(/\\/g, "/") : undefined,
const rules = env => {
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
const styleLoader =
env === "prod"
? {
loader: MiniCssExtractPlugin.loader
}
: require.resolve("style-loader");
const cssRule = {
test: /\.css$/,
use: [
styleLoader,
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1
}
},
postCssConfig
]
};
const sassRule = {
test: /\.scss$/,
use: [
styleLoader,
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1
}
},
postCssConfig,
sassConfig
]
};
return [
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. when no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data urls to avoid requests.
// a missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
limit: env === "prod" ? 10000 : 0,
name: "static/media/[name].[hash:8].[ext]"
}
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json", ".scss"],
alias: {
"@client": paths.clientDir,
"@common": paths.commonDir,
cssRule,
sassRule,
// Process TypeScript with TSC through HappyPack.
{
test: /\.tsx?$/,
include: [paths.clientDir, paths.commonDir],
use: [
{ loader: "cache-loader" },
{
loader: "thread-loader",
options: {
workers: require("os").cpus().length - 1
}
},
{
loader: "ts-loader",
options: {
configFile: paths.clientTsConfig,
happyPackMode: true
}
}
]
},
module: {
rules: rules(env),
},
plugins: plugins,
optimization: {
namedModules: isProd,
},
devServer: {
hot: true,
historyApiFallback: true,
host: "0.0.0.0",
port: 8081,
proxy: [{
context: ["/api"],
target: paths.publicUrl,
}],
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn"t use a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// it"s runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve("file-loader"),
options: {
name: "static/media/[name].[hash:8].[ext]"
}
}
]
}
};
];
};
const getConfig = (module.exports = env => {
const isProd = env === "prod";
const isDev = env === "dev";
// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
if (
isProd &&
environ.stringified["process.env"].NODE_ENV !== '"production"'
) {
throw new Error("Production builds must have NODE_ENV=production.");
}
const plugins = [
new HtmlWebpackPlugin({
inject: true,
template: paths.clientHtml,
minify: isProd
? {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
: undefined
}),
new FaviconsWebpackPlugin(
path.resolve(paths.clientDir, "images", "favicon-96x96.png")
),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === "production") { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(environ.stringified),
new CaseSensitivePathsPlugin(),
isProd &&
new UglifyJsPlugin({
sourceMap: shouldUseSourceMap
}),
isDev && new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new ForkTsCheckerWebpackPlugin({
checkSyntacticErrors: true,
tsconfig: paths.clientTsConfig,
tslint: paths.tslintConfig
}),
isDev && new DashboardPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false,
reportFilename: path.resolve(paths.serverBuildDir, "report.html")
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
isProd &&
new MiniCssExtractPlugin({
filename: "static/css/[name].[chunkhash:8].css",
chunkFilename: "static/css/[id].[chunkhash:8].css"
})
].filter(Boolean);
return {
mode: isProd ? "production" : "development",
bail: isProd,
devtool: shouldUseSourceMap
? isProd
? "source-map"
: "inline-source-map"
: false,
entry: [
isDev && require.resolve("react-hot-loader/patch"),
isDev && require.resolve("react-dev-utils/webpackHotDevClient"),
require.resolve("./polyfills"),
paths.clientEntry
].filter(Boolean),
output: {
path: paths.clientBuildDir,
pathinfo: isDev,
filename: isProd
? "static/js/[name].[chunkhash:8].js"
: "static/js/bundle.js",
chunkFilename: isProd
? "static/js/[name].[chunkhash:8].chunk.js"
: "static/js/[name].chunk.js",
publicPath: publicPath,
devtoolModuleFilenameTemplate: isDev
? info =>
"webpack://" +
path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")
: undefined
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json", ".scss"],
alias: {
"@client": paths.clientDir,
"@common": paths.commonDir
}
},
module: {
rules: rules(env)
},
plugins: plugins,
optimization: {
namedModules: isProd
},
devServer: {
hot: true,
historyApiFallback: true,
host: "0.0.0.0",
port: 8081,
proxy: [
{
context: ["/api"],
target: paths.publicUrl
}
]
}
};
});

37
package.json
View File

@ -46,13 +46,13 @@
"express-promise-router": "^3.0.3",
"jsonwebtoken": "^8.3.0",
"lodash": "^4.17.10",
"mobx": "^5.0.3",
"mobx": "^5.1.0",
"mobx-utils": "^5.0.1",
"module-alias": "^2.1.0",
"moment": "^2.22.2",
"mqtt": "^2.18.3",
"mqtt": "^2.18.8",
"pg": "^7.4.3",
"pino": "^5.2.0",
"pino": "^5.4.0",
"pump": "^3.0.0",
"reflect-metadata": "^0.1.12",
"serializr": "^1.3.0",
@ -70,13 +70,13 @@
"@types/jsonwebtoken": "^7.2.8",
"@types/lodash": "^4.14.116",
"@types/module-alias": "^2.0.0",
"@types/node": "^10.7.1",
"@types/node": "^10.9.4",
"@types/object-assign": "^4.0.30",
"@types/pino": "^4.16.1",
"@types/pino": "^5.20.0",
"@types/prop-types": "^15.5.5",
"@types/pump": "^1.0.1",
"@types/query-string": "^6.1.0",
"@types/react": "16.4.11",
"@types/react": "16.4.13",
"@types/react-dom": "16.0.7",
"@types/react-hot-loader": "^4.1.0",
"@types/react-router-dom": "^4.3.0",
@ -85,23 +85,23 @@
"@types/webpack-env": "^1.13.6",
"@types/ws": "^6.0.0",
"async": "^2.6.1",
"autoprefixer": "^9.1.2",
"autoprefixer": "^9.1.3",
"cache-loader": "^1.2.2",
"case-sensitive-paths-webpack-plugin": "^2.1.2",
"classnames": "^2.2.6",
"css-loader": "^1.0.0",
"dotenv": "^6.0.0",
"favicons-webpack-plugin": "^0.0.9",
"file-loader": "^1.1.11",
"file-loader": "^2.0.0",
"font-awesome": "^4.7.0",
"fork-ts-checker-webpack-plugin": "^0.4.9",
"happypack": "^5.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"mini-css-extract-plugin": "^0.4.2",
"mobx-react": "^5.2.5",
"mobx-react-devtools": "^6.0.3",
"mobx-react-router": "^4.0.4",
"node-sass": "^4.9.3",
"nodemon": "^1.18.3",
"nodemon": "^1.18.4",
"npm-run-all": "^4.1.3",
"object-assign": "^4.1.1",
"postcss-flexbugs-fixes": "^4.1.0",
@ -111,31 +111,32 @@
"prop-types": "^15.6.2",
"query-string": "^6.1.0",
"react": "16.4.2",
"react-dev-utils": "^5.0.1",
"react-dev-utils": "^5.0.2",
"react-dom": "16.4.2",
"react-hot-loader": "^4.3.4",
"react-hot-loader": "^4.3.5",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-sortable-hoc": "^0.8.3",
"sass-loader": "^7.1.0",
"semantic-ui-css": "^2.3.3",
"semantic-ui-react": "^0.82.2",
"semantic-ui-react": "^0.82.3",
"source-map-loader": "^0.2.4",
"style-loader": "^0.22.1",
"style-loader": "^0.23.0",
"thread-loader": "^1.2.0",
"ts-loader": "^4.5.0",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.15.0",
"tslint-consistent-codestyle": "^1.13.3",
"tslint-react": "^3.6.0",
"typescript": "^3.0.1",
"typescript": "^3.0.3",
"uglify-es": "^3.3.9",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.1.1",
"webpack": "^4.16.5",
"webpack": "^4.17.1",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0",
"webpack-dashboard": "^2.0.0",
"webpack-dev-server": "^3.1.5"
"webpack-dev-server": "^3.1.7"
},
"resolutions": {
"**/@types/react": "16.4.11",

1
paths.js
View File

@ -19,6 +19,7 @@ function ensureSlash(p, needsSlash) {
exports.dotenv = resolveRoot(".env");
exports.nodeModulesDir = resolveRoot("node_modules");
exports.packageJson = resolveRoot("package.json");
exports.tslintConfig = resolveRoot("tslint.json");
exports.publicUrl = ensureSlash(process.env.PUBLIC_URL || "http://localhost:8080/", true);
exports.publicPath = ensureSlash(url.parse(exports.publicUrl).pathname || "/", true);

631
yarn.lock
View File

File diff suppressed because it is too large Load Diff