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

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

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

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

내 경우는 Webpack 기능을 실험하는 데 너무 깊이 빠져 있었지만 주입을 전체 시간 동안 false로 설정했다는 사실을 완전히 잊었습니다.

 new HTMLWebpackPlugin({
        inject: false,
        ...
 }),

그것을 켜는 것이 내 티켓이었습니다.

webpack-dev-server내 index.html파일을 제공하지만 업데이트하지 않는 비슷한 상황이 발생했습니다 . 몇 개의 게시물을 읽은 후 webpack-dev-server새 js 파일을 생성하지 않고 대신 index.html.

html-webpack-plugin내 webpack.config.js파일에 다음 구성과 함께 내 앱에을 추가했습니다 .

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]

그런 다음 내 항목 js 파일을 참조하는 스크립트 태그를 index.html. 이제 webpack-dev-server추가 플래그없이 실행할 수 있으며 파일 변경 사항이 브라우저에 즉시 표시됩니다.

나만의 특별한 Webpack 이야기를 추가하겠습니다. --watch 여기에 고통의 벽에 비애에 대한 .

나는 달리고 있었다

webpack --watch

Typescript 프로젝트를 빌드하기 위해. 컴파일 된.js 파일은 업데이트되지만 브라우저에 표시되는 번들은 업데이트되지 않습니다. 그래서 저는 기본적으로 OP와 같은 위치에있었습니다.

내 문제는 watchOptions.ignored매개 변수에 있습니다. 빌드 구성의 원래 작성자는 ignored해당 매개 변수에 유효한 값이 아닌 필터 기능으로 설정했습니다 . 적절한으로 필터 기능 교체는 RegExpGOT의 --watch나를 위해 다시 작동 빌드를.

프로젝트 트리는 명확하지 않지만 contentBase 설정에 문제가있을 수 있습니다. contentBase : __dirname을 설정하십시오.