Question

我正在尝试重新构建一个React应用并使用webpack捆绑它。每当我尝试运行npm run-script build时，它将始终显示npm ERR! missing script: webpack

我尝试过的事情：

再次执行npm install删除了node_modules文件夹
全局安装了webpack
安装了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

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

确保您的节点版本与webpack兼容。该文档建议使用Node的LTS版本： 10.15.1 LTS 。直接来自webpack的documentation:

”“在开始之前，请确保您已安装Node.js的新版本。当前的长期支持（LTS）版本是一个理想的起点。对于较旧的版本，您可能会遇到很多问题版本，因为它们可能缺少webpack和/或其相关软件包所需的功能。“
卸载Webpack和CLI ：

npm uninstall -g webpack npm uninstall webpack-cli
在本地重新安装Webpack和cli ，因为全局安装Webpack可能会引起问题：

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

npm install --save-dev webpack npm install --save-dev webpack-cli
更新您的自定义构建命令，以包括您的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" },
尝试再次运行构建脚本：

npm run build

希望有帮助！

Answer 2

在我的情况下，我仅将“ 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" },

缺少脚本：npm中的webpack

2 个答案: