Missing Script: webpack in npm

Question

I'm trying to re-build a react app and bundle it using webpack. Whenever I try to run npm run-script build it would always show a npm ERR! missing script: webpack

Things that I've tried:

1. Deleted the node_modules folder the doing a npm install (again)
2. installed the webpack globally
3. installed the webpack-cli

You may notice that I am using old version of some modules. This is because this is a legacy app built before I was employed and now I am trying to integrate the app that I built into this app but before that I would like to understand how the whole thing works as vanilla.

Below is my package.json file

{
  "name": "storyline-feedback-tool",
  "version": "1.1.2",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start-hot": "node server.js",
    "start": "webpack-dev-server --content-base public/ --inline --port 3001"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "^6.13.0",
    "classnames": "^2.2.5",
    "g": "^2.0.1",
    "lodash": "^4.15.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-spin": "^0.6.2",
    "webpack": "^1.15.0",
    "webpack-cli": "^3.2.3"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.14.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.24.0",
    "eslint": "^3.3.1",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.2.0",
    "eslint-plugin-react": "^6.1.2",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "postcss-loader": "^0.11.0",
    "postcss-pxtorem": "^3.3.1",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.1",
    "webpack-dev-server": "^1.15.1"
  }
}

Here is my webpack.config.js

var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var postcssPxtorem = require('postcss-pxtorem');


var config = {
  name: 'feedback-tool',
  entry: {
    'feedback-main': './src/index-main.js',
    'feedback-form': './src/index-form.js',
  },
  output: {
    path: path.resolve(__dirname, 'public/feedback'),
    publicPath: '/feedback/',
    filename: '[name].js'
  }
};

config.module = {
  loaders: [
    {
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      exclude: /(node_modules)/,
      loader: 'babel',
    },
    {
      test: /\.less$/,
      loader: "style-loader!css-loader!postcss-loader!less-loader"
    },
    {
      test: /\.css$/,
      loader: "style-loader!css-loader!postcss-loader"
    }
  ]
};

config.postcss = function () {
  return [
    autoprefixer({
      browsers: [
        'last 2 version',
        'ie > 8']
    }),
    postcssPxtorem({
      propWhiteList: []
    })]
};

config.plugins = [
  new webpack.optimize.UglifyJsPlugin({
   compress: {
   warnings: false,
   },
   output: {
   comments: false,
   },
  }),
  new webpack.DefinePlugin({
   'process.env': {
   'NODE_ENV': '"production"'
   }
  }),
];

module.exports = config;

Any help would be appreciated.

Answer 1

in my case I just add to node "Scripts" the key "webpack":"webpack". and that worked for me.

{ "name": "reactdemo", "version": "1.0.0", "description": "lmora demo", "main": "app.js", "scripts": { "webpack": "webpack", "test": "echo \"Error: no test specified\" && exit 1" },

Answer 2

The error message of: npm ERR! missing script: webpack makes me believe your webpack installation screwed up somewhere down the line or having webpack installed globally is causing issues due to the legacy nature of this project. Could you try the following and see if this resolves your issue:

1. Ensure that your version of node is compatible with webpack. The documentation recommends using the LTS version of Node: 10.15.1 LTS. Directly from webpack's documentation:

   "Before we begin, make sure you have a fresh version of Node.js installed. The current Long Term Support (LTS) release is an ideal starting point. You may run into a variety of issues with the older versions as they may be missing functionality webpack and/or its related packages require."

2. Uninstall Webpack and the CLI:

   npm uninstall -g webpack npm uninstall webpack-cli

3. Re-Install webpack and the cli locally since installing webpack globally may cause issues:

   "Note that this is not a recommended practice. Installing globally locks you down to a specific version of webpack and could fail in projects that use a different version."

   npm install --save-dev webpack npm install --save-dev webpack-cli

4. Update your custom build command to include the path to your webpack.config.js file.

   "scripts": { "build": "webpack --config <path_to_webpack_config>/webpack.config.js", "start-hot": "node server.js", "start": "webpack-dev-server --content-base public/ --inline --port 3001" },

5. Try running your build script again:

   npm run build

Hopefully that helps!