webpack-dev-server를 사용하여 파일을 컴파일하고 dev 웹 서버를 시작하려고합니다.
내 package.json
스크립트 속성이 다음과 같이 설정되어 있습니다.
"scripts": {
"dev": "webpack-dev-server --hot --inline",
}
너무 --hot
과 --inline
(제가 이해) 웹 서버와 뜨거운 재로드를 사용하도록 설정해야합니다.
내 webpack.config.js
파일에서 항목, 출력 및 devServer 설정을 설정하고 로더를 추가하여 .vue
파일의 변경 사항을 찾습니다.
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
publicPath: '/public',
filename: 'bundle.js'
},
devtool: 'source-map',
devServer:{
contentBase: __dirname + '/public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
따라서이 설정으로 npm run dev
. webpack-dev-server가 시작되고 모듈 로더 테스트가 작동합니다 (즉, .vue 파일을 저장하면 webpack이 다시 컴파일됩니다).
- 브라우저가 새로 고쳐지지 않습니다.
- 메모리에 저장되는 컴파일 된 자바 스크립트는 브라우저에서 사용할 수 없습니다.
두 번째 글 머리 기호에서는 브라우저 창에서 vue 자리 표시자가 절대 바뀌지 않고 javascript 콘솔을 열면 Vue 인스턴스가 전역 적으로 생성되거나 사용 가능하지 않기 때문에 이것을 볼 수 있습니다.
내가 무엇을 놓치고 있습니까?
답변
여기에서 두 가지 문제가 발생했습니다.
module.exports = {
entry: './src/index.js',
output: {
// For some reason, the `__dirname` was not evaluating and `/public` was
// trying to write files to a `public` folder at the root of my HD.
path: __dirname + '/public',
// Public path refers to the location from the _browser's_ perspective, so
// `/public' would be referring to `mydomain.com/public/` instead of just
// `mydomain.com`.
publicPath: '/public',
filename: 'bundle.js'
},
devtool: 'source-map',
devServer:{
// `contentBase` specifies what folder to server relative to the
// current directory. This technically isn't false since it's an absolute
// path, but the use of `__dirname` isn't necessary.
contentBase: __dirname + '/public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
수정 된 webpack.config.js
사항 은 다음과 같습니다 .
var path = require('path');
module.exports = {
entry: [
'./src/PlaceMapper/index.js'
],
output:{
filename: 'bundle.js',
path: path.resolve(__dirname, 'public/')
},
devtool: 'source-map',
devServer:{
contentBase: 'public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
답변
긴 검색 후 문제에 대한 해결책을 찾았습니다. 제 경우에는 출력 경로 가 올바르게 구성되지 않았습니다.
이 구성은 내 문제를 해결했습니다.
const path = require('path');
module.exports = {
"entry": ['./app/index.js'],
"output": {
path: path.join(__dirname, 'build'),
publicPath: "/build/",
"filename": "bundle.js"
}....
답변
올바른 솔루션
에서 제공하는 파일 dev-server
을 보라고 devServer.watchContentBase의 옵션을 선택합니다.
기본적으로 비활성화되어 있습니다.
활성화되면 파일 변경으로 인해 전체 페이지 새로 고침 .
예:
module.exports = {
//...
devServer: {
// ...
watchContentBase: true
}
};
답변
나는 같은 문제가 있었고 그 모든 점 외에도 index.html을 출력 bundle.js와 함께 동일한 폴더에 넣고 contentBase를이 폴더, 루트 또는 하위 폴더로 설정해야 함을 발견했습니다. .
답변
어떻게 든 내 경우에 “–hot”을 제거하면 작동합니다. 그래서 나는 제거했다hot: true
webpack.dev.js
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
publicPath: '/js/',
contentBase: path.resolve(__dirname, 'docs'),
watchContentBase: true,
}
});
webpack.common.js
output: {
path: path.resolve(__dirname, 'docs/js'),
filename: '[name].min.js',
library: ['[name]']
},
답변
ExtractTextPlugin 때문에 발생할 수 있습니다 . 개발 모드에서 ExtractTextPlugin을 비활성화합니다. 프로덕션 빌드에만 사용하십시오.
답변
이것은 같은 webpack-dev-server
포트 에서 서로 다른 두 응용 프로그램을 차례로 실행 한 후에도 나에게 발생했습니다 . 이것은 다른 프로젝트가 종료 된 경우에도 발생했습니다. 사용하지 않은 포트로 변경하면 직접 작동하기 시작했습니다.
devServer: {
proxy: {
'*': {
target: 'http://localhost:1234'
}
},
port: 8080,
host: '0.0.0.0',
hot: true,
historyApiFallback: true,
},
나와 같은 Chrome을 사용하는 경우을 열고 Developer Tools
클릭하십시오 Clear site data
. 사이트를 시크릿 모드로 실행하여 이것이 문제인지 확인할 수도 있습니다.