缺少脚本:在的WebPack NPM
我试图重新建立一个反应的应用和使用的WebPack捆绑它。每当我尝试运行npm run-script build
它总是表现出npm ERR! missing script: webpack
我已经试过的东西:
- 删除该文件夹node_modules在做一个
npm install
(再次) - 全球范围内安装了的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;
任何帮助,将不胜感激。
回答如下:的错误消息: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
希望帮助!