[javascript] Webpack-dev-server는 파일을 컴파일하지만 브라우저에서 컴파일 된 자바 스크립트를 새로 고치거나 사용할 수 있도록하지 않습니다.

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 인스턴스가 전역 적으로 생성되거나 사용 가능하지 않기 때문에 이것을 볼 수 있습니다.

문제의 GIF

내가 무엇을 놓치고 있습니까?



답변

여기에서 두 가지 문제가 발생했습니다.

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. 사이트를 시크릿 모드로 실행하여 이것이 문제인지 확인할 수도 있습니다.

여기에 이미지 설명 입력