Last active
March 30, 2020 20:54
-
-
Save LordA98/a28c0e86365aa114282cfa8174c74069 to your computer and use it in GitHub Desktop.
ERB & Tailwind - configs/webpack.config.renderer.dev.babel.js
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
/** | |
* Please Note : | |
* The bulk of the code in this file is not of my own creation, | |
* but of the creators of electron-react-boilerplate (https://github.com/electron-react-boilerplate/electron-react-boilerplate). | |
* I created and used this gist for a Medium article that is a guide to installing Tailwind CSS with ERB. | |
*/ | |
/** | |
* Build config for development electron renderer process that uses | |
* Hot-Module-Replacement | |
* | |
* https://webpack.js.org/concepts/hot-module-replacement/ | |
*/ | |
import path from 'path'; | |
import fs from 'fs'; | |
import webpack from 'webpack'; | |
import chalk from 'chalk'; | |
import merge from 'webpack-merge'; | |
import { spawn, execSync } from 'child_process'; | |
import { TypedCssModulesPlugin } from 'typed-css-modules-webpack-plugin'; | |
import baseConfig from './webpack.config.base'; | |
import CheckNodeEnv from '../internals/scripts/CheckNodeEnv'; | |
// When an ESLint server is running, we can't set the NODE_ENV so we'll check if it's | |
// at the dev webpack config is not accidentally run in a production environment | |
if (process.env.NODE_ENV === 'production') { | |
CheckNodeEnv('development'); | |
} | |
const port = process.env.PORT || 1212; | |
const publicPath = `http://localhost:${port}/dist`; | |
const dll = path.join(__dirname, '..', 'dll'); | |
const manifest = path.resolve(dll, 'renderer.json'); | |
const requiredByDLLConfig = module.parent.filename.includes( | |
'webpack.config.renderer.dev.dll' | |
); | |
/** | |
* Warn if the DLL is not built | |
*/ | |
if (!requiredByDLLConfig && !(fs.existsSync(dll) && fs.existsSync(manifest))) { | |
console.log( | |
chalk.black.bgYellow.bold( | |
'The DLL files are missing. Sit back while we build them for you with "yarn build-dll"' | |
) | |
); | |
execSync('yarn build-dll'); | |
} | |
export default merge.smart(baseConfig, { | |
devtool: 'inline-source-map', | |
mode: 'development', | |
target: 'electron-renderer', | |
entry: [ | |
...(process.env.PLAIN_HMR ? [] : ['react-hot-loader/patch']), | |
`webpack-dev-server/client?http://localhost:${port}/`, | |
'webpack/hot/only-dev-server', | |
require.resolve('../app/index.tsx') | |
], | |
output: { | |
publicPath: `http://localhost:${port}/dist/`, | |
filename: 'renderer.dev.js' | |
}, | |
module: { | |
rules: [ | |
{ | |
test: /\.global\.css$/, | |
use: [ | |
{ | |
loader: 'style-loader' | |
}, | |
{ | |
loader: 'css-loader', | |
options: { | |
sourceMap: true | |
} | |
}, | |
{ | |
loader: 'postcss-loader', | |
options: { | |
ident: 'postcss', | |
plugins: [require('tailwindcss'), require('autoprefixer')] | |
} | |
} | |
] | |
}, | |
{ | |
test: /^((?!\.global).)*\.css$/, | |
use: [ | |
{ | |
loader: 'style-loader' | |
}, | |
{ | |
loader: 'css-loader', | |
options: { | |
modules: { | |
localIdentName: '[name]__[local]__[hash:base64:5]' | |
}, | |
sourceMap: true, | |
importLoaders: 1 | |
} | |
} | |
] | |
}, | |
// SASS support - compile all .global.scss files and pipe it to style.css | |
{ | |
test: /\.global\.(scss|sass)$/, | |
use: [ | |
{ | |
loader: 'style-loader' | |
}, | |
{ | |
loader: 'css-loader', | |
options: { | |
sourceMap: true | |
} | |
}, | |
{ | |
loader: 'sass-loader' | |
} | |
] | |
}, | |
// SASS support - compile all other .scss files and pipe it to style.css | |
{ | |
test: /^((?!\.global).)*\.(scss|sass)$/, | |
use: [ | |
{ | |
loader: 'style-loader' | |
}, | |
{ | |
loader: 'css-loader', | |
options: { | |
modules: { | |
localIdentName: '[name]__[local]__[hash:base64:5]' | |
}, | |
sourceMap: true, | |
importLoaders: 1 | |
} | |
}, | |
{ | |
loader: 'sass-loader' | |
} | |
] | |
}, | |
// WOFF Font | |
{ | |
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, | |
use: { | |
loader: 'url-loader', | |
options: { | |
limit: 10000, | |
mimetype: 'application/font-woff' | |
} | |
} | |
}, | |
// WOFF2 Font | |
{ | |
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, | |
use: { | |
loader: 'url-loader', | |
options: { | |
limit: 10000, | |
mimetype: 'application/font-woff' | |
} | |
} | |
}, | |
// TTF Font | |
{ | |
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, | |
use: { | |
loader: 'url-loader', | |
options: { | |
limit: 10000, | |
mimetype: 'application/octet-stream' | |
} | |
} | |
}, | |
// EOT Font | |
{ | |
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, | |
use: 'file-loader' | |
}, | |
// SVG Font | |
{ | |
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, | |
use: { | |
loader: 'url-loader', | |
options: { | |
limit: 10000, | |
mimetype: 'image/svg+xml' | |
} | |
} | |
}, | |
// Common Image Formats | |
{ | |
test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/, | |
use: 'url-loader' | |
} | |
] | |
}, | |
resolve: { | |
alias: { | |
'react-dom': '@hot-loader/react-dom' | |
} | |
}, | |
plugins: [ | |
requiredByDLLConfig | |
? null | |
: new webpack.DllReferencePlugin({ | |
context: path.join(__dirname, '..', 'dll'), | |
manifest: require(manifest), | |
sourceType: 'var' | |
}), | |
new webpack.HotModuleReplacementPlugin({ | |
multiStep: true | |
}), | |
new TypedCssModulesPlugin({ | |
globPattern: 'app/**/*.{css,scss,sass}' | |
}), | |
new webpack.NoEmitOnErrorsPlugin(), | |
/** | |
* Create global constants which can be configured at compile time. | |
* | |
* Useful for allowing different behaviour between development builds and | |
* release builds | |
* | |
* NODE_ENV should be production so that modules do not perform certain | |
* development checks | |
* | |
* By default, use 'development' as NODE_ENV. This can be overriden with | |
* 'staging', for example, by changing the ENV variables in the npm scripts | |
*/ | |
new webpack.EnvironmentPlugin({ | |
NODE_ENV: 'development' | |
}), | |
new webpack.LoaderOptionsPlugin({ | |
debug: true | |
}) | |
], | |
node: { | |
__dirname: false, | |
__filename: false | |
}, | |
devServer: { | |
port, | |
publicPath, | |
compress: true, | |
noInfo: true, | |
stats: 'errors-only', | |
inline: true, | |
lazy: false, | |
hot: true, | |
headers: { 'Access-Control-Allow-Origin': '*' }, | |
contentBase: path.join(__dirname, 'dist'), | |
watchOptions: { | |
aggregateTimeout: 300, | |
ignored: /node_modules/, | |
poll: 100 | |
}, | |
historyApiFallback: { | |
verbose: true, | |
disableDotRule: false | |
}, | |
before() { | |
if (process.env.START_HOT) { | |
console.log('Starting Main Process...'); | |
spawn('npm', ['run', 'start-main-dev'], { | |
shell: true, | |
env: process.env, | |
stdio: 'inherit' | |
}) | |
.on('close', code => process.exit(code)) | |
.on('error', spawnError => console.error(spawnError)); | |
} | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment