webpack의 여러 HtmlWebpackPlugin 출력에 HMR 추가

HMR을 기존 프로젝트에 추가하려고합니다. 이제 일들이 현재 어떻게 관리되는지부터 시작합시다.webpack의 여러 HtmlWebpackPlugin 출력에 HMR 추가

다른 경로에서 제공해야하는 여러 HTML 파일이 있습니다. 그래서 /about 페이지에 대해, about.html은 전체 반응 애플 리케이션 자바 스크립트와 함께 제공 될 필요가 있습니다. 그래서 내 현재 코드는 다음과 같습니다 :

webpack.config.js에서 나는 제목과 js 파일을 chunkhash로 추가하기 위해 HtmlWebpackPlugin을 사용하고 있습니다.

new HtmlWebpackPlugin({ 
    title: `Welcome to my app`, 
    template: './build/index.html', 
}), 
new HtmlWebpackPlugin({ 
    title: `Welcome to my app`, 
    filename: 'about.html', 
    template: './build/about.html', 
}), 
new HtmlWebpackPlugin({ 
    title: `Welcome to my app`, 
    filename: 'base.html', 
    template: './build/base.html', 
}), 
new webpack.HotModuleReplacementPlugin(),

이렇게하면 webpack 구성의 "output"이 어떻게 표시됩니다. publicPath를 '/'로 설정했습니다.

output: { 
    path: path.resolve(__dirname, '..', 'build'), 
    publicPath: '/', 
    filename: 'js/[name]-[hash].js', 
    },

그리고 이것은 내가 웹팩-DEV-미들웨어 및 웹팩 핫 미들웨어를 사용하고 어디에 내 server.js 파일이 보이는 방법이다.

const compiler = require('webpack')(webpackConfig); 
app.use(require('webpack-dev-middleware')(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    colors: true, 
})); 

app.use(require('webpack-hot-middleware')(compiler, { 
    quiet: true, 
    noInfo: true, 
    log: console.log, 
    path: '/__webpack_hmr', 
}));

는 그리고 이것은 내가 HTML 파일을 제공하고있어 방법은 다음과 같습니다

app.get('/', (req, res) => res.sendFile(path.join(__dirname, '/../build/index.html'))); 
app.get('/about', (req, res) => res.sendFile(path.join(__dirname, '/../build/about.html'))); 
app.get('/status', (req, res) => res.send('Status OK')); 
app.get('*', (req, res) => res.sendFile(path.join(__dirname, '/../build/base.html')));

지금, 나는이 경로의 /이 모든 것은 HMR과 함께 좋은 작품을 열 때. 하지만 언제든지 /about 또는 /anything을 열면 about.html 또는 base.html이로드되지만 앱 스크립트가 추가되지 않습니다.

다른 경로가 아닌 인덱스 경로에서 작동하는 이유는 무엇입니까? 도와 줘서 고마워.

출처

2017-10-21 Ateev Chopra

당신이 당신의 웹팩 항목의 설정을 보여줄 수 사용하여 시도? –