增强webpack 开发体验

1.文件发生变化自动打包。之前的流程是 文件修改完成用webpack 进行打包然后刷新浏览器 。

webpack进行监听文件发生变化自动打包
  1. yarn webpack --watch --dev

2.浏览器自动刷新，两种方法

（1）.使用browser-sync 这个安装看别的安装文件这里说下缺点

  1.         1.操作复制了 一个项目有两个工具
  3.         2.效率低，webpack 会将文件写入磁盘browser-sync在去读取中间重复使用

（2）webpack 提供的 项目打包和浏览器的集合在webpack-dev-server

dev-server 是有http服务的

安装命令：

yarn add webpack-dev-server --dev

查看安装成功：到node-module文件下 bin目录下 有webpack-dev-server.md命令行

启动命令：yarn webpack server

3.webpack dev server 访问静态资源文件开发阶段。打包前将文件拷贝到dist文件下 用copy-webpack-plugin插件

在webpack.config.js 文件中加入

devServer:{// 开发阶段访问静态资源文件 访问public 文件下所有文件
contentBase:’./public’ // 也可接受一个数组[‘./public’]
},

const path = require(‘path’) // path 模块是node自带的 可自行查看

module.exports = {
mode:’none’,
entry:’./src/index.js’,
output:{
filename:’bundle.js’,
path:path.join(__dirname,’dist’),
},
devServer:{// 开发阶段访问静态资源文件
contentBase:’./public’ // 也可接受一个数组[‘./public’]
},
module:{},
plugins:[ // 插件
// new CopyWebpackPlugin({ //文件copy 从public 复制到dist下 to:”值为dist下的文件夹”
// patterns: [
// { from: “public”, to: “dest” }
// ]
// })
]
}

webpack-dev-server 跨域问题。在devServer中加proxy属性。

//补充下vue-cli在config/index.js中的dev就是devServer.(可忽略)

    devServer:{// 开发阶段访问静态资源文件
        contentBase:'./public', // 也可接受一个数组['./public']
        proxy:{//解决跨域问题 
            '/api':{ //本地地址以/api开头的地址会换成指定的target。 一般是以/api
                // http://localhost:8080/api/user ==> https://api.github.com/api/user
                target:"https://api.github.com",
                // http://localhost:8080/api/user ==> https://api.github.com/user
                pathRewrite:{// 正则实际请求地址中没有/api，替换为''
                    '^/api':''
                },
                changeOrigin:true //将主机标头的原点更改为目标URL，
                //如果为fasle请求的是 http://localhost:8080/api/user
                //如果为true 请求的则是https://api.github.com/user 将http://localhost:8080替换为https...
            }
        }
    },