I am trying to use Webpack since I want to use ES modules in my Electron application but having some hurdles. I just want to use import in my main as well as renderer processes.
My application structure is as follows -
- src/ // contains basic html, css & js
- index.html // <h1>Hello World</h1>
- style.css // is empty
- app.js // console.log('it works 🙈')
- app/ // contains electron code
- main_window.js
- custom_tray.js
- index.js // entry point for electron application
- dist/ // output bundle generated from webpack
- bundle.js
My index.js file looks like -
import path from "path";
import { app } from "electron";
import MainWindow from "./app/main_window";
import CustomTray from "./app/custom_tray";
let win = null,
tray = null;
app.on("ready", () => {
// app.dock.hide();
win = new MainWindow(path.join("file://", __dirname, "/src/index.html"));
win.on("closed", () => {
win = null;
});
tray = new CustomTray(win);
});
My main_window.js file looks like -
import { BrowserWindow } from "electron";
const config = {
width: 250,
height: 350,
show: false,
frame: false,
radii: [500, 500, 500, 500],
resizable: false,
fullscreenable: false
};
class MainWindow extends BrowserWindow {
constructor(url) {
super(config);
this.loadURL(url);
this.on("blur", this.onBlur);
this.show();
}
onBlur = () => {
this.hide();
};
}
export default MainWindow;
My custom_tray.js looks like -
import path from "path";
import { app, Tray, Menu } from "electron";
const iconPath = path.join(__dirname, "../src/assets/iconTemplate.png");
class CustomTray extends Tray {
constructor(mainWindow) {
super(iconPath);
this.mainWindow = mainWindow;
this.setToolTip("Thirsty");
this.on("click", this.onClick);
this.on("right-click", this.onRightClick);
}
onClick = (event, bounds) => {
const { x, y } = bounds;
const { width, height } = this.mainWindow.getBounds();
const isMac = process.platform === "darwin";
if (this.mainWindow.isVisible()) {
this.mainWindow.hide();
} else {
this.mainWindow.setBounds({
x: x - width / 2,
y: isMac ? y : y - height,
width,
height
});
this.mainWindow.show();
}
};
onRightClick = () => {
const menuConfig = Menu.buildFromTemplate([
{
label: "Quit",
click: () => app.quit()
}
]);
this.popUpContextMenu(menuConfig);
};
}
export default CustomTray;
And my webpack.main.config.js looks like -
const path = require("path");
const config = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [{ test: /\.js$/, exclude: /node_modules/, use: "babel-loader" }]
},
stats: {
colors: true
},
target: "electron-main",
devtool: "source-map"
};
module.exports = config;
And my webpack.renderer.config.js looks like -
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const config = {
entry: "./src/app.js",
output: {
path: path.resolve(__dirname, "dist/renderer"),
filename: "app.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.css$/,
use: {
loader: "css-loader",
options: {
minimize: true
}
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: "url-loader",
query: {
limit: 10000,
name: "imgs/[name].[ext]"
}
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: "url-loader",
query: {
limit: 10000,
name: "fonts/[name].[ext]"
}
}
}
]
},
stats: {
colors: true
},
target: "electron-renderer",
devtool: "source-map",
plugins: [
new CopyWebpackPlugin([
{ from: "src/app.css" },
{ from: "src/assets", to: "assets/" }
]),
new HtmlWebpackPlugin({
filename: "index.html",
template: path.resolve(__dirname, "./src/index.html"),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
}
})
]
};
module.exports = config;
My scripts in package.json look like
"scripts": {
"dev:main": "webpack --mode development --config webpack.main.config.js",
"dev:renderer": "webpack --mode development --config webpack.renderer.config.js",
"dev:all": "npm run dev:main && npm run dev:renderer",
"build:main": "webpack --mode production --config webpack.main.config.js",
"build:renderer": "webpack --mode production --config webpack.renderer.config.js",
"build:all": "npm run build:main && npm run build:renderer",
"prestart": "npm run build:all",
"electron": "electron dist/index.js",
"start": "npm run electron",
}
Currently my application creates a dist/bundle.js but when I run electron dist/bundle.js it doesn't work. I get it, it might be because it does not contain src folder but when I copy src folder into dist it still doesn't work.
Firstly, I run npm run dev:main to generate dist/bundle.js then I run npm run dev:renderer to generate dist/renderer/bundle.js & then I run npm run start to start my electron application.
It gives me error "Uncaught Exception: Error: Requires constructor call at new MainWindow" which is in index.js where I call constructor new MainWindow()
I just want to use ES6 in all my JS files. Is there any boilerplate because the ones I found have tons of additional stuff like React JS & all plus a huge number of optimizations ?
After 8 days I found the answer finally. It works with ESM in Electron.
I've made a repo that is minimum & lets you write ESM with Electron.
The complete code can be found at https://github.com/deadcoder0904/electron-webpack-sample
Its very minimal so it should be easy to understand.
Related
So after npm build and npm run , why does my react application open with console on the screen? It was not happening when my packages were "webpack-cli": "^4.2.0" and "webpack-dev-server": "^3.11.1". Upgrading them is causing this issue. How can we fix this?
My package.json contains (devDependencies)
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"webpack": "^5.11.0",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3",
"webpack-manifest-plugin": "2.2.0",
"webpack-merge": "^5.7.2"
"eslint-webpack-plugin": "^2.1.0",
"html-webpack-plugin": "5.3.2",
"scripts": {
"start": "webpack serve --config config/webpack.config.js --env TARGET_ENV=development --env app=web --port 3000",
"build": "webpack --config config/webpack.config.js --env TARGET_ENV=production",
"build:staging": "webpack --config config/webpack.config.js --env TARGET_ENV=staging"
}
webpack.config.js
const { merge } = require("webpack-merge");
//const commonConfig = require("./webpack.common.js");
const paths = require("./paths");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const getClientEnvironment = require("./env");
module.exports = (env) => {
const targetEnv = env.TARGET_ENV;
const mode = targetEnv === "development" ? "development" : "production";
process.env.NODE_ENV = mode;
// Source maps are resource heavy and can cause out of memory issue for large source files.
// const shouldUseSourceMap = webpackEnv === "development";
const commonConfig = {
mode: mode,
// Where webpack looks to start building the bundle
entry: {
web: paths.src + "/web.tsx",
},
// Where webpack outputs the assets and bundles
resolve: {
extensions: [".tsx", ".ts", ".js"],
fallback: {
util: require.resolve("util/"),
},
modules: ["node_modules", "./src"],
},
// Customize the webpack build process
plugins: [
new webpack.ProvidePlugin({
process: "process/browser",
}),
// 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 is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(getClientEnvironment(targetEnv).stringified),
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
// Removes/cleans build folders and unused assets when rebuilding
new CleanWebpackPlugin(),
// Copies files from target to destination folder
new CopyWebpackPlugin({
patterns: [
{
from: paths.public,
to: paths.build,
globOptions: {
ignore: ["**/*.html"],
},
},
{
from: paths.appPath + "/web.config",
to: paths.build,
},
],
}),
// Generates an HTML file from a template
// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
new HtmlWebpackPlugin({
//favicon: paths.src + "/images/favicon.png",
template: paths.public + "/web.html", // template file
chunks: ["vendor", "web"],
filename: "web.html", // output file
inject: true,
}),
new HtmlWebpackPlugin({
template: paths.public + "/crossplatform.html", // template file
chunks: ["vendor", "crossplatform"],
filename: "crossplatform.html", // output file
inject: true,
}),
new ESLintPlugin({
// Plugin options
extensions: ["js", "jsx", "ts", "tsx"],
}),
],
// Determine how modules within the project are treated
module: {
rules: [
// JavaScript: Use Babel to transpile JavaScript files
{
test: /\.(ts|js)x?$/,
include: paths.src,
//exclude: /node_modules/,
loader: "babel-loader",
options: {
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
//sourceMaps: shouldUseSourceMap,
//inputSourceMap: shouldUseSourceMap,
},
},
// Images: Copy image files to build folder
{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },
// Fonts and SVGs: Inline files
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
],
},
};
const envConfig = require(`./webpack.${mode}.js`)({ app: env.app });
return merge(commonConfig, envConfig);
};
webpack.development.js
const webpack = require("webpack");
const paths = require("./paths");
module.exports = (args) => {
return {
// Control how source maps are generated
devtool: "cheap-module-source-map",
output: {
//path: paths.build,
publicPath: "./",
filename: "[name].js",
},
// Needed because of an issue with webpack dev server HMR with Webpack https://github.com/webpack/webpack-dev-server/issues/2758
target: "web",
// Spin up a server for quick development
devServer: {
historyApiFallback: {
index: "/" + args.app + ".html",
},
open: true,
devMiddleware: {
publicPath: "/",
},
hot: true,
// By default files from `contentBase` will not trigger a page reload.
// watchContentBase: true,
},
module: {
rules: [
// Styles: Inject CSS into the head with source maps
{
test: /\.(css)$/,
use: [
"style-loader",
{
loader: "css-loader",
//options: { sourceMap: true },
},
],
},
],
},
};
};
I am learning WebPack with a shortcode. In the code, we are trying to calculate the cube and square. They will suppose to store in a variable as per the following webpack.config.js.
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isDevelopment = process.env.NODE_ENV === 'development';
const config = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
library: {
type: 'var',
name: 'testVar'
},
filename: '[name].js'
},
mode: 'production',
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css",
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
new HtmlWebpackPlugin({
hash: true,
title: 'Video Player Play Ground',
myPageHeader: 'Sample Video Player',
template: './src/index.html',
filename: 'index.html'
})
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
exclude: /node_modules/,
use: [
// fallback to style-loader in development
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
{
test: /\.ts(x)?$/,
loader: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.svg$/,
use: 'file-loader'
}
]
},
resolve: {
extensions: [
'.tsx',
'.ts',
'.js',
'.scss'
]
},
optimization: {
usedExports: true,
runtimeChunk: false,
minimize: false
}
};
module.exports = config;
As shown in the above config, we store the compiled javascript in the variable with the name "testVar".
The above approach working fine when we are using the following command line code "webpack --mode production"
In the final generated javascript file we have a line which equals to
testVar = webpack_exports;
Also, testVar.start is working fine.
But the above approach is not working when we are using the following command line "webpack serve --mode production" or "webpack serve"
When we run a local server, the testVar.start is undefined. I am not sure what I am doing wrong.
Following is the code we are using in the index.html file to call the start function, which we defined in our internal javascript
window.onload = function (){
alert(testVar);
console.log(testVar);
if(testVar.start !== undefined)
{
alert(testVar.start);
console.log(testVar.start);
testVar.start(3,2);
}
else {
alert("Start Function is undefined");
}
}
Also following is the code insight from index.ts and math.ts.
import {cube, square} from './math';
export function start(c:number, s:number) {
console.log(cube(c));
console.log(square(s));
}
export function square(x:number) {
return x * x;
}
export function cube(x:number) {
return x * x * x;
}
enter image description here
Finally, I got it working :-).
I need to add the following line in my webpack.config.js
devServer: {
injectClient: false
},
Following is the reference URL: https://github.com/webpack/webpack-dev-server/issues/2484
Don't forget to Vote it. Thanks.
EDIT: It's now resolved. Got in to work this morning and thought "have you tried turning it on and off again?". So I did. Removed node_modules, reinstalled all packages - it worked. FML.
I'm upgrading to Webpack 4 and can't seem to get the watch to work.
When I run the watch script everything runs as expected the first time, but errors out during a file update.
The scripts I try:
"dev": "cross-env ENV=dev webpack --config config/bundling/webpack.config.js --mode=development",
"watch": "cross-env WATCH=true yarn run dev --watch"
(redundancies in the cross-env variables will be fixed later)
The errors I get are the following:
"WARNING in configuration
The 'mode' option has not been set, webpack will fallback to
'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior.
Learn more: https://webpack.js.org/concepts/mode/"
"ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src
Module not found: Error: Can't resolve './src' in [MY PATH HERE]
# multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]"
It seems like it doesn't read my webpack.config.js or the mode variable the on watch? Also, it succeeds in building the bundle, leading me to thing this might be an issue solely with the built-in webpack-dev-server.
I've tried everything I can think of, changing the scripts, changing the syntax of the mode flag, setting mode in webpack.config.js, tried relative paths, tried absolute paths, tried different versions of webpack and webpack-dev-server, moved my config file to the project root, sacrificed a small CPU to the Gods of code - nothing works.
I've been at this for days without any progress. Any help would be appreciated.
Versions:
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
Config:
require('dotenv').config()
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const moduleRules = require('./module.rules')
const config = require('./editable.config')
module.exports = function() {
const isDev = !!(process.env.ENV === 'dev')
const isProd = !!(process.env.ENV === 'prod')
const doServe = !!(process.env.SERVE === 'true')
const doWatch = !!(process.env.WATCH === 'true')
const webpackConfig = {
// Set mode
mode: isProd ? 'production' : 'development',
// Entry points.
entry: config.entrypoints,
// JS output name and destination.
output: {
path: config.paths.public,
filename: config.outputs.javascript.filename
},
// External dependencies.
externals: config.externals,
// Custom resolutions.
resolve: config.resolve,
// Rules for handling filetypes.
module: {
rules: [
moduleRules.javascript,
moduleRules.sass,
moduleRules.fonts,
moduleRules.images,
]
},
// Plugins running in every build.
plugins: [
new FriendlyErrorsWebpackPlugin(),
new MiniCssExtractPlugin(config.outputs.css),
new CleanWebpackPlugin(config.paths.public, { root: config.paths.root }),
new CopyWebpackPlugin([{
context: config.paths.images,
from: {
glob: `${config.paths.images}/**/*`,
flatten: false,
dot: false
},
to: config.outputs.image.filename,
}]),
new CopyWebpackPlugin([{
context: config.paths.fonts,
from: {
glob: `${config.paths.fonts}/**/*`,
flatten: false,
dot: false
},
to: config.outputs.font.filename,
}]),
],
devtool: isDev ? config.settings.sourceMaps : false,
watch: doWatch
}
// Set BrowserSync settings if serving
if (doServe) {
// setting our default settings...
const browserSyncSettings = {
host: 'localhost',
port: 3000,
proxy: process.env.HOME,
files: [
{
match: ['../../**/*.php'],
fn: function (event, file) {
if (event === 'change') {
this.reload()
}
}
}
]
}
// ...and overwriting them with user settings
Object.assign(browserSyncSettings, config.settings.browserSync)
webpackConfig.plugins.push(new BrowserSyncPlugin(browserSyncSettings))
}
return webpackConfig;
}
Config, part 2
const path = require('path')
module.exports = {
paths: {
root: path.resolve(__dirname, '../../'),
public: path.resolve(__dirname, '../../public'),
src: path.resolve(__dirname, '../../src'),
javascript: path.resolve(__dirname, '../../src/js'),
sass: path.resolve(__dirname, '../../src/sass'),
fonts: path.resolve(__dirname, '../../src/fonts'),
images: path.resolve(__dirname, '../../src/images'),
relative: '../../',
external: /node_modules/
},
entrypoints: {
main: ['./src/js/app.js', './src/sass/style.scss']
},
outputs: {
javascript: { filename: 'js/[name].js' },
css: { filename: 'css/[name].css' },
font: { filename: 'fonts/[path][name].[ext]' },
image: { filename: 'images/[path][name].[ext]' }
},
externals: {
},
resolve: {
},
settings: {
sourceMaps: 'cheap-module-source-map',
autoprefixer: {
browsers: ['last 3 versions', '> 1%', 'ie >= 10'],
},
browserSync: {
host: 'localhost',
port: 3000
}
}
}
Bonus question: is it possible to watch without having Webpack 4 start up a new devServer?
Thanks! <3
I'm a newbie in webpack and I'm using webpack 4 for my project. But I have a problem, I have some file scripts. In the first time to build with webpack dev server, it's run okay. But when server running, I continue create a new file script(example: c.js), rename or delete the exist file the server not auto build this script to main.js. How can automatic webpack rebuild my new file(c.js) to main.js without run command again?
This is my repo on github:
https://github.com/aiduc93/webpack4-scss-pug-es6
You can follow this step to reproduce my problem:
Step 1: start server with 'npm run dev' and run localhost:3000 in browser.
Step 2: when server running, we create new file(c.js), you can copy my code in hide.js or show.js and change the pluginName to 'anything'(ie: pluginName='clickable')
Step 3: go to index.pug, create new p tag with data-clickable(ie: p(data-clickable) clickable)
Step 4: refresh page in browser and click to text clickable. Js will not run because it not recompile.
This is my structure
//folder javascript in project
javascript
| hide.js
| show.js
| server.js
//folder dist after build
dist
| main.js
This is script in package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --hot",
"build": "webpack --mode production"},
This is webpack.config.js
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
entry: { main: glob.sync('./src/**/*.js*')} ,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
devtool: 'inline-source-map',
watch: true,
module: {
rules: [
{
test: /\.pug$/,
use: ["html-loader", "pug-html-loader"]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(
{
fallback: 'style-loader',
use: [ 'css-loader', 'sass-loader']
})
},
{
type: 'javascript/auto',
test: /\.json$/,
use: [
{
loader: 'file-loader',
options: {
name: "./plugin-config/[name].[ext]"
}
}
]
}
]
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
inline: true,
port: 3000,
// historyApiFallback: true,
hot: true
},
plugins: [
new ExtractTextPlugin(
{ filename: 'style.css'}
),
new CleanWebpackPlugin('dist', { watch: true,
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
}),
new WebpackMd5Hash(),
]
};
In webpack 4 only real entry-points are entry-points, this means, no vendor-scripts, plugins...in entry.
You cannot use glob here beause it creates an array of all js-files and only server.js is your real entry-point for your application!
Adding a js-file to your wp project doesn't mean it will be compiled as you don't reference it anywhere, so wp cannot know that it is needed.
WP creates a dependency graph starting from the dependencies of your entry-point(s) and creates the bundle(s).
Your server.js is your entry-point and should look like this:
import "../stylesheets/style.scss";
import $ from 'jquery';
import "./clickable" // without import no recompile!
import "./hide"
import "./show"
console.log("his");
console.log("hello, world23");
The entry-point in your webpack.config.js:
module.exports = {
entry: {
main: path.resolve(__dirname, "./src/javascripts/server.js")
},
I'm trying to concatenate, minify multiples javascript files into one, with webpack.
So my question can this be done with webpack? and How?
I tried a lot of ways, but couldn't get it to work as what I wanted.
Best I show examples.
3 javascript files.
app.js
var fnA = function () {
console.log('fnA')
}
global.js
fnA();
main.js
require('./app.js');
require('./global.js');
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry : [
'./app/main.js'
],
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'bundle.js'
},
plugins : [
new webpack.optimize.UglifyJsPlugin(
{
minimize: true,
compress: false,
mangle: {
keep_fnames: true
},
bare_returns : true
}),
]
};
I'm expecting that global.js is able to call to any function in app.js.
Probably this can be done with grunt, but I thought webpack can do this too.
Worry that I'm heading to a total wrong direction. Google around, but can't seem to find any solution, tried with other plugin suc as chunk, which doesn't helps.
Any advices are welcome.
Thanks in advance.
I put together something simple but you need babel.
https://github.com/vpanjganj/simple-webpack-sample
This is your webpack config:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [ "./app/main.js" ],
output: {
path: path.join(__dirname, "./dist"),
filename: "bundle.js"
},
module: {
rules: [
{ test: /\.js$/, use: [ { loader: 'babel-loader' } ], exclude: /node_modules/ }
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
]
};
here your 2 modules:
First module, moduleOne.js:
export default function sayHello() {
console.log('hello')
}
moduleTwo.js file:
export default function sayBye() {
console.log('bye')
}
and your main.js file:
import sayHello from './moduleOne'
import sayBye from './moduleTwo'
const myApp = ()=>{
sayHello();
sayBye()
};
myApp();
The command to build:
$ ./node_modules/.bin/webpack --color --display-error-details --config ./webpack.js"