当我们需要打包多个js文件时，需要在entry中增插手口：

entry:{ main:‘./src/index.js‘, sub:‘./src/index.js‘ },

如果存在不异入口，就需要在ouput中进行区分，以下写死定名就会报错：

output:{ filename:‘main.js‘, path:path.resolve(__dirname,‘dist‘) // __dirname指的是webpack.config.js文件地址目录的路径 }

这时需要使用某些占位符，如：name

output:{ filename:‘[name].js‘, path:path.resolve(__dirname,‘dist‘) // __dirname指的是webpack.config.js文件地址目录的路径 }

如果我们打包生成的js文件需要放在cdn上，也就是说打包出来的html中前面要加上cdn地点：

<script type="text/javascript" src="http://cdn.com/main.js"></script>

可以做如下配置：

output:{ publicPath:‘‘, filename:‘[name].js‘, path:path.resolve(__dirname,‘dist‘) // __dirname指的是webpack.config.js文件地址目录的路径 }

sourceMap：

它是一个映射关系，可以映射出实际堕落的位置，需要在webpack中进行配置：

devtool:‘source-map‘

配置了sourceMap会导致打包变慢，因为它要在打包过程中构建映射关系。在dist目录下会多出一个main.js.map文件，里面存在这映射关系。

还可以配置成：

devtool:‘inline-source-map‘

使用以上配置我们会发明map文件不见了，但是还可以看到具体的堕落位置，是因为映射文件直接以base64的形式打包到main.js中了。

还可以配置成：

devtool:‘cheap-inline-source-map‘

当不使用cheap的时候会报告我们报错我们行和具体列，使用了cheap的时候只会报告我们具体在哪一行堕落，能在大项目中显著提升性能。

以上配置都只管具体业务中的代码错误，而当我们还需要管loader、第三方模块等的错误的时候，还需要加‘module‘：

devtool:‘cheap-module-inline-source-map‘

还有一种形式：

devtool:‘eval‘

会将代码以eval的形式来生成sourceMap的对应关系，执行效率最快，性能最好的打包方法 。但是针比拟较庞大的业务，可能提示的错误不太全面。

在开发环境中保举使用：

mode:‘development‘, devtool:‘cheap-module-eval-source-map‘

在出产环境中保举使用：

mode:‘production‘, devtool:‘cheap-module-source-map‘

在上面哪些配置中，当我们改削业务中的代码想看效果的时候都需要从头打包，并刷新页面，那么我们如何能转变代码以后自动从头生成呢？下面有3个方案：

（1）在package.json中进行配置：

"scripts": { "watch": "webpack --watch" }

加上--watch之后，，当我们改削业务中的代码就会自动从头打包，但是还需要从头刷新页面才华泛起改削后的功效

（2）webpackDevServer

在webpack.config.json中进行配置：

devServer:{ contentBase:‘./dist‘ // 打开dist下的index.html文件 }

在package.json中进行配置：事先需要安置webpack-dev-server

"scripts": { "start": "webpack-dev-server" }

然后启动npm run start

这个时候我们在浏览器中输入 localhost:8080 就可以打开我们的项目，而且当我们改削业务代码时候会自动从头打包并刷新页面
当我们加一个配置：

devServer:{ contentBase:‘./dist‘, // 打开dist下的index.html文件 open:true }

这个时候当我们运行 npm run start 的时候就会自动打开页面
proxy配置：