最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

缺少脚本:在的WebPack NPM

运维笔记admin15浏览0评论

缺少脚本:在的WebPack NPM

缺少脚本:在的WebPack NPM

我试图重新建立一个反应的应用和使用的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;

任何帮助,将不胜感激。

回答如下:

的错误消息:npm ERR! missing script: webpack使我相信你的WebPack安装搞砸了某个地方的路线或已安装的WebPack全球造成由于这个项目的遗留问题的性质。你可以尝试以下,看看是否能解决您的问题:

  1. 确保你的节点的版本与兼容的WebPack。该文件建议使用Node的LTS版本:10.15.1 LTS。直接的WebPack的documentation: “在我们开始之前,请确保您已安装的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

希望帮助!

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论