上一篇文章，我们讲解了webpack的基本配置，这一篇文章，我们将讲解webpack进阶常用配置。
1 webpack打包多页应用
新建一个webpack应用： 在src文件夹下创建 index.js , home.js; 之后配置如下webpack；
let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode:'development', //多入口 entry:{ index:'./src/index.js', home:'./src/home.js' }, output:{ filename:'[name].js', path:path.resolve(__dirname,'dist') }, plugins:[ new HtmlWebpackPlugin ({ template:'./src/index.html', filename:'index.html' }), new HtmlWebpackPlugin ({ template:'./src/index.html', filename:'home.html' }) ] }因为现在时多页面的webpack配置，所以需要多入口，多出口。 这个时候运行npx webpack打包命令，可以看到结果如下所示。 但是，会有一个问题，因为html-webpack-plugin会将原本的index.html作为模板同时将打包好的js引入到html文件中去。所以出现了以下问题： 可以看到index.html页面打包好之后缺引入了index.js和home.js文件，这个明显是我们不想要的结果。
这个时候只需要配置： 这样，就可以实现我们想要的结果。
2 配置source-map
什么是source-map，为什么要配置source-map。 当我们在使用webpack去开发项目的时候，如果我们写的代码出错了，因为我们配置了js代码压缩，所以当我们在浏览器去调试代码的时候会发现，错误是这样的。
这样我们很难去找到我们的代码进行调试。 而source-map，主要负责单独生成一个sourcemap文件， 出错了，会标识当前报错的列和行，帮助我们调试代码。
配置了source-map之后，再次打包文件查看错误，可以看到： 这个时候，错误代码有具体的行列标识，并且代码没有被压缩处理。
同时我们的dist目录下也会有一个source-map的映射文件。 同时还有一个工具叫做，eval-source-map ,他和source-map的区别在于，不会新生成一个新的映射文件，而是集成到了文件之中。
webpack中的跨域处理
我们现在webpack里面常见一个后端服务：
//express let express = require('express'); let app = express(); app.get('/api/user',(req,res) => { res.send({ name:'康家豪', age:20 }) }) app.listen(3000,()=> { console.log('server is running on 3000'); })接着在我们的前端代码里面去使用原生ajax请求接口：
let xhr = new XMLHttpRequest(); //我们这里的写法访问的路径是 http://localhost:8080 端口 //但是服务端接口时3000端口，会跨域 //所以我们需要配置代理 xhr.open('get','/api/user',true); xhr.onload = () => { console.log(xhr.responseText); } xhr.send();我们这里的写法访问的路径是 http://localhost:8080 端口，而原本的后端服务在3000端口，因此我们需要配置webpack代理。
devServer:{ proxy:{ '/api':'http://localhost:3000' } },这样当我们重启服务的时候，可以看到已经拿到了数据：
但是，开发的时候，后端给我们的接口，大多是不一的： 例如; /user /vip /production 等等。 这样的话，我们在webpack去配置代理的时候就会很麻烦。 所以我们需要如下处理方式：
当后端的接口是/user的时候，我们在前端依旧去请求/api/user接口 然后我们在webpack中配置服务如下：
devServer:{ proxy:{ '/api':{ target:'http://localhost:3000', pathRewrite:{'/api':''} } } },我们通过pathRewrite将/api转换为‘’，这样也可以实现请求正确完成。
3 定义环境变量 我们在开发的时候，需要区分开发环境和上环境。 如下的场景应该很熟悉。
使用webpack自带插件：webpack.DefinePlugin
运行结果： 之后，当我们的项目要上线的时候，只需要将 dev修改为production。
4 区分不同环境
新创建两个文件
webpack.development.jswebpack.production.js需要安装一个插件 webpack-merge 使用插件进行处理：
let { merge } = require("webpack-merge"); let base = require('./webpack.config.js'); module.exports = merge(base,{ mode:'development' })我们在生产环境和开发环境的文件中都要引入webpack.config.js （当然我们可以将其改名为webpack.base.js） 并且将公共的webpack配置，在其中完成。 之后使用merge函数合并两个配置。
--------------------------------------------------------------------------------------------------------
