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

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 자리 표시자가 절대 바뀌지 않고 자바 스크립트 콘솔을 열면 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"
  }....

---

나는 같은 문제가 있었고 그 모든 점 외에도 index.html을 출력 bundle.js와 함께 동일한 폴더에 넣고 contentBase를이 폴더, 루트 또는 하위 폴더로 설정해야 함을 발견했습니다. .

---

ExtractTextPlugin 때문에 발생할 수 있습니다 . 개발 모드에서 ExtractTextPlugin을 비활성화합니다. 프로덕션 빌드에만 사용하십시오.

---

올바른 솔루션

에게 dev-server하는 보고 에 의해 제공 파일 devServer.watchContentBase의 옵션을 선택합니다.

기본적으로 비활성화되어 있습니다.

사용 설정하면 파일 변경으로 전체 페이지 새로 고침 이 트리거됩니다 .

예:

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};

---

이것은 같은 webpack-dev-server포트 에서 두 개의 다른 응용 프로그램을 차례로 실행 한 후에도 나에게 발생했습니다 . 이것은 다른 프로젝트가 종료 된 경우에도 발생했습니다. 사용하지 않은 포트로 변경하면 직접 작동하기 시작했습니다.

devServer: {
    proxy: {
        '*': {
            target: 'http://localhost:1234'
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,
},

If you use Chrome like me then just open Developer Tools and click on Clear site data. You can also see if this is the problem by running the site in incognito mode.

---

Somehow, for my case, removing "--hot" makes it work. So, I removed 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]']
  },

---

My case was that I got so deep into experimenting with Webpack features, but totally forgot that I had set inject to be false the entire time like so...

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

Switching that on was my ticket.

---

I experienced a similar situation where webpack-dev-server was serving my index.html file but not updating. After reading a few posts I realized that webpack-dev-server does not generate a new js file but instead injects one into index.html.

I added the html-webpack-plugin to my app and with the following configuration in my webpack.config.js file:

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

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

I then commented out the script tag referencing my entry js file in index.html. I can now run webpack-dev-server without any additional flags and any changes to my files will display in the browser instantly.

---

I'll add my own special tale of Webpack --watch woe to the wall of suffering here.

I was running

webpack --watch

in order to build a Typescript project. The compiled .js files would update, but the bundle that the browser was seeing would not. So I was basically in the same position as the OP.

My problem came down to the watchOptions.ignored parameter. The original author of the build config had set up ignored as a filter function, which turns out to not be a valid value for that parameter. Replacing the filter function with an appropriate RegExp got the --watch build working again for me.

---

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

참고 URL : https://stackoverflow.com/questions/36039146/webpack-dev-server-compiles-files-but-does-not-refresh-or-make-compiled-javascri