Develop Reference

Browser will not Launch on npm start with webpack Related to webpack-dev-middleware#3.7.2 and webpack#^4.0.0 Peer Dependency Issue?

I am brand new to JavaScript. In an attempt to learn JavaScript, I cloned the webpack-starter project from GitHub (https://github.com/wbkd/webpack-starter). Then, I ran a npm install in the clone folder on my desktop, and then I ran a npm audit fix upon seeing a found 1 low severity vulnerability message in the Git Bash console. Then, I saw this message, npm WARN webpack-dev-middleware#3.7.2 requires a peer of webpack#^4.0.0 but none is installed. You must install peer dependencies yourself.
Before investigating the above warning, I ran a npm start in PowerShell from the project folder. I received no error messages, but my browser (Chrome) never launched.
Then, I investigated the npm WARN message and found this, https://stackoverflow.com/a/64733624/9698039, which led me to this, https://github.com/webpack/webpack-dev-server/issues/2807#issuecomment-734982609, which led me to the decision to downgrade my version of webpack from ^5.10.0 to "webpack": "^4.0.0".
Before downgrading, here was my package.json:
{
"name": "webpack-starter",
"version": "1.0.0",
"description": "A light foundation for your next frontend project based on webpack.",
"scripts": {
"lint": "npm run lint:styles; npm run lint:scripts",
"lint:styles": "stylelint src",
"lint:scripts": "eslint src",
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js",
"start": "webpack serve --config webpack/webpack.config.dev.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wbkd/webpack-starter.git"
},
"keywords": [
"webpack",
"startkit",
"frontend",
"es6",
"javascript",
"webdev"
],
"author": "webkid.io",
"license": "MIT",
"bugs": {
"url": "https://github.com/wbkd/webpack-starter/issues"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.12.7",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.4.0",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"eslint": "^7.15.0",
"eslint-loader": "^4.0.2",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.2",
"node-sass": "^5.0.0",
"postcss-loader": "^4.1.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"stylelint": "^13.8.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-webpack-plugin": "^2.1.1",
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"core-js": "^3.8.1"
}
}
And here was my webpack.config.dev.js:
const Path = require('path');
const Webpack = require('webpack');
const { merge } = require('webpack-merge');
const StylelintPlugin = require('stylelint-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'eval-cheap-source-map',
output: {
chunkFilename: 'js/[name].chunk.js',
},
devServer: {
inline: true,
hot: true,
},
plugins: [
new Webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
new StylelintPlugin({
files: Path.join('src', '**/*.s?(a|c)ss'),
}),
],
module: {
rules: [
{
test: /\.js$/,
include: Path.resolve(__dirname, '../src'),
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
},
},
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.js$/,
include: Path.resolve(__dirname, '../src'),
loader: 'babel-loader',
},
{
test: /\.s?css$/i,
use: ['style-loader', 'css-loader?sourceMap=true', 'postcss-loader', 'sass-loader'],
},
],
},
});
To downgrade webpack, I changed "webpack": "^5.10.0" to "webpack": "^4.0.0" in the package.json and then ran npm install from Git Bash again.
Then, I ran npm start from PowerShell once again, and once again I see no error message, and I see the Compiled successfully message, but once again the browser does not launch. It appears as if the webpack peer dependency issue is unrelated to the failure of browser to launch issue, but I am new to JavaScript and therefore currently unable to make that claim with 100% confidence.

So, I looked around some more and found this, https://stackoverflow.com/a/39753225/9698039, so I added open: true to devServer in the webpack.config.dev.js, resulting in this,
devServer: {
inline: true,
hot: true,
open: true
}
And that worked! My browser launched. I'm still not sure if I could have used webpack without downgrading, but it seems like the browser launch issue is unrelated to the peer dependency issue.

Error in Entry module not found and in webpack

I'm new to JavaScript and follow a clear node-tutorial on Github.
But whatever I've tried in all modules, I keep getting this error message when I run yarn dev:wds
ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Renate\projects'
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found:
Error: Can't resolve './src' in 'C:\Users\Renate\projects' # multi (webpack)-dev-
server/client?http://localhost:8
I've tried this solution, but reinstalling babel-loader 7 did not solve my problem. I've also tried to re-intall the entire webpack-module, but that did not solve my problem either.
My webpack.config.babel.js file:
// #flow
import path from 'path'
import webpack from 'webpack'
import { WDS_PORT } from './src/shared/config'
import { isProd } from './src/shared/util'
export default {
entry: [
'react-hot-loader/patch',
'./src/client',
],
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, 'dist/'),
publicPath: isProd ? '/static/' : `http://localhost:${WDS_PORT}/dist/`,
},
module: {
rules: [
{ test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ },
],
},
devtool: isProd ? false : 'source-map',
resolve: {
extensions: ['.js', '.jsx'],
},
devServer: {
port: WDS_PORT,
hot: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
}
My babelrc.json file:
{
"presets": [
"env",
"flow",
"react"
],
"plugins": [
"flow-react-proptypes"
]
}
My package.json file
{
"name": "your-project",
"version": "1.0.0",
"license": "MIT",
"browserslist": [
"> 1%"
],
"scripts": {
"start": "yarn dev:start",
"dev:start": "nodemon -e js,jsx --ignore lib --ignore dist --exec babel-node src/server",
"dev:wds": "webpack-dev-server --progress",
"prod:build": "rimraf lib dist && babel src -d lib --ignore .test.js && cross-env NODE_ENV=production webpack -p --progress",
"prod:start": "cross-env NODE_ENV=production pm2 start lib/server && pm2 logs",
"prod:stop": "pm2 delete server",
"lint": "eslint src webpack.config.babel.js",
"test": "yarn lint && flow && jest --coverage",
"precommit": "yarn test",
"prepush": "yarn test && yarn prod:build"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"compression": "^1.7.4",
"express": "^4.17.1",
"immutable": "4.0.0-rc.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-hot-loader": "^4.5.3",
"react-redux": "^7.1.3",
"redux": "^4.0.5",
"redux-actions": "^2.6.5"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/node": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#babel/preset-flow": "^7.8.3",
"#babel/preset-react": "^7.8.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.3",
"babel-jest": "^25.1.0",
"babel-loader": "7",
"babel-plugin-flow-react-proptypes": "^25.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^7.0.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-compat": "^3.5.1",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "1.7.0",
"flow-bin": "^0.118.0",
"husky": "^4.2.1",
"jest": "^25.1.0",
"nodemon": "^2.0.2",
"pm2": "^4.2.3",
"rimraf": "^3.0.2",
"webpack": "^4.41.6",
"webpack-babel-env-deps": "^1.6.3",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3"
},
"type": "module"
}
My eslintrc.json file
{
"extends": [
"airbnb",
"plugin:flowtype/recommended"
],
"plugins": [
"flowtype",
"compat"
],
"env": {
"browser": true,
"jest": true
},
"rules": {
"semi": [2, "never"],
"no-unexpected-multiline": 2,
"compat/compat": 2,
"linebreak-style": [2, "windows"]
},
"parser": "babel-eslint"
}
for reference, please find attached snapshot of my folder structure here.
And if you check this Github page or this, you will see there are more with the same problem, but no solution worked for me so far. Hope you can help me!
update
I've also tried the suggestion of Alex (see answer here below), did not work.
...
entry: [
'react-hot-loader/patch',
path.resolve(__dirname, './src/client')
],
...

Just a suggestion: have you tried resolving the problematic path before passing it to webpack? Something along the lines: path.resolve(__dirname, './src/client') will convert the path from relative to absolute and often times it helps to quiet various loaders.
...
entry: [
'react-hot-loader/patch',
path.resolve(__dirname, './src/client'),
],
...

I checked your repo and I solved the webpack issue. the main issue was everytime you imported a jsx file, you need to write the extention as jsx. and also there were some errors inside components so some of the components were not resolved. here is one in button.jsx
// type Props = {
// label: string,
// handleClick: Function,
// }
and also since implementation of many packages changed, bundle.js is giving error. for example for react hot reload package, there is no need to import this :
import { AppContainer } from 'react-hot-loader'
check the documentation.
also many babel packages were old version. so i Installed the new packages. you can check the package.json.
implementation of webpack config was also wrong. in webpack.config.js entry point takes relative path but output point takes absolute path. I organized the webpack.config.js.
this project also implements server-side code but for this, you need another webpack.config.js for dev. and also for server-side rendering, you need to use ReactDOM.hydrate and also there are too many important things that this project did not implement. here is the repo:
modified repo

What is bundling my rollup project when it's a dependency of another project

I'm trying to create a React Website using 2 projects:
React-kit to store a list a components
React-app who run the React server (and have React-kit as dependency)
I mostly followed this tutorial to build my React-kit using Rollup (and babel).
I put React-Kit as dependency into my React-App using private github repository: (I added all my building files (rollup, babel and webpack for both projects) at the end of the questions if needed.)
package.json
{
/* ... */
"dependencies": {
"react-kit": "github:myUser/react-Kit",
/* ... */
}
}
First at all it's working fine on local, and it's a big question for me? Who did the job for it ?
During my research I notice:
dist/ is not present in React-Kit github repository (but src/ is here)
dist/ is present on my local React-App/node_modules/react-kit/ (with only package*.json, not src/)
When I do my npm i on React-App the React-kit is downloaded (that part i understand ^^) then bundled by his rollup config file.
How my react-kit has been bundled ? Who did the call the start rollup when I did my npm i on React-App ??
Second I tying to deploy the React-App project on production using Jenkins, but in this case
my react-kit/dist is not here and React-App/node_modules/react-kit only have package*.json (so my react-app build fail because react-kit cannot be imported).
What's going on here ? I trying with both env (dev and prod) on both local and AWS but it's always the same things.
I think I'm missing something here..
React-kit
rollup.config.js
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svgr from '#svgr/rollup'
import { terser } from 'rollup-plugin-terser'
import pkg from './package.json'
export default {
input: 'src/lib/index.js',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true,
},
{
file: pkg.module,
format: 'es',
sourcemap: true,
},
],
plugins: [
external({
// includeDependencies: true,
}),
postcss({
plugins: [],
minimize: true,
sourceMap: 'inline',
}),
url(),
svgr(),
resolve(),
babel({
plugins: [
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-proposal-class-properties',
'transform-react-remove-prop-types',
],
exclude: 'node_modules/**',
}),
commonjs(),
// terser(), // Activate to minimify
],
}
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": false
}
],
"#babel/preset-react"
],
"env": {
"test": {
"presets": [
[
"react-app"
]
]
}
},
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties"
]
}
package.json
{
"name": "react-kit",
"version": "0.1.0",
"description": "React components dictionary for Projects",
"author": "",
"license": "ISC",
"main": "dist/index.js",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"scripts": {
"dev": "run-p build:watch start",
"start": "styleguidist server --open",
"styleguide:build": "styleguidist build",
"build": "rollup -c",
"build:watch": "rollup -c -w",
"test": "jest",
"test:coverage": "jest --coverage --forceExit --colors",
"lint": "esw --ext .jsx --ext .js --color",
"lint:fix": "npm run lint --fix",
"prepare": "npm run build",
"prerelease": "npm run lint:fix && npm run test:coverage && npm run build",
"release": "npm publish",
"predeploy": "npm run styleguide:build",
"deploy": "gh-pages -d styleguide"
},
"dependencies": {
"formik": "^1.5.8"
},
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"#babel/core": "^7.5.4",
"#babel/plugin-proposal-class-properties": "^7.5.0",
"#babel/plugin-proposal-object-rest-spread": "^7.5.4",
"#babel/plugin-proposal-optional-chaining": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.5.4",
"#babel/preset-react": "^7.0.0",
"#svgr/rollup": "^4.3.1",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.2",
"babel-jest": "^24.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-preset-react-app": "^9.0.0",
"cross-env": "^5.2.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^6.0.1",
"eslint-config-airbnb": "^17.1.1",
"eslint-plugin-flowtype": "^3.11.1",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-jest": "^22.7.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^1.6.1",
"eslint-watch": "^5.1.2",
"gh-pages": "^2.0.1",
"jasmine-expect": "^4.0.2",
"jest": "^24.8.0",
"jest-pnp-resolver": "^1.2.1",
"jest-resolve": "^24.8.0",
"node-sass": "^4.12.0",
"npm-run-all": "^4.1.5",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-styleguidist": "^9.1.11",
"react-test-renderer": "^16.8.6",
"rollup": "^1.16.7",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-terser": "^5.1.1",
"rollup-plugin-url": "^2.2.2",
"webpack": "^4.35.3",
"webpack-blocks": "^2.0.1"
},
"files": [
"dist"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts",
"!src/**/index.js"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom",
"<rootDir>/scripts/enzymeConfig.js"
],
"testMatch": [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[jt]s?(x)"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/scripts/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/scripts/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
}
}
React-App
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const Dotenv = require('dotenv-webpack');
const env = process.env.NODE_ENV || 'development';
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new Dotenv({
path: `.env.${env !== 'development' ? env : ''}`,
})
],
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
]
}
}
module.exports = config;
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
};
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": false
},
"#babel/preset-react'"
],
],
"plugins": [
["#babel/transform-runtime"]
]
}

From the NPM documentation, i understand that prepare is called with npm install without argument on a local environment.
Your prepare script calls build script then build script calls rollup command

webpack-dev-server not building, neither running hot reload (react.js)

I am very new to React and facing problem while following a tutorial. I was able to build and run output js file using webpack command, but I am not able to build it with webpack-dev-server. Can someone find out the mistake?
Here is the exact command I am using npm run dev. Below is the code.
IDE used: Visual Studio Code
Folder Structure:
Here in the structure, the build.min.js file under dist folder i have, is what I built running manually webpack command, but on running webpack-dev-server and changing any .js / .html file it is not rebuilding/reloading. Here are the configuration files.
Package.json
{
"name": "reacr-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.19.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"jquery": "^3.1.1",
"lodash": "^4.17.4",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^1.14.0"
},
"devDependencies": {
"nodemon": "^1.11.0",
"webpack-dev-server": "^1.16.2"
}
}
Webpack.config.json
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname + "/src",
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/app.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
}
]
},
output: {
path: __dirname + "/src/dist",
filename: "build.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};`

Webpack build step isn't generating build files

When I run npm build nothing seems to happen. When I look for the build files I don't see anything. npm start works fine though.
Package.json
{
"name": "pro-react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress",
"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"postcss-loader": "^0.9.1",
"precss": "^1.4.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1"
}
}
Webpack.production.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
}
]
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
]
}
I also have .babelrc file and webpack.config.js file, let me know if those would be useful to see as well, thanks.

Might be related to the fact that build is an internal command. Seems like I have had this happen to me as well in the past. Check out this Question
In order to run a custom script, you can use the npm run-script build or just npm run build. As stated in the NPM documentation