webpack配置

webpack.config.js属性

module.exports={
entry:"./index.js",//入口，从哪里开始编译
//出口
output:{
     publicPath:"",//打包后的文件资源引入到html模板时文件名的前缀
      path:"",//打包后到哪里
      filename:"builder.js"//打包后生成的文件名
   },
plugins:[
      插件
   ]
}

插件Plugin:

`htmlWebpackPlugin`打包后自动生成html模板并自动将打包好的静态资源引入到模板。
`cleanWebpackPlugin`用于重新打包时自动删除上一次的打包文件。

编译器loader

针对import导入的不同类型的文件，使用相对应的编译器来编译。

`文件编译器`:
        file-loader(支持不同类型的图片)
        url-loader(可以通过文件大小决定是将文件编译成base64直接填入行内标签里还是通过生成文件再引入)
`vue编译器`:vue-loader
`CSS编译器`: sass-loader&postcss-loader&css-loader&style-loader
       css-loader:处理css文件直接相互引用的关系然后将产生联系的文件生成代码。
        style-loader:将cssloader处理完生成的代码添加到html style标签里面
       sass-loader:将scss文件处理成css文件。
       postcss-loader:将css中一些需要各种浏览器兼容的属性自动添加上，而不是一个个手写-webkit-，它有专门的配置文件postcss.config.js,可以下载插件配置上

sourceMap属性

也就是webpack.config.js对象的`devtool`属性。
       默认是false关闭的。为inline-cheap-source-map(推荐，这个值比较提高性能)时，打包后到生产环境如果报错报错信息会定位到开发环境下某个文件哪一行出的错,打包后会在出口文件最后生成base64来记录生产和开发环境代码直接的映射关系。
`开发环境推荐`:eval-cheap-module-source-map打包快，位置全面。
`生产环境推荐`:不开启。或者cheap-module-source-map。