webpack - dev - server 설정

    webpack    ，      。  webpack   api,      webpack api       ，
       ，     。     webpack-dev-server  。webpack-dev-server        
         ，    nginx,  express ，             ，       F5   
  。     ，      ：

프로젝트 디 렉 터 리 구조

     webpack
            build
                webpack.pro.conf.js
            src
                js
                css
                img
            index.html
            package.json
            package-lock.json 

2. 설치 에 필요 한 가방

npm install webpack wepback-cli webapck-dev-server html-webpack-plugin --save-dev

     "webpack": "^4.16.2"  "webpack-cli": "^3.1.0"  "webpack-dev-server": "^3.1.5" 

 "html-webpack-plugin": "^3.2.0"

웹 팩 4 는 웹 팩 뿐만 아니 라 웹 팩 - cli 도 설치 해 야 합 니 다. 웹 팩 - dev - server 는 로 컬 서 비 스 를 시작 하 는 패키지 입 니 다. html - webpack - plugin
웹 팩 의 플러그 인 입 니 다. 홈 페이지 를 사용자 정의 할 수 있 습 니 다. 구체 적 으로 뒤에 말씀 드 리 겠 습 니 다.
3. webpack. pro. conf. js 파일 코드

    var path = require("path");
    var webpack = require("webpack");
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        mode:"development",
        entry:{
            app:"./src/js/main.js"
        },
        output:{
            filename: "bundle.js",
            path:path.resolve(__dirname,"../dist"),
            //path.resolve nodejs    ，   nodejs api
        },
         devServer:{
            contentBase:false,
            //       contentBase，    contentBase       bundle.js      ，
            //         ，  dist      ，   false.
            host:'localhost',
            port:'8888',
            inline:true,//webpack    
            watchOptions: {
                aggregateTimeout: 2000,//          
                poll: 1000//        
            },
            compress:true,//       gzip   
            historyApiFallback:true,//        index.html
            hot:true,//     ，    new webpack.HotModuleReplacementPlugin()  
            open:true,
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
                template:"index.html",
                title:'index',
                inject: true
            }),
            // new webpack.NamedModulesPlugin(), 
            // HMR shows correct file names in console on update.
            // new webpack.NoEmitOnErrorsPlugin()
        ]
    }   

HtmlWebpackPlugin 플러그 인 template 는 사용 할 템 플 릿 입 니 다. 템 플 릿 은 선택 한 html 파일 로 개발 에 필요 한 html 를 생 성 합 니 다. 이 템 플 릿 은 index. html 코드 와 같이 설정 할 수 있 습 니 다.