webpack-dev-server

## webpack-dev-server ##
webpack-dev-server是nodejs的一个插件，可以在本地起动web服务，可以做反向代理。

 package.json 命令

 

    "scripts": {
    "dev": "webpack-dev-server    --config  webpack.prod.conf.js",
    //webpack.prod.conf.js自己定义的文件
    "build":" ",
    "test": ""
  }

        

项目目目录结构
-------

        webpack
            --build
            --dist
                index.html  
                404.html
            --node_modules
            --src
                css
                img
                js
                   index.js 
             package.json
             package-lock.json
             webpack.prod.conf.js 
              
        

webpack.prod.conf.js 文件
-----------------------

          
        module.exports = {
            mode:"development",
            entry:{
                app:path.resolve(__dirname,'./src/js/main.js')
            },
            output:{
                filename:'bundle.js',
                path:path.resolve(__dirname,"build"),
                publicPath:"/assets/",//也可为cdn地址：https://www.xxx.com/static
                //这里的值必须加在index.html的script的src中，
                //本index.html中<script src="assets/bundle.js"></script>，
                //这里的assets必须与publicPath一致。
                
            },
            module: {
                rules: [
                    {
                        test:/\.js/,
                        use:[
                            'babel-loader'
                        ]
                    }
                ]
            },
            devtool:'inline-source-map',
            devServer:{
                contentBase:path.resolve(__dirname,"dist/"),
                //它的目录指向你的index.html所在目录
                host:'localhost',
                port:'8888',
                compress:true,
                historyApiFallback: {
                    rewrites: [
                        { from: /^\/q/, to: '404.html' },
        
                    ]
                },
                //historyApiFallback:true找不到页面跳到index.html,
                //这里是在localhost:8888/qxxxx页面，会跳到404.html
                // lazy: true,//这里lazy设置为true，devServer就不起作用
                hot:true,
                //hotOnly:true,//设置为true不自动刷新
                watchOptions: {
                    aggregateTimeout: 2000,//延迟几秒，1000为1秒
                    poll: 1000,//多少时间轮询一次
                },
                open:true,//设置为true打开默认浏览器
                // publicPath: "/assets/"作用跟output中publicPath一样
                proxy: {
                  "/api": {
                    target: "http://www.xxx.com/api/",
                    pathRewrite: {"^/api" : "'/'"}//接口调用axios.get("/api/xxxx")
                  }
                }
            },
            plugins: [
                new webpack.HotModuleReplacementPlugin()
            ]
        }
        
        

浏览器实时刷新配置
------
        hot:true,
        plugins: [
           new webpack.HotModuleReplacementPlugin()
        ]