![](https://img-blog.csdnimg.cn/20210618234231453.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Webpack 学习
文章平均质量分 55
Webpack 学习笔记
罗小成
Android开发者
展开
-
一、初识 Webpack
一、Webpack介绍浏览器只能识别js、css、html等语法,识别不了Vue、Scss、jQuery等一些高级语法代码,我们要使用这些代码,就需要将这些代码需要最终转换为js、css、html等浏览器能解析识别的语言才可以使用。而这些语言每个都提供了各自的命令来进行加载转换,由于命令都不相同,所以这在实际项目中会很麻烦Webpack就解决了这一问题,他可以配合各种不同loader将前端的所有资源文件(js/css/scss/json/img/…)进行统一打包,最终编译转换成浏览器能识别的语言(.原创 2021-06-18 23:05:58 · 99 阅读 · 0 评论 -
二、Webpack 开发环境的基本配置
四、开发环境的基本配置开发环境配置主要目的是为了能让代码正常运行主要考虑以下几个方面:打包样式资源 如: css/style/sassnpm install css-loader -dnpm install style-loader -dnpm install sass-loader -d打包 html 资源 如: htmlnpm install html-webpack-plugin -d //插件打包图片资源npm install url-loader -d原创 2021-06-18 23:09:10 · 91 阅读 · 0 评论 -
三、Webpack 生产环境的基本配置
五、生产环境的基本配置开发环境配置主要目的是为了能让代码 1性能更好 2.兼容性更好 3.能在线上环境正常运行1. 提取 Css 成单独文件对css文件进行优化处理, 提取css成单独的文件 好处:将css从style变成link导入,解决闪屏问题将css从js抽离出来了,可以减少js的体积,增加js的加载速度插件:npm install mini-css-extract-plugin -d//webpack.config.js文件const MiniCssExtractorPl原创 2021-06-18 23:11:48 · 151 阅读 · 0 评论 -
四、Webpack 开发环境的配置优化
六、开发环境 配置优化1. HMR(模块热替换)HMR: hot module replacement 热模块替换 / 模块热替换作用:一个模块发生变化,只会重新打包构建这一个模块(而不是打包所有模块) ,极大提升构建速度缺点:1.此HRM功能只对样式css文件有效,对js无效 2.会让html失去热更新功能如果想要js文件实现HRM功能,则需要修改一些代码,但对入口js文件不适用(入口js文件修改,还是会全部打包)如果想要html有效,则需要再entry入口里面,将html文件引原创 2021-06-18 23:15:16 · 88 阅读 · 0 评论 -
五、Webpack 生产环境 优化构建速度
七、生产环境 优化构建速度1. OneOf作用:让每个规则只匹配一个文件,大大增加构建速度module里面的rules里,每个规则都会扫一遍全部的文件,这样会大大增加构建的速度,而加了OneOf,就可以让每个规则只匹配一个文件,大大增加构建速度,但不能有两个配置处理同一种类型文件,如js//webpack.config.js文件module: { rules: [ { test: /\.js$/, //js语法检查 exclude: /原创 2021-06-18 23:18:05 · 118 阅读 · 0 评论 -
六、Webpack 生产环境 优化代码运行的性能
八、生产环境 优化代码运行的性能1. tree shacking 树摇前提: 1.必须使用ES6模块化 2.开启production环境(这样就自动会把无用代码去掉)作用:去除无用代码 减少代码体积在 package.json 中配置:"sideEffects": false 表示所有代码都没有副作用(都可以进行 tree shaking)这样会导致的问题:可能会把 css / @babel/polyfill 文件干掉(副作用)所以可以配置:"sideEffects": ["*.css原创 2021-06-18 23:19:38 · 103 阅读 · 0 评论 -
七、Webpack 配置详解
九、Webpack 配置详解1. Entry 的四种配置//Entry的四种写法//第一种:单入口 string类型 --> entry: './src/index.js'module: { //单入口 string类型 entry: './src/js/index.js', output: { filename: '[name].js', //最终会输出一个文件,文件名为main.js path: resolv原创 2021-06-18 23:21:06 · 192 阅读 · 0 评论 -
八、Webpack 学习总结
十、我学到了什么Webpack是什么?为什么要使用Webpack的整体执行流程 3’Webpack五个核心概念EntryOutputLoaderPluginsModeWebpack开发环境配置Webpack正式环境配置Webpack的开发环境配置优化Webpack的正式环境配置优化Webpack的配置详解详解十一、学习参考视频:https://www.bilibili.com/video/BV1e7411j7T5文档:http://www.wo原创 2021-06-18 23:23:29 · 95 阅读 · 0 评论