![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 65
皮皮停
再远的路,出发了,就会有到达的一天。
展开
-
webpack性能优化全方案
提升webpack性能优化无非从两个方面入手:1.如何构建速度2.如何优化打包后的文件如何构建速度webpack构建的过程,其实是把,从入口开始,通过AST语法树分析,把所有依赖的模块,结合loader和plugin,都进行内容转换,合并在一起,最终输出打包文件的过程。所以,要提高构建速度,就要减少不必要的模块依赖,和loader、plugin的使用...原创 2021-05-06 15:10:34 · 6612 阅读 · 2 评论 -
ES6模块懒加载
ES6的模块化使用import导入模块,使用webpack打包的时候,webpack会把所有通过import导入的模块,代码打包到bundle里面。示例:import _ from 'lodash-es'var arr = [1,2,3,4]console.log('webpackJsonp',webpackJsonp)setTimeout(()=>{ console.log("_",_.chunk(arr,2))},5000)//输出结果//webpackJsonp [Ar原创 2021-05-06 11:29:17 · 1157 阅读 · 0 评论 -
webpack开发服务器-webpack-dev-server
webpack-dev-server的作用webpack-dev-server为你提供了一个简单的 web 服务器,并且能够实时重新加载修改的内容。安装:npm install --save-dev webpack-dev-serverwebpack.config.jsmodule.exports = {+ devServer: {+ contentBase: './dist'+ },};package.json"scripts": {+ ...原创 2021-03-17 18:49:18 · 208 阅读 · 0 评论 -
css的工程化
CSS存在的问题一、类名冲突当一个项目的模块和界面变动越来越丰富的时候,命名一个css类名难度越来越大,因为新的类名很可能会在其他模块存在,但是我们并没发现,这样的情况下,会导致类名冲突,从而所写的样式会影响到其他模块。一般这样的情况下我们都会选择通过css选择器或者层级来选择样式,保证不会影响到其他模块,但是这样依然会有影响其他模块的风险,同时通过选择器和层级来选择的元素往往要写很长一段css选择的代码,这样很不容易阅读,并且难以维护和修改。二、样式或属性值重复在一个网站里面,相同的样式和原创 2021-03-17 00:08:11 · 569 阅读 · 0 评论 -
webpack-loader简析和使用
webpack loader的作用为:在webpack读取文件之后,loader会对匹配到的文件内容进行处理加工,最后给webpack进行下一步编译和构建。当然也可以在loader函数内部做一切node环境支持的事情,例如文件操作,业务逻辑处理等webpack的loader使用在编译之前,读取文件之后。上图:以项目为案例:目录结构如下:// 构建前的项目目录loader-test|-loaders |-a.js |-b.js |-c.js|-src |-index.js|-n原创 2021-01-07 17:35:02 · 329 阅读 · 0 评论 -
webpack中的entry和output配置解析
在webpack的配置文件中,有两个关于入口和出口的配置分别问entry和output。entry的值是代表生成chunk的入口地址,而output的值是把chunk输出成文件的路径。entry//webpack.config.js//写法1:module.exports = { entry:'./src/index.js'}//写法2:module.exports = { entry:{ mychunk:'./src/index.js', .原创 2021-01-05 21:27:03 · 570 阅读 · 0 评论 -
webpack的安装和基本使用
初始化根目录:npm init然后一路按回车,为了方便生成packge.json的文件,为后续方便配置使用的webpack命令。安装:npm i -D webpack webpack-cliwebpack仅在开发阶段使用,所以安装的时候加上-D参数,只作为开发阶段的依赖。打包构建:npx webpackwebpack的默认入口文件为根目录的./src/index.js文件,出口文件为根目录的./dist/,打包好的文件都会放着这个目录下边。如果要修改入口和出口的目录可以在根目录新建一原创 2020-12-29 00:17:56 · 224 阅读 · 0 评论 -
webpack的作用
javascript在浏览器端步入模块化时代以后,产生了下列的问题:性能和效率的问题。由于模块化的出现,致使需要功能模块被细分,从而导致js文件变多(依赖变多)。进而,当引入一个完整的功能模块的时候,浏览器会加载更多的js文件。浏览器加载js文件是通过网络请求的方式的获取的,如果一个模块的依赖很多的话,就会发生很多的网络请求去获取js文件,导致了多余的网络开销,间接的影响了性能。 兼容性问题。浏览器目前的模块化标准只支持ES6,AMD,CMD,并不支持commonJS的模块化标准,进而导致使用comm原创 2020-12-28 00:32:59 · 318 阅读 · 0 评论