에서 실제 앱만 볼 수 있습니다 /public.
의 구성 webpack.config.js은 다음과 같습니다.
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./app/js/App.js'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: 'http://localhost:8080'
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel-loader'],
exclude: /node_modules/
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
프로젝트 계층 구조는 다음과 같습니다.
-
앱
- js
-
node_modules
-
공공의
-
CSS
-
img
bundle.js
index.html
-
-
package.json
-
webpack.config.js
http://localhost:8080/항목이 응용 프로그램에 대한 것인지 확인하려면 어떻게 수정해야 합니까?
답변
웹팩의 개발 서버를 사용 /public하는 경우 기본 디렉토리 로 사용할 옵션을 전달할 수 있습니다 .
devServer: {
publicPath: "/",
contentBase: "./public",
hot: true
},
더 많은 옵션과 일반 정보 는 webpack 구성 문서 , 특히 webpack dev 서버 문서 를 참조하십시오.
답변
--content-base시작 스크립트에 플래그를 추가 할 수도 있습니다. 예 :
"scripts": {
"start:dev": "webpack-dev-server --inline --content-base ./public"
}
답변
제 경우 'index.html'에는 HTMLWebpackPlugin. 이 플러그인을 사용하는 경우 파일 이름을 다시 확인하십시오.
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
답변
실수로 index.html을 제거한 다음 디렉토리 목록 만 얻었습니다.
답변
