webpack 打包

webpack 中每个模块有一个唯一的 id，是从 0 开始递增的。
整个打包后的 bundle.js 是一个匿名函数自执行。
参数则为一个数组。数组的每一项都为个 function。
function 的内容则为每个模块的内容，并按照 require 的顺序排列。

识别入口文件,识别模块依赖，来打包代码。webpack做的就是分析代码,转换代码，编译代码，输出代码

Webpack的两个最核心的原理分别是：

一切皆模块

正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模块。
因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。
这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。

按需加载

传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。
但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。
因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

如何实现一个简单的webpack

读取文件分析模块依赖
对模块进行解析执行(深度遍历)
针对不同的模块使用相应的loader
编译模块，生成抽象语法树AST。
循环遍历AST树，拼接输出js。

loader原理

在解析对于文件，会自动去调用响应的loader,
loader 本质上是一个函数，输入参数是一个字符串，输出参数也是一个字符串。
当然，输出的参数会被当成是 JS 代码，从而被 esprima 解析成 AST，触发进一步的依赖解析。
webpack会按照从右到左的顺序执行loader。

一种正确的思路是：

使用JS代码解析工具（如esprima或者acorn），
将JS代码转换成抽象语法树（AST），
再对AST进行遍历。
这部分的核心代码是 parse.js。

webpack优化

externals配置优化 :使用 externals 将第三方库以 cdn 的方式去引入
设置externals配置项分离不需要打包的库文件，然后在模版文件中使用script引入即可，配置代码片段如下：

externals: {'jquery': 'jquery'
},entry: {entry: './src/main.js',vendor: ['vue', 'vue-router', 'vuex', 'element-ui']
},
// 这里的output为base中的output，不是生产的output
output: {path: config.build.assetsRoot,filename: '[name].js',libraryTarget: "umd",publicPath: process.env.NODE_ENV === 'production' ?config.build.assetsPublicPath : config.dev.assetsPublicPath
},
externals: {echarts: 'echarts',_: 'lodash'
}

CDN: 背景图片会有问题

url-loader中单独配置cdn，做到js访问线上路径，静态资源使用cdn，两者互不影响

url-loader不能检测到js中的background，所以我们凡是在js中引用的地址，必须在外面先import这张图片，url-loader才会解析并打包

打包后的js过大，将js打包多个文件

由于webpack打包后的js过大，以至于在加载资源时间过长。所以将文件打包成多个js文件，在需要的时候按需加载。优化方案：

entry:{ main:'xxx.js'
}
plugins:{new commonsChunkPlugin({name:'commons',minChunks:function(module){// 下边return参考的vue-cli配置// any required modules inside node_modules are extracted to vendorreturn (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)}
}) ,
// 以下才是关键
new commonsChunkPlugin({name:'charts',chunks:['commons'] minChunks:function(module){return (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1)}
})
}

使用webpack.optimize.UglifyJsPlugin插件压缩混淆js代码，使用方法如下：

plugins: [//webpack.config.jsnew webpack.optimize.UglifyJsPlugin({    warnings: false,compress: {join_vars: true,warnings: false,},toplevel: false,ie8: false,
]

优化
1.缩小文件搜索范围,配置比如resolve.modules,resolve.modules,resolve.mainFields,resolve.alias ,resolve.extensions ,module.noParse 配置

2.使用DllPlugin 要给 Web 项目构建接入动态链接库

3.HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程

4.当 Webpack 有多个 JavaScript 文件需要输出和压缩时，原本会使用 UglifyJS 去一个个挨着压缩再输出，但是 ParallelUglifyPlugin 则会开启多个子进程，把对多个文件的压缩工作分配给多个子进程去完成

5.可以监听文件的变化，当文件发生变化后可以自动刷新浏览器，从而提高开发效率。

6.(Hot Module Replacement)的技术可在不刷新整个网页的情况下做到超灵敏的实时预览。原理是当一个源码发生变化时，只重新编译发生变化的模块，再用新输出的模块替换掉浏览器中对应的老模块。

7.Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出

8.可以使用CommonsChunkPlugin 把多个页面公共的代码抽离成单独的文件进行加载

9.Webpack 内置了强大的分割代码的功能去实现按需加载，可以用import实现路由按需加载。

10.Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快，它又译作 “作用域提升”

11.可以使用可视化分析工具 Webpack Analyse等去分析输出结果，从页进行优化.
对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩

12.优化图片，对于小图可以使用 base64 的方式写入文件中
给打包出来的文件名添加哈希，实现浏览器缓存文件

webpack 打包相关推荐

使用webpack打包后，vscode中vue代码变白色的解决办法
使用webpack打包后,vscode中vue代码变白色的解决办法卸载vetur,重装vetur
webpack打包HTML配置自动,十三、HtmlWebpackPlugin的使用 ------- 2019-04-25
一.作用:htmlWebpackPlugin插件会在webpack打包结束后,自动帮我们生成一个HTML文件,并把打包生成的js自动引入到这个HTML文件中: 二.安装 :npm install ht ...
webpack打包缓存_【第835期】Webpack 的静态资源持久缓存
原标题:[第835期]Webpack 的静态资源持久缓存前言你现在还在休假吗?早读课节前以web pack漫谈结尾,今年就以web pack开始吧.今日早读文章由众成翻译@yanni4night带 ...
webpack打包优化_前端性能优化：webpack性能调优与Gzip原理
链接:https://juejin.im/book/5b936540f265da0a9624b04b 从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连 ...
自定义配置webpack打包文件
基础使用安装 npm install webpack -g 模块化程序(配置过程忽略此步骤) cale.js function add(a,b){return a + b; } module.exp ...
使用webpack打包的后，公共请求路径的配置问题
在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量公共变量是这样在其他地方使用ajax时,我们就这样使用这种 ...
Webpack 打包学习
前段时间项目主管让测试组长研究webpack打包方式,闲暇时自己想学习一下,留着备用,本周日学习一下. https://www.jianshu.com/p/42e11515c10f 转载于:https ...
webpack打包后自动弹出浏览器查看效果
当配置了webpack自动打包和预览页面后,每次打包都要复制 http://localhost:8080/ 到浏览器中查看效果,那么我们能不能在打包后自动打开浏览器查看效果呢,答案是可以的. 在pac ...
解决webpack打包bootstrap报字体不能解析问题
解决webpack打包bootstrap报字体不能解析问题参考文章: (1)解决webpack打包bootstrap报字体不能解析问题 (2)https://www.cnblogs.com/zero ...
彻底解决Webpack打包慢的问题
彻底解决Webpack打包慢的问题参考文章: (1)彻底解决Webpack打包慢的问题 (2)https://www.cnblogs.com/yaoyinglong/p/7490351.html 备 ...

webpack 打包

webpack 打包相关推荐

最新文章

热门文章