缺少脚本：npm 中的 webpack

Question

我正在尝试重新构建一个 React 应用程序并使用 webpack 对其进行捆绑。每当我尝试运行时，npm run-script build它总是会显示 npm ERR! missing script: webpack

我尝试过的事情：

1. 删除了 node_modules 文件夹npm install（再次）
2. 全局安装了 webpack
3. 安装了 webpack-cli

您可能会注意到我使用的是某些模块的旧版本。这是因为这是一个在我受雇之前构建的遗留应用程序，现在我正在尝试将我构建的应用程序集成到这个应用程序中，但在此之前我想了解整个事情是如何作为香草工作的。

下面是我的 package.json 文件

{
  "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"
  }
}

这是我的 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;

任何帮助，将不胜感激。

Answer 1

在我的情况下，我只是将键“webpack”：“webpack”添加到节点“脚本”。这对我有用。

{ "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

错误消息：npm ERR! missing script: webpack让我相信您的webpack 安装在某个地方搞砸了，或者由于该项目的遗留性质而导致全局安装 webpack 导致问题。您可以尝试以下操作，看看是否可以解决您的问题：

1. 确保您的Node 版本与 webpack 兼容。文档建议使用Node的 LTS 版本：10.15.1 LTS。直接来自 webpack 的文档：

   “在开始之前，请确保您安装了新版本的 Node.js。当前的长期支持 (LTS) 版本是一个理想的起点。您可能会遇到旧版本的各种问题，因为它们可能会丢失webpack 和/或其相关包需要的功能。 ”

2. 卸载 Webpack 和 CLI：

   npm uninstall -g webpack npm uninstall webpack-cli

3. 在本地重新安装 webpack 和 cli，因为全局安装 webpack 可能会导致问题：

   “请注意，这不是推荐的做法。全局安装会将您锁定到特定版本的 webpack，并且在使用不同版本的项目中可能会失败。”

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

4. 更新您的自定义构建命令以包含 webpack.config.js 文件的路径。

   "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. 尝试再次运行构建脚本：

   npm run build

希望这有帮助！