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 · 90 阅读 · 0 评论 -
二、Webpack 开发环境的基本配置
四、开发环境的基本配置 开发环境配置主要目的是为了能让代码正常运行 主要考虑以下几个方面: 打包样式资源 如: css/style/sass npm install css-loader -d npm install style-loader -d npm install sass-loader -d 打包 html 资源 如: html npm install html-webpack-plugin -d //插件 打包图片资源 npm install url-loader -d原创 2021-06-18 23:09:10 · 87 阅读 · 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 · 142 阅读 · 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 · 81 阅读 · 0 评论 -
五、Webpack 生产环境 优化构建速度
七、生产环境 优化构建速度 1. OneOf 作用:让每个规则只匹配一个文件,大大增加构建速度 module里面的rules里,每个规则都会扫一遍全部的文件,这样会大大增加构建的速度, 而加了OneOf,就可以让每个规则只匹配一个文件,大大增加构建速度,但不能有两个配置处理同一种类型文件,如js //webpack.config.js文件 module: { rules: [ { test: /\.js$/, //js语法检查 exclude: /原创 2021-06-18 23:18:05 · 114 阅读 · 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 · 97 阅读 · 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 · 181 阅读 · 0 评论 -
八、Webpack 学习总结
十、我学到了什么 Webpack是什么?为什么要使用 Webpack的整体执行流程 3’ Webpack五个核心概念 Entry Output Loader Plugins Mode Webpack开发环境配置 Webpack正式环境配置 Webpack的开发环境配置优化 Webpack的正式环境配置优化 Webpack的配置详解详解 十一、学习参考 视频:https://www.bilibili.com/video/BV1e7411j7T5 文档:http://www.wo原创 2021-06-18 23:23:29 · 91 阅读 · 0 评论