2017-12-03 8 views
1

내 webpack 구성에 약간의 문제가 있습니다. 이는 내/공용 폴더에 index.html 파일을 만들지 않습니다. 아래공용 폴더에서 Webpack 구성이 index.html을 생성하지 않음

참조하십시오 webpack.config.js는 :

const path = require("path"); 
 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
 

 
let DEBUG; 
 

 
if (process.env.NODE_ENV === "production") { 
 
    DEBUG = false; 
 
} else { 
 
    DEBUG = true; // process.env.NODE_ENV === "development" 
 
} 
 
//const DEBUG = true; // process.env.NODE_ENV === "development" 
 

 
module.exports = { 
 
    context: path.resolve(__dirname, "src"), 
 
    entry: "./index.js", 
 
    output: { 
 
    path: path.resolve(__dirname, "public"), 
 
    filename: DEBUG ? "bundle.js" : "bundle.min.js" 
 
    }, 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.js$/, 
 
     loader: "babel-loader", 
 
     exclude: /node_modules/ 
 
     }, 
 
     { 
 
     test: /\.jsx$/, 
 
     loader: "babel-loader", 
 
     exclude: /node_modules/, 
 
     options: { 
 
      presets: ["react", "es2015"] 
 
     } 
 
     }, 
 
     { 
 
     test: /\.scss$/, 
 
     loaders: DEBUG 
 
      ? [ 
 
       "style-loader", 
 
       "css-loader?sourceMap", 
 
       "sass-loader?sourceMap", 
 
       "postcss-loader" 
 
      ] 
 
      : ExtractTextPlugin.extract("css-loader!sass-loader!postcss-loader") 
 
     }, 
 
     { 
 
     test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, 
 
     use: "file-loader?name=images/[name].[ext]" 
 
     } 
 
    ] 
 
    }, 
 
    devServer: { 
 
    historyApiFallback: true, 
 
    hot: true, 
 
    }, 
 
    plugins: [ 
 
    new ExtractTextPlugin("style.css", { 
 
     allChunks: true 
 
    }) 
 
    ] 
 
};

내 루트 디렉토리에 하나있어 내가 개발 모드에서 실행하면 모든 것이 잘 작동합니다. 빌드 스크립트는 "build"입니다 : "NODE_ENV = 'production'webpack -p".

감사합니다.

답변

1

HTML Webpack 플러그인이 필요합니다. 이 플러그인은 당신을 위해 html 파일을 만들고 html에 webpacks entry prop에 정의 된 모든 항목을 추가합니다. 설치하는 것을 잊지 마십시오. 당신의 웹팩 설정에서 다음

$ npm install html-webpack-plugin --save-dev 

:

var HtmlWebpackPlugin = require('html-webpack-plugin'); 

... 

plugins: [ 
    new ExtractTextPlugin("style.css", { 
     allChunks: true 
    }), 
    new HtmlWebpackPlugin() 
    ] 

자세한 내용은 여기를 참조하십시오 https://github.com/jantimon/html-webpack-plugin

+0

감사 다니엘, 치료를 작동합니다. 모든 아이디어가 생성 된 index.html 파일의 css/js src를 public/bundle.min.js에서 bundle.min.js로 바꿀 수있는 아이디어는 모든 파일이 이미 공용 폴더에 있기 때문입니다. – AngryFridges

+0

도움이된다면 제 답장을 부탁해주십시오. (화살표를 클릭하십시오) qs까지 : prop prop를 출력 소품에 추가하십시오. publicPath : '/'htmlwebpackplugin이 src 필드 앞에 추가되는 것입니다. 이 소품으로 조금 놀아 라. – Daniel

+0

새로운 HtmlWebpackPlugin()을 추가하면 내 개발자 버전이 깨지며 대상 컨테이너는 콘솔의 DOM 요소가 아닙니다. – AngryFridges