aliven1的博客

例如我开发一个用于前端应用监控的sdk，它能在小程序，微信浏览器，app内webview中工作，我带10个人开发，第一步肯定是要做一个基本架构，这个架构要能够处理代码的耦合，不同端的共性，提供不同端sdk都会用到的抽象类抽象方法，所以这个部分会提取为一个core包然后我派三个人分别开发browser，mini和webview包，他们都引入这个core。过了几天我规定好数据上报到服务端的方式，于是我在core包中添加transport类，其他各端的sdk基于transport类分别实现对应的上报方法，we

一．建立变量和IP的映射，解决本地接口调用跨越的问题，路由中含对应变量，就会代理到对应的IP二．vue.config.js中配置开发环境代理,8080端口代理到含pig-gate的路由上，pig-gate又命中需要调试的本地ip地址，实现本地开发调试不会有跨越问题const url = 'http://pig-gateway:9999'// 基础路径，发布前修改这里,当前配置打包出来的资源都是相对路径module.exports = { publicPath: process.env.PUBL

关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件.env 全局默认配置文件，不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件关于文件内容：注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX使用全局变量的方法使用全局变量前在json中的配置运行’npm run serve‘的时候主要还是得看package.json中 ’server‘属性的’–mode‘后面跟

经常我们会希望通过script方式引入库，如CDN方式的jquery，我们在使用的时候依旧用require方式，但是却不希望webpack将他编译到文件中。 1 <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> 　　因为模块化开发，杜绝一切全局变量，我们想这样去使用他： 1 2 const $ = require("

目录WebPack 4 最佳实践特点性能优化WebPack 4 最佳实践特点使用 webpack、babel 最新版本。 区分 dev 和 prod 模式。 实现多文件打包到 dist 目录。 使用 postcss 插件 支持类似 sass 的特性，自动匹配浏览器私有前缀。 支持 src/assets 目录下的内容拷贝到 dist 目录。 分离 css、image、js ，使用相对路径进行引用。 使用 babel 插件支持新的 ES 语法特性。 通过 performan

前言最近对一个比较老的公司项目做了一次优化，处理的主要是webpack打包文件体积过大的问题。这里就写一下对于webpack打包优化的一些经验。主要分为以下几个方面：去掉开发环境下的配置 ExtractTextPlugin：提取样式到css文件 webpack-bundle-analyzer：webpack打包文件体积和依赖关系的可视化 CommonsChunkPlugin：提取通用模块文件 提取manifest:让提取的公共js的hash值不要改变 压缩js，css，图片 re

http://webpack.wuhaolin.cn/

在js中引入的第三方包，很少变动，分析一次就可以了，不用每次都分析1.，打包一次生成dll文件夹：const path=require('path');const webpack=require('webpack');module.exports={ mode:'production', performance:false, entry:{ vendors:['jquery','echarts','vue'] }, output:{ filename:'[name].dll.

Prefetching/Preloading 实现懒加载：preloading 与 prefetching 的主要区别是，prefetching 的代码会等到主要的js代码加载完 浏览器空闲时才会去加载，preloading 代码会与主要的js 代码一起加载https://blog.youkuaiyun.com/purple_lumpy/article/details/100073807...

通过package.json传递值，就能区分打包环境，实现不同的打包逻辑

适用‘[name].[ext]’,表示打包后的图片名称和原文件名保持一致

如果sass文件的头部，又引用了其它sass,这里使用importLoaders:2,即表示引用的sass文件，也适用.scss的打包规则，进行打包

1.下载字体图标到本地，保留上图font中的文件，把涉及字体图标的类文件拷贝到一个文件中，然后修改路径。2.在需要使用的地方，引入该文件即可；

在webpack中vue单文件组件的打包： 假定你的webpack项目中已经安装vue，并创建了vue单文件组件进行渲染了1、安装vue文件加载器$ cnpm i vue-loader vue-template-compiler -D 其中vue-loader为vue文件加载器，而vue-loader依赖于vue-template-compiler。2、在配置文件webpack.config.js中，添加加载规则 vue文件只经过vue-loader处理...

引用的时候需要用对象解构const { CleanWebpackPlugin } = require('clean-webpack-plugin') 2.构造方法 现在构造函数需要传入一个对象 否则会抛出异常 关于clean-webpack-plugin 的配置项 new CleanWebpackPlugin({dry: false,#默认false dry为true时，模拟删除，加删除，不会真的删掉文件verbose :false, # 默认false ...

optimization: { splitChunks: { chunks: "all",//async异步加载代码分割有效，all都有效 minSize: 30000,//引入的库大于30kb,才做代码分割 maxSize:50000,//分割后的代码,，webpack会尝试二次分割，拆分成多个50kb左右的文件； minChunks: 2,//文件至少被用了2次才分割； ...

//如果开启了HMR,则js中的代码修改，浏览器不会刷新，需要手动刷新//如果修改了某个js,需要它不受HMR的影响，刷新数据，可以参考下面的写法：counter();number();if(module.hot){ module.hot.accept('./number.js',()=>{ document.body.removeChild(document.getElementById('number')); number(); })}...

mode:'development',//development代码不会被压缩(production压缩代码) //devtool配置source: //1.定位开发代码中的错误位置，sourceMap是一个映射关系， //2.它知道dist目录下main.js文件96行实际上对应的是src目录下对应文件的哪个位置 //3.打包完成会多出一个对应map文件，是反应打包后代码和源码映射关系的文件 //inline-source-map：map文件会放到打包后文件的底部...

不使用插件自己设计代码分割： 两个js文件，一个index.js,一个jq.js（jq中为jq的源码，或者把jq的出口绑定到window上）,入口文件就是这两个文件，出口文件也是这两个文件，如果是webpack打包的话，打包后的js文件自动添加到html文件上，这时候就已经实现的代码分割； （代码分割的优势：1.js文件并行加载，速度更快；2.如果使用了热更新，修改index.js，重新打包index.js的速度更快） 2.使用webpack配置进行代码分割： ...

npx webpack：webpack局部安装，使用局部webpack 进行打包，如果配置文件中配置了script:{boundle:webpack}；,则可以适用npm run boundle进行打包，不用npx webpack; npx webpack -v:查看局部webpack的版本； npm info weback:查看webpack的所有历史版本； npx webpack index.js:用webpack默认的配置打包index.js; Chunk Names:打包结果中的chunk对

1.webpack_dev_server的帮我们重新打包生成的bundle.js文件并没有存放到实际的物理磁盘上；2.需要打包到物理磁盘上，命令行直接使用webpack就能看到

下载webpack-dev-server的时候，配置热更新之后，报类似标题这种错误：问题的原因：webpack-dev-server版本和webpack版本不兼容注意下载版本，，我碰到类似的问题，后来解决发现是版本不兼容导致的，当前两个版本就没有问题...

http://pingan8787.com/2019/08/14/171-%E3%80%90Webpack%E3%80%91Webpack4%E5%85%A5%E9%97%A8%E6%89%8B%E5%86%8C%E2%80%94%E2%80%94%E5%85%B118%E7%AF%87/

1.在文件夹根目录初始化，npm init,生产json文件；2.npm install --save-dev webpack@3.6.0 (-D==--save-dev) 此时webpack还不能用，必须修改环境变量的path: 1.我的电脑=>右键属性=> 点确定配置完成；这个时候检查webpack是否安装完成，可能依然报类似错误：...

项目结构：，src是js入口文件，dist为出口文件；安装babel-loader的时候，要指定版本号，推荐使用7.0.0，否则如果是安装最新版本，可能会因为版本问题导致错误如果版本不合适,可以在package.json,修改到对应的版本，然后重新安装npm install;...

webpack.base.conf.js中resolve: {    extensions: ['.js', '.vue', '.json'],    alias: {      'vue$': 'vue/dist/vue.esm.js',      '@': resolve('src'),    }  }这是webpack的路径别名，免得写麻烦又易错的相对路径...

webpack在配置服务器，实现热更新之后，浏览器能看到即时更新的效果，但是代码没有打包：解决方法：可以再开一个cmd窗口，配置了watchOptions和json之后，在命令行开启watch:npm run webpack --watch这个时候就能实现：在修改页面代码的时候，1.热更新看效果，2.watch自动打包修改的代码...

1.Cannot find module 'webpack/schemas/WebpackOptions.json'解决方法：webpack-dev-server版本问题，安装2.9.1版本解决了