1
私はもう一度作業しようとしている古いプロジェクトを持っています。コマンドを入力すると、npmが端末のになります。非常に長いエラーメッセージが表示されます。ここにあります。ローカルホストの起動に失敗しました。 npm Err Darwin 16.7.0
開始@ /Users/juanlopez/tiy/week-5/day-4/portfolio-2.0 のWebPACK-devのサーバー
/ユーザ/ juanlopez/tiy /週-5 /日-4 /ポートフォリオ-2.0/webpack.config.js：88 新しいwebpack.optimize.OccurenceOrderPlugin（）、 ^
例外TypeError：webpack.optimize.OccurenceOrderPluginは、オブジェクトのコンストラクタ ではありません。 （/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0/webpack.config.js:88:5）
ウェブパックNPMでこれらのエラーは、これらのエラーをスローした後
npm ERR！ダーウィン16.7.0
npm ERR！ argv "/usr/local/Cellar/node/7.1.0/bin/node" "/ usr/local/bin/npm" "start"
npm ERR！ノードv7.1.0
npm ERR！ npm v3.10.9
npm ERR！コードELIFECYCLE
npm ERR！ @開始：webpack-dev-server
npm ERR！終了ステータス1
npm ERR！
npm ERR！ @ startスクリプト 'webpack-dev-server'で失敗しました。
私がここで間違っていたことを知っている人はいますか？私は実行しているwebpackのバージョンと関係がありますか？私はすでにwebpackとノードを更新しようとしています。
は、ここに私のJSON
{
"private": true,
"scripts": {
"deploy": "npm run build && surge ./public --domain portfolio-2-0.chriskramer2020.surge.sh",
"start": "webpack-dev-server",
"build": "rm -rf public && NODE_ENV=production webpack --optimize-minimize --progress --profile --colors"
},
"dependencies": {
"extract-text-webpack-plugin": "^2.1.0",
"jquery": "^3.1.1",
"json-loader": "^0.5.4",
"mobx": "^3.0.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.1",
"whatwg-fetch": "^2.0.1"
},
"devDependencies": {
"autoprefixer": "^6.5.4",
"babel-core": "^6.20.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"browser-sync": "^2.18.5",
"browser-sync-webpack-plugin": "^1.1.3",
"css-loader": "^0.26.1",
"eslint": "^3.12.2",
"eslint-config-standard": "^6.2.1",
"eslint-config-standard-react": "^4.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-react": "^6.8.0",
"eslint-plugin-standard": "^2.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.24.1",
"json-loader": "^0.5.4",
"node-sass": "^4.0.0",
"postcss-loader": "^1.2.1",
"raw-loader": "^0.5.1",
"react-hot-loader": "next",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"stylelint": "^7.6.0",
"stylelint-config-standard": "^15.0.0",
"surge": "^0.18.0",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2",
"webpack-merge": "^1.1.1",
"webpack-validator": "^2.3.0"
}
}
は、ここでは、OccurrenceOrderPlugin代わりのOccurenceOrderPluginを使用する必要が私のWebpack.config
enter code here
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const validate = require('webpack-validator')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const ROOT_PATH = path.resolve(__dirname)
const SRC_PATH = path.resolve(ROOT_PATH, 'src')
const BUILD_PATH = path.resolve(ROOT_PATH, 'public')
const common = {
entry: [
'whatwg-fetch',
SRC_PATH
],
output: {
filename: 'bundle.js',
path: BUILD_PATH,
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(SRC_PATH, 'index.html'),
inject: 'body',
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}
})
],
module: {
loaders: [{
test: /\.js$/,
include: [SRC_PATH],
loader: 'babel'
}, {
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'file'
}, {
test: /\.(sass|s?css)$/,
loaders: [
'style',
'css',
'postcss',
'sass'
]
}]
},
postcss:() => {
return [
require('autoprefixer')
]
}
}
const development = {
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server'
],
output: {
devtoolModuleFilenameTemplate: '[resource-path]'
},
devServer: {
historyApiFallback: true,
hot: true,
stats: { colors: true, chunks: false }
},
plugins: [
new webpack.HotModuleReplacementPlugin({ multiStep: true }),
new webpack.SourceMapDevToolPlugin(),
new BrowserSyncPlugin({ proxy: 'http://localhost:8080/' }, { reload: false })
],
module: {
loaders: [{
test: /\.html$/,
loader: 'raw'
}]
}
}
loaders: [
{
test: /\.css$/,
loaders: [
"style-loader",
{ loader: "css-loader", query: { modules: true } },
{
loader: "sass-loader",
query: {
includePaths: [
path.resolve(__dirname, "some-folder")
]
}
}
]
}
]
const production = {
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
]
}
new webpack.LoaderOptionsPlugin({
test: /\.css$/, // optionally pass test, include and exclude, default affects
all loaders
minimize: true,
debug: false,
options: {
// pass stuff to the loader
}
})
module.exports = validate(merge.smart(
process.env.npm_lifecycle_event === 'build'
? production
: development,
common
))
です。 – Myonara
@Myonara JSONファイルとwebpack.configファイルを追加しました。また、私はこのリンクを見て、それがあなたにもっと意味をなさないかもしれないということを理解しようとしています。 https://gist.github.com/sokra/27b24881210b56bbaff7 – user7400006