2017-12-26 36 views
0

Super People of goodwill !! 나는 프로그래밍과 같은이 놀라운 마술 공예의 초보자입니다. 그리고 이런 종류의 문제가 있습니다. 기본적으로 내가 그렇게 웹 팩이 잘못하지만 여전히 걸 말하고 알고, 내가 그것을 고칠 수 :( 여기 나의 webpack.config.js입니다 :webpack + babel npm doesnt는 시작하고 싶다

const path = require('path') 
const webpack = require('webpack') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 

module.exports = { 
entry: [ 
'babel-polyfill', 
'./js/index.js', 
'./js/nav.js' 
'./scss/main.scss', 
], 
output: { 
filename: 'index.js', 
libraryTarget: 'commonjs', 
path: path.resolve('./dist/'), 
}, 
module: { 
rules: [ 
    { 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract(['css-loader']), 
    }, 
    { 
    test: /\.(sass|scss)$/, 
    loader: ExtractTextPlugin.extract(['css-loader', 'sass- 
loader','babel-loader']), 
    }, 
    { 
    test: /\.(png|jpg|gif|svg)$/, 
    use: [ 
     { 
     loader: 'url-loader', 
     options: { 
      limit: 8192 
     } 
     } 
    ] 
    }, 
    { 
    test: /\.js$/, 
    exclude: /(node_modules|bower_components)/, 
    use: { 
    loader: 'babel-loader', 
    options: { 
     presets: ['@babel/preset-env'] 
    } 
    } 
}, 


    ] 
}, 
plugins: [ 
new webpack.optimize.UglifyJsPlugin({ 
    output: { 
    comments: false 
    } 
}), 
    new ExtractTextPlugin({ 
    filename: 'styles.css', 
    allChunks: true, 
}), 
] 
} 

my package.json : 

{ 
"name": "simple-webpack-boilerplate", 
"version": "0.0.1", 
"scripts": { 
"start": "webpack --config webpack.config.js --watch", 
"build": "webpack --config webpack.config.js" 
}, 
"babel": { 
"presets": [ 
    "es2015" 
] 
}, 
"author": "Michał Grabowski ([email protected])", 
"license": "MIT", 
"description": "", 
"devDependencies": { 
"babel-cli": "^6.26.0", 
"babel-core": "^6.26.0", 
"babel-loader": "^8.0.0-beta.0", 
"babel-polyfill": "^6.26.0", 
"babel-preset-env": "^1.6.1", 
"babel-preset-es2015": "^6.24.1", 
"browser-sync": "^2.18.13", 
"css-loader": "0.28.7", 
"extract-text-webpack-plugin": "3.0.2", 
"file-loader": "^1.1.5", 
"node-sass": "4.7.2", 
"resolve-url-loader": "^2.2.1", 
"sass-loader": "6.0.6", 
"url-loader": "^0.6.2", 
"webpack": "^3.10.0", 
"webpack-dev-server": "^2.9.7" 
}, 
"dependencies": { 
"@babel/core": "^7.0.0-beta.35", 
"@babel/preset-env": "^7.0.0-beta.35", 
"init": "^0.1.2" 
} 
} 

그리고 마지막으로, 내가 터미널 내 오류 내 NPM 시작하려고 :

`> [email protected] start 
/Users/Niemiec/Desktop/michal_web 
> webpack --config webpack.config.js --watch 

/Users/Niemiec/Desktop/michal_web/webpack.config.js:10 
'./scss/main.scss', 
^^^^^^^^^^^^^^^^^^ 

SyntaxError: Unexpected string 
at createScript (vm.js:80:10) 
at Object.runInThisContext (vm.js:139:10) 
at Module._compile (module.js:599:28) 
at Object.Module._extensions..js (module.js:646:10) 
at Module.load (module.js:554:32) 
at tryModuleLoad (module.js:497:12) 
at Function.Module._load (module.js:489:3) 
at Module.require (module.js:579:17) 
at require (internal/module.js:11:18) 
at requireConfig 
npm ERR! Failed at the [email protected] start script. 
npm ERR! This is probably not a problem with npm. There is likely 
additional logging output above. 

npm ERR! A complete log of this run can be found in: 
npm ERR!  /Users/Niemiec/.npm/_logs/2017-12-26T21_30_23_846Z- 
debug.log 
Krzysztofs-MacBook-Pro:michal_web Niemiec$ 

` 

도움말을, 쉼표가 잘못된 장소에

+0

왜 CSS 파일에 'babel-loader'를 사용하고 있습니까? – monssef

+0

다른 js 코드가 있습니까? – Shani

+0

엔트리 포인트 구문 오류 –

답변

0
entry: [ 
'babel-polyfill', 
'./js/index.js', 
'./js/nav.js' 
'./scss/main.scss', 
], 

을 !! 제발, 당신은 이동해야 당신이 당신의 entry 목록에서 ,을 놓치고처럼은 ,

+0

ups .. 내가 생각했던 것보다 더 혼란스러워 .. .. –

+0

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/babel -loader/lib! ./ scss/main.scss 모듈 빌드 실패 : 오류 : 여러 구성 파일이 있습니다. 제발 하나를 제거하십시오 : - .babelrc - package.json 하지만 faint는 babelrc 파일이 아닙니다 .. –

+0

.babelrc는 루트 디렉토리에 있어야합니다. 어쩌면 점이 시작되어 숨겨져 있기 때문에 표시되지 않을 수 있습니다. 루트 디렉토리에서'ls -a' 명령을 실행 해보십시오. –

1

'./js/nav.js'에 한 줄 위의 './scss/main.scss'에서 같습니다. 이것을 시도하십시오 :

entry: [ 
    'babel-polyfill', 
    './js/index.js', 
    './js/nav.js' 
    './scss/main.scss', 
], 
+0

ok 이제는 npm을 실행하지만, 지금은 ... ehgg와 같은 오류가 있습니다. ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/babel -loader/lib! ./ scss/main.scss 모듈 빌드 실패 : 오류 : 여러 구성 파일이 있습니다. 하나를 제거하십시오 : - .babelrc - package.json 내가 probelm은 ... 어디에 내가 babelrc 파일을 찾을 수 있습니까? –