前言2020年1月18日，2020年春节前一周，我提前请了6天假回家过年。此时，公司的项目还在如火如荼的发展中，一如既往地赶工。项目太仓促了，项目经理给了一个模板在里面开发，期间也没有时间进行增值学习。本公司提供的Lenovot430笔记本屏幕无法读取。我拿着第一个月的工资在这里打工，把自己的游戏本卖了，换了个二手的macbookpro。咬牙坚持着。刚进入前端行业的第一年，我就知道我要的是知识。我要的不是没日没夜的加班，还不停的百度。一。针对目前项目的两种开发环境和改变三种打包路径的痛点，我决定在这个春节抽出时间读一读这本书《深入浅出Webpack》。我看的是一本电子书，2018年1月出的，在京东上找到的，现在还在买这本书。看了京东对书的介绍，好像还没有更新。书中使用的webpack为@2版本，中间穿插@3版本。听说webpack4更新比较大，目前好像更新到5了。老油条就更不用说了，我一个新人，感觉前端很难学。书上的安装方法，是每个工具版本都安装错了。但是到底能不能用，以及出现的坑，我会在下面的总结中一一列举。本次学习没有对webpack研究太深，参考了vue-cli2.9版本搭建的webpack模板，以及webpack4.4的官方中文文档（不知道怎么看老文档），对于vue的一些projectstobeused研究配置。后期会根据需要不断完善本总结。很多来过的人都说前端更新快，读书学习不是最好的方式（考虑到书价不低），但我还是比较喜欢看书，买了很多的书。这是迄今为止我读过的唯一一本。这本电子书。这本书值得读吗？前半部分对api的介绍没有webpack官方文档那么通俗易懂，但是后半部分的webpack配置优化总结和一些例子还是值得新手阅读入门的！让我们一起学习进步！DevServer文章中并没有明确说明如何启动构建和运行webpack中的命令。其实运行webpack就是在终端输入webpack（进入当前文件夹），回车后项目会打包到dist文件夹中。但是，此时打包后的结果是一个js文件，入口index.html文件还是同级dist目录下的index.html。当你的webpack没有全局安装时，你不能在终端直接输入webpack，而是在node_modules/.bin/webpack目录下输入webpack所在的文件。直接输入node_modules/.bin/webpack回车。运行devServer的时候，也是在这个目录下node_modules/.bin/webpack-dev-server看到热更新，需要在入口文件index.html中更改bundle.js的路径，因为devserver是不会关心的webpack.config。js中的output.path属性。当然这些命令可以写在package.json文件中的脚本下，然后更改Entry1.context（webpack默认的打包相对路径）通过npmrun：在webpack的配置文件中：constpath=require('path');{context:path.resolve(__dirname,'app'),//或./../etc.}2.入口文件entry:{app:'./src/main.js',//可以配置多个入口，也可以动态入口}3.output输出:{filename:'[name].js',//[name]为节点内置名称变量path:path.resolve(__dirname,'../dist'),//必须是绝对路径，通过path可以找到绝对路径。publicPath:'',}说明：filename输出文件路径名输出文件存放在本地目录publicPath异步加载地址，（发布到在线资源的URL前缀）4.如何解析resolve配置模块，修改import引用路径后的别名，从而实现速记":'./src/vue/'}}//当引用importCompfrom'vue$/vue';importButtonfrom'@/components/button';//实际上会改为importCompfrom'./src/vue/vue'；从'./src/components/button'导入按钮；extensions使import的引用路径不需要写对应的后缀名，resolve:{extensions:['.js','.json'],//默认值//extensions:['.js','.vue','.json'],vue项目可以添加到'.vue'}5.devServer用于描述webpack-dev-server的行为。热模块热替换不会刷新整个页面，但是热替换有更改模块更新浏览器视图，默认是刷新整个页面devServer:{hot:true,}historyApiFallback用于方便开发使用HTML5HistoryAPI的单页应用程序当设置为：devServer:{historyApiFallback:true,}任意404响应可能需要用index.html替换，但仅适用于只有一个html文件的应用程序。如果你希望devServer能够响应不同的页面请求并返回不完整的html文件，配置：,to:'/user.html'},{from:/^\/game/,to:'./game.html'},//其他返回index.html{from:/./,to:'/index.html'}]}compresshostportopenboolean，devServer启动，第一次构建完成后，自动打开系统默认浏览器。代理使用http-proxy-middleware包来代理url。直接代理：devServer:{proxy:{"/api":"http://localhost:3000",}}请求/api/index时会被代理到'http://localhost:3000/api/index'如果你不想总是通过/api，你需要重写路径：proxy:{"/api":{target:"http://localhost:3000",pathRewrite:{"^/api":"",}}}如果是HTTPS请求，加上source:false,proxy:{source:false,//source直译：safe}解决跨域：changeOriginproxy:{changeOrigin:true,}一个本地虚拟服务器会接收您的请求并代表您发送请求quietboolean启用安静时，除了初始启动消息外，不会向控制台打印任何内容。这也意味着来自webpack的错误或警告在控制台中不可见。webpack的其他零散配置1.Target针对不同的运行环境构建代码2.devtool如何配置生成sourcemap方便调试Stringbooleandefault:false不同的值会明显影响构建（build）和重建（rebuild）速度.vue-cli2中开发开发环境应该有的devtool是：cheap-module-eval-source-map适合开发环境的值，webpack文档中有如下描述：eval-每个模块使用eval执行(),而所有的都有//@sourceURL。这个选项构建得非常快。主要的缺点是它不能正确显示行数，因为它映射到转换后的代码，而不是原始代码（没有从加载程序中获取源映射）。eval-source-map-每个模块都使用eval()执行，源映射被转换为DataUrl并添加到eval()。初始化源地图时速度较慢，但??提供更快的重建时间并生成实际文件。行号映射正确，因为它们映射到原始代码中。它为开发环境生成最优质的源地图。cheap-eval-source-map-与eval-source-map一样，每个模块都使用eval()执行。这是一个“便宜”的源映射，因为它不生成列映射，只生成行计数。它忽略来自加载器的源映射，只显示转译后的代码，就像evaldevtool一样。cheap-module-eval-source-map-与cheap-eval-source-map类似，在这种情况下，来自加载程序的源映射会获得更好的结果。但是，加载程序源映射减少为每行一个映射。构建生产环境的vue-cli2的devtool是：#source-map不知道为什么要加一个#。对于适合生产环境的值，webpack文档中有如下描述：(none)(省略devtool选项)-不生成sourcemap。这是一个不错的选择。source-map-整个源映射生成为单个文件。它向包中添加一个引用注解，以便开发工具知道在哪里可以找到它。您应该将服务器配置为不允许普通用户访问源映射文件！hidden-source-map-与source-map相同，但不向包添加引用注释。如果您只想从错误报告中获取源映射错误堆栈跟踪，但不想为浏览器开发工具公开源映射，则此选项很有用。您不应将源映射文件部署到Web服务器。相反，仅将其用于错误报告工具。nosources-source-map-创建没有sourcesContent的源地图。它可用于在客户端上映射堆栈跟踪，而无需公开所有源代码。您可以将源映射文件部署到Web服务器。这仍然会暴露反编译的文件名和结构，但不会暴露原始代码。使用uglifyjs-webpack-plugin时，您必须提供sourceMap:true选项以启用源映射支持。其中，devtool有六个值，可以随意组合：eval：使用eval语句包裹需要安装的模块。source-map：生成一个独立的sourcemap文件hidden：不在js文件中指出sourcemap文件，这样浏览器就不会自动加载sourcemap。inline：将生成的sourcemap转成base64格式嵌入在js文件中。cheap：列信息不会包含在生成的sourcemap中，所以计算量更小，输出的sourcemap文件更小；同时，loader输出的sourcemap也不会被使用。模块：来自加载器的源映射被简单地作为每行一个模块处理。3、watch和watchOptionswatchwebpack的监控方式支持监控文件更新，文件变化时重新编译。默认为false，在webpack-dev-server和webpack-dev-middleware中默认启用。watchOption是配置npm脚本的对应命令，即webpack。它写在package.json的脚本字段中。代码检查常用工具：ESlint、TSlint、stylelint介绍ESlint的一些设置，TSlint用于TypeScript，stylelint用于cssfile-loader和url-loaderFile-loader改变打包后的文件名，方便查找路径，以hash命名.url-loader将小文件资源转成base64格式嵌入到代码中。好处：在http/1协议中，每加载一次资源，都需要建立一次http请求。将小图像注入代码可以减少这种请求。缺点：会导致js/css代码体积变大，文件过大会使网页加载变慢。module.export={module:{rules:[{test:/\.png$/,use:[{loader:'url-loader',options:{//30KB以下的文件使用url-loader,limit:1024*03,//否则使用file-loader,fallback:'file-loader',}}]}]}}webpack优化坑1：改parallelUglifyPlugin并不能加快打包速度我的项目是vue-cli2默认环境拉取开发了一段时间，也加入了很多第三方包。通常的打包时间约为50秒。改成parallelUglifyPlugin后，时间为48.5秒。其中，配置时也有很多错误：正确配置：newParallelUglifyJsPlugin({//uglifyJs应该改成uglifyES（用于上传服务器验证）uglifyES:{output:{beautify:false,comments:false,}},compress:{warnings:false,drop_console:true,collapse_vars:true,reduce_vars:true,},sourceMap:config.build.productionSourceMap,//falseparallel:true,}),区分环境书的方法是setprocess。env.NODE_ENVconstDefinePlugin=require('webpack/lib/DefinePlugin');module.export={plugins:[newDefinePlugin({'process.env':{NODE_ENV:JSON.stringify('production')}})]}定义环境时使用JSON.stringify的原因是环境碳氢化合物数量的值需要是用双引号括起来的字符串，JSON.stringify('production')的值正好等于'"production"'
