Webpack 출력에서 Mimetype 오류 (녹아웃 사용)

녹아웃을 사용하는 것은 처음입니다. 나는 노드, 웹팩 및 ES6와 함께 사용하고 싶어하지만, 어떤 이유로 내가 만드는 오전 번들 브라우저에서 오류를 일으키는 :Webpack 출력에서 Mimetype 오류 (녹아웃 사용)

"때문에 MIME 타입 ('텍스트 /'http://localhost:8080/build/bundle.js을 '에서 스크립트를 실행 거부 html ')은 실행 가능하지 않으며 엄격한 MIME 유형 검사가 가능합니다. "

내 webpack.config.js은 다음과 같습니다

const path = require('path') 


module.exports = { 
     output: { 
     path: path.resolve('build', './bundle.js'), 
     filename: 'bundle.js' 
     }, 
     module: { 
     loaders: [ 
     { 
      test: /\.html$/, loader: 'html' 
     }, 
      { 
      test: /\.js?$/, 
      exclude: /(node_modules)/, 
      loader: 'babel-loader', 

      }, 
     ] 
    } 
};

package.json 파일은 다음과 같습니다

{ 
    "name": "neighborhoodmap", 
    "version": "1.0.0", 
    "description": "Neighborhood Map App with API Calls", 
    "main": "app.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "node_modules/webpack-dev-server/bin/webpack-dev-server.js", 
    "build": "webpack" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "knockout": "^3.4.2" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-es2015": "^6.24.1", 
    "html-loader": "^0.5.1", 
    "imports-loader": "^0.7.1", 
    "webpack": "^3.8.1", 
    "webpack-dev-server": "^2.9.5" 
    } 
}

app.js 파일은 다음과 같습니다

import ko from 'knockout'; 


class MyApp { 
    constructor() { 
    this.message = "Hello World"; 
    } 
} 

ko.applyBindings(new MyApp())

그리고 실제 인덱스 .html은 :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Neighborhood Map</title> 
    </head> 
    <body> 
    <h1 data-bind="text: message"></h1> 

    <script type="text/javascript" src="build/bundle.js"></script> 
    </body> 
</html>

내가 웹팩-DEV-서버와 응용 프로그램을 제공하지만, 난 그냥 브라우저에서 index.html을 배치하는 경우에도 여전히 번들에 오류가있어 :

"catch되지 않은 구문 에러 : 예기치 않은 토큰 <을위한 build/bundle.js : 1 "

번들 출력의 MIME 유형을 지정하는 방법이 있습니까? 아니면 내 webpack.config.js가 잘못 되었나요? 어떤 도움이라도 대단히 감사 할 것입니다.

출처

2017-11-30 Stephen Agwu

같은 문제가있는 사람이라면 webpack에서 녹아웃 빌드를 구문 분석하지 못하도록 모듈 속성 아래의 webpack 구성 파일에 noParse를 포함하여 해결했습니다. 최종 webpackconfig.js 파일은 다음과 같습니다.

const path = require('path'); 


module.exports = { 
    devtool: 'sourcemap', 
     entry: './app.js', 
     output: { 
     path: path.resolve('build', ''), 
     filename: 'bundle.js' 
     }, 
     module: { 
     noParse: /node_modules\/knockout\/build\/output\/*.js/, 
     loaders: [ 
     { 
      test: /\.html$/, loader: 'html' 
     }, 
      { 
      test: /\.js?$/, 
      exclude: /(node_modules)/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['es2015'] 
      } 
      }, 
     ] 
    } 
};

출처

2017-11-30 21:17:34

Webpack 출력에서 ​​Mimetype 오류 (녹아웃 사용)

답변

관련 문제

Webpack 출력에서 Mimetype 오류 (녹아웃 사용)