bundle.js가 다른 경로에로드되지 않는 이유는 무엇입니까?

Question

webpack.common.js 파일에서 webpack3을 사용하여 my bundle.js를로드하고 아래와 같이 출력합니다.

반응 프런트 엔드로 '/'경로를 누르면 잘 작동합니다. 내 반응 라우터가 잘 작동하고 예상대로 응용 프로그램 주위를 탐색하여 필요에 따라 URL을 변경합니다.

그러나 '/'가 아닌 URL로 브라우저를 다시로드하면 bundle.js가 자동으로 삽입되지 않습니다.

해결 방법 나는 bundle.js를 참조하는 index.html 템플릿에 스크립트 태그를 넣습니다. 다른 경로에서 문제를 해결합니다.

하지만 ... 이는 bundle.js가 '/'경로에 두 번로드됨을 의미합니다. webpack과 script 태그에서도 주입됩니다.

재로드시에도 bundle.js가 모든 경로에 주입되도록하려면 어떻게해야합니까? 아니면 템플릿에 스크립트 태그를 보관하여 webpack 3이 bundle.js를 자동으로 주입하지 못하도록 할 수 있습니까?

entry: { 
    app: './client/src/index.jsx', 
    }, 
    output: { 
    filename: '[name].bundle.js', 
    path: path.resolve(__dirname + '/dist'), 
    publicPath: '/' 
    }, 
    plugins: [ 
    new CleanWebpackPlugin(['dist']), 
    new HtmlWebpackPlugin({ 
     title: 'Shopping', 
     template: './index.html', 
    }), 

이 프로젝트는 ReactRouter 4 서버에 브라우저에서 모든 호출을 사용하고이 경로 안타 :

app.get('*', (req,res) =>{ 
    res.sendFile(path.resolve(__dirname, '../index.html')) 
}); 

Answer 1

내가 여기 https://stackoverflow.com/a/43704661/5086349 해결책을 발견했다. 템플릿에 bundle.js를 참조하는 태그를 유지 한 다음 번들 삽입을 중지했습니다.

<script type="text/javascript" src="/app.bundle.js"></script> 

웹팩 공통을 약간 변경했습니다.

output: { 
    filename: '[name].bundle.js', 
    path: path.resolve(__dirname + '/dist'), 
    publicPath: '/' 
    }, 
    plugins: [ 
    new CleanWebpackPlugin(['dist']), 
    new HtmlWebpackPlugin({ 


     // Set inject to false. 
     inject: false, 


     title: 'Shopping', 
     template: './index.html', 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new ServiceWorkerWebpackPlugin({ 
     entry: path.join(__dirname, './client/components/user/sw.js'), 
    }), 
    ],