번들 유효한 메시지를 표시해도 Webpack-dev-server가 번들되지 않음

번들 유효한 메시지를 표시해도 Webpack-dev-server가 번들되지 않음

웹 팩을 사용하여 기본 리액트 응용 프로그램을 설정했지만 웹 팩을 사용할 수 없습니다.webpack-dev-server정상적으로 동작하고 있습니다.

설치 완료webpack-dev-server글로벌하게 명령어 실행을 시도했습니다.sudo webpack-dev-server --hot핫 새로고침이 필요했기 때문입니다.

이 프로젝트는 잘 진행되고 있는 것 같습니다.webpackcmd. 빌드 폴더에 내장되어 있어 일부 서버를 통해 동작할 수 있지만,webpack-dev-server터미널에서는 빌드 프로세스가 오류 없이 완료되었음을 알 수 있습니다.[webpack: bundle is now VALID.]는 실제로 적절하게 감시하고 있습니다.변경에 따라 빌드 프로세스가 트리거되지만 실제로 빌드되지는 않습니다.[내 번들에 도움이 되지 않습니다.]설정 전체를 변경해도 문제가 해결되지 않았습니다.

누군가 도와주시면 감사하겠습니다.

다음은 webpack.config.js 파일입니다.

var path = require('path');

module.exports = {
    devtool: '#inline-source-map"',

    watch: true,
    colors: true,
    progress: true,

    module: {
        loaders: [{
            loader: "babel",
            include: [
                path.resolve(__dirname, "src"),
            ],
            test: /\.jsx?$/,
            query: {
                plugins: ['transform-runtime'],
                presets: ['es2015', 'react', 'stage-0'],
            }
        }, {
            loader: 'style!css!sass',
            include: path.join(__dirname, 'src'),
            test: /\.scss$/
        }]
    },

    plugins: [],
    output: {
        path: path.join(__dirname, 'build/js'),
        publicPath: '/build/',
        filename: '[name].js'
    },
    entry: {
        bundle: [
            './src/index.js'
        ]
    },

    devServer: {
        contentBase: "./",
        inline: true,
        port: 8080
    },
};

나는 그 문제를 스스로 해결했다.바보같이 들릴지 모르지만, 문제는 그 때,publicPath아래쪽에output물건.일치해야 합니다.path뿐만 아니라 재산/build/,예.,

output: {
    path: path.join(__dirname, 'build/js'),
    publicPath: '/build/js', // instead of publicPath: '/build/' 
    filename: '[name].js'
},

제 경우 웹 팩이 파일을 제공하는 위치를 확인해야 했습니다.

다음과 같이 표시됩니다.http://localhost:8080/webpack-dev-server

다음으로 bundle.js path > http://localhost:8080/dist/bundle.js를 확인할 수 있었습니다.

그 후 나는 그것을 사용했다./dist/bundle.js내 인덱스.인덱스.인덱스.인덱스.인덱스에서<script src="/dist/bundle.js"></script>

이제 파일 변경 내용이 새로 고쳐집니다.

webpack-dev-server는 bundle.dev를 메모리에서 제공합니다.실행 시 파일이 생성되지 않습니다.따라서 이 시나리오에서는 bundle.js는 파일로 존재하지 않습니다.

예를 들어 bundle.js의 크기를 최적화하거나 실제 가동 전개를 테스트하기 위해 bundle.js를 사용하지 않을 경우 webpack 명령을 사용하여 웹 팩을 생성하고 운영 모드로 처리합니다.

그런데 Webpack v4부터는 인메모리 자산을 디스크에 쓸 수 있게 되었습니다.

  devServer: {
    contentBase: "./",
    port: 8080,
    writeToDisk: true
  }

doc를 참조해 주세요.

이 문제의 해결 방법은 다음과 같습니다.

  devServer: {
    devMiddleware: {
      writeToDisk: true,
    }
  }

https://webpack.js.org/configuration/dev-server/ #devserverwritetodisk -

dev-server는 컴파일된 파일을 메모리에 보관하고 있어 직접 액세스할 수 없습니다.단, 솔루션에서는 개발 중(노드 서버 또는 localhost에서 프로젝트를 실행하는 경우에도) localhost:80을 사용하여 페이지에 액세스합니다.여기서 webpack-dev-server가 페이지에 서비스를 제공하고 있으며, 사용의 모든 이점을 느낄 수 있습니다(라이브 새로고침!). 단, 생산 전에 webpack build 명령을 수동으로 실행해야 합니다.dev-server가 bundle.j 파일을 컴파일할 방법은 없습니다.행운을 빕니다.

https://github.com/webpack/webpack-dev-server/issues/24 를 참조해 주세요.이것에 의해, Web pack dev server 는 디스크에 기입하지 않게 됩니다.따라서 빌드 파일을 볼 수 없습니다.대신, 그것은 기억에서 제공될 것이다.제대로 작동하려면 올바른 경로를 설정해야 합니다.예: index.html은 빌드 파일을 '/dist/main.js'에서 로드하므로 웹 팩 구성 파일에서 출력을 '/dist/'로 설정합니다.

저 같은 경우에는 VS 코드를 사용하고 있었는데 다시 시작해야 했습니다.vs 코드 버그가 발생하는 경우가 있습니다.컨피규레이션파일(패키지)의 변경.json, webpack.config.syslog 등)가 활성화되지 않을 수 있습니다.올바른 설정으로 동작하지 않는 상황이 발생했을 경우는, 재기동해 주세요.

이와 관련된 버그 보고서를 볼 수 없습니다.이상하네.이 버그는 이미 여러 번 프로젝트를 구축한 후 잠시 후에 구성 파일 중 하나를 변경하면 트리거된다고 생각합니다.

만약 이것이 실제로 일어나고 있는 것이라면, 그것은 큰 버그입니다.Code가 아닌 Visual Studio로 전환하여 이 문제가 발생할지 확인합니다.문제가 있는 경우 웹 팩의 문제일 수 있습니다.

언급URL : https://stackoverflow.com/questions/36150456/webpack-dev-server-not-bundling-even-after-showing-bundle-valid-message