【webpack】
关注
分享
扫一扫
文章平均质量分 92
webpack学习笔记之路，文章可能写得不怎么好，如有错误 希望各位大佬指点迷津（Ps：前几篇之前写的可能不怎么随便，后面都不断完善）
@Umbrella
纸上得来终觉浅，绝知此事要躬行
展开
-
【webpack】新的起航28 -- webpack中配置eslint（番外篇）
开始可以使用vsCode在扩展商店中安装Eslint，并且配置一个.eslintrc.js`相关的自定义规则就完事了，可能跟webpack没有一点联系，但这并不是我们要说的，要么你写项目的时候就将使用代码规范化，最后打包也行（虽然这种是最常见的），但有一个问题！问题：并不是所有开发工具都可以成功安装Eslint插件，也并不是所有开发者自定义的规则一样，这就要前期大量的配置规范（企业一般都有属...原创 2019-10-24 00:11:42 · 243 阅读 · 0 评论 -
【webpack】快速笔记16 -- Lazy Loading懒加载
如何优化我们将index.js中的异步代码打开，并且注释掉同步代码，然后使用打包命令npm run start，成功打包后我们使用开发者工具中的Network，可以看出页面加载时已经同时加载了打包相关的代码：我们不妨使用一个监听点击的函数来决定页面中DOM的挂载，所以我们index.js写成这样：// 异步代码输出function getComponent() { return...原创 2019-09-13 00:09:45 · 401 阅读 · 0 评论 -
【webpack】快速笔记17 -- 中看又中用的可视化打包分析工具
为何需要使用可视化打包分析工具？我们之前看到的打包文件描述（命令行中）：使用可视化打包分析工具：如果当项目业务不断庞大时，使用可视化工具去分析打包文件的参数、关系及其加载时间等，可以利用它清楚知道哪些模块或者Chunks是可以优化的，或者相关的一些报错处理，可以在分析时提供一定的帮助~如何使用可视化打包分析工具？使用webpack官方Git仓库的插件工具：webpack分析工具的G...原创 2019-09-14 02:09:17 · 1048 阅读 · 0 评论 -
【webpack】快速笔记18 -- 擅用show Coverage以及 preloading与prefetching
先整理上一篇不需要的代码上一篇我们将了打包分析，我们配置了package.json让其生成一个打包描述的json文件，这里我们还原一下并且还要手动删除一下stats.json： "scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config...原创 2019-09-16 21:05:55 · 517 阅读 · 0 评论 -
【webpack】快速笔记19 -- CSS文件的Copy Splitting代码分割
入口出口原理简述我们整理一下index.js：async function getComponent() { const { default: _ } = await import( /* webpackChunkName: 'lodash' */ 'lodash' ) const dom = document.createElement('div'); dom.inn...原创 2019-09-20 22:27:46 · 529 阅读 · 0 评论 -
【webpack】快速笔记21 -- shimming跨模块构建工具
场景比如我们新建一个src > jquery-ui.js，里面这样写：export function ui() { $('body').css('background','pink')}问题：然后在src > index.js引入这个ui方法，并且调用一次，看起来应该是可以实现ui里面的逻辑的，我们重新打包一下，这次我们直接使用开发环境的打包npm run dev，...原创 2019-09-25 19:33:22 · 210 阅读 · 0 评论 -
【webpack】快速笔记20 -- Webpack遇上浏览器缓存cache
整理代码删除上篇的使用css代码分割的样式，src > style.css，然后安装一下npm installl jquery --save开始修改src > index.js：import _ from 'lodash'import $ from 'jquery'const dom = $('<div>');dom.html(_.join(['webpac...原创 2019-09-25 19:33:48 · 479 阅读 · 0 评论 -
【webpack】快速笔记22 -- 使用环境变量重新修改打包配置文件（番外篇）
前言在 【webpack】快速笔记13 – development和production模式的区分打包 我们就分配了开发和生产环境的配置，并且通过webpack-merge整合提取的公共部分使用环境变量修改配置开始：我们一步一步来，先修改生产和开发的配置，两个都是一样的更改方式，这里就展示一个另外一个一样的处理方法 ↓webpack.dev.js:const webpack = req...原创 2019-09-27 23:08:53 · 403 阅读 · 0 评论 -
【webpack】新的起航23 -- 使用Library打包一个库
新的起航前面20几篇差不多是做了webpack相关的基本（基础知识）配置笔记，当然做的笔记可能有错别字或者不深入的地方，如果想要更深入webpack可以在关于配置这部分 猛戳这里，相信你也可以有不一样的领悟~扬帆这篇开始我们重新，生成一个webpack的demo，新建一个文件夹webpack-library，然后使用git Bash执行以下 npm init -y 直接生成默认的webpac...原创 2019-09-30 14:13:25 · 486 阅读 · 0 评论 -
【webpack】新的起航24 -- PWA的打包配置
调整代码在这篇中，我们复用基础笔记中的demo-webpack文件，我们整理一下：webpack.common.js：注释掉imports-loader（改变模块this指向的配置）的使用，及webpack.ProvidePlugin（shimming垫片的跨模块配置），最后占时可以注释掉webpack的导入// const webpack = require('webpack'); ...原创 2019-10-02 18:08:06 · 274 阅读 · 0 评论 -
【webpack】新的起航25 -- TypeScript的打包配置
"高级拓展语言"TypeScript前言：javaScript是一门很灵活的编程语言，几乎可以编写很多功能，但是JS在规范上却没那么严格统一，就好比十个人看哈姆雷特，就会出现十个不同哈姆雷特一样，我们不能确保每个人写JS的代码风格一样，维护性也不高；所以一般企业都是有自己一套写代码的规范，或者干脆使用TS来写代码，所以看来TS的好处 ↓TypeScript：TS是微软推行出的一个进阶编码语...原创 2019-10-06 08:06:48 · 514 阅读 · 0 评论 -
【webpack】新的起航26 -- 配置webpackDevServer实现请求转发
整理代码代码链接：我们在 src > index.js 这样写：import React,{ Component } from 'react'import ReactDom from 'react-dom'class App extends Component{ render(){ return <div>Hello World</div...原创 2019-10-06 08:07:36 · 916 阅读 · 0 评论 -
【webpack】新的起航27 -- webpackDevServer解决单页面应用路由问题
写一个React单页面的路由配置代码地址：我们新建两个文件作为路由的跳转的页面，home.js list.js 代码如下：list.js：import React,{ Component } from 'react'class List extends Component{ render(){ return <div>我是List页面</div...原创 2019-10-11 15:31:50 · 291 阅读 · 0 评论 -
【webpack】快速笔记15 -- SplitChunksPlugin配置参数详解
先来个名字上一篇我们完成了同步和异步代码的代码分割，其中异步代码中打包后生成的文件，而0其实是Copy Spilting我们此时想更换一下它的名字就需要使用异步代码中独有的模版注释：function getComponent(){ return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _...原创 2019-09-13 00:09:17 · 772 阅读 · 0 评论 -
【webpack】快速笔记14 -- webpack中妙用Code Splitting代码分割
更正打包文件位置及清理文件的问题第一个问题：上一篇中我，我们将整理好的webpack配置放进build文件夹中，进行npm run build的时发现打包文件夹生成在build目录下，这当然不是我们想要的 ↓我们的修改一下output输出配置中的path让其生成到根目录：此时打包文件就生成在根目录下了，下次如果出现这个问题，只要知道打包文件默认是生成在同级的配置文件下的，如果需要生成到...原创 2019-09-10 18:04:58 · 368 阅读 · 0 评论 -
【webpack】快速笔记1 -- 快速搭建属于自己的weback
111原创 2019-09-01 14:52:25 · 289 阅读 · 0 评论 -
【webpack】快速笔记3 -- loader（样式）
style-loader与css-loader好基友文档：https://www.webpackjs.com/loaders/css-loader/需要同时用到多个loader时，配置应该写成数组的形式：{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}注...原创 2019-09-01 14:55:56 · 241 阅读 · 0 评论 -
【webpack】快速笔记4 -- loader（字体图标）
如何抽取有用的字体文件呢？去www.iconfont.cn去下载寻找字体图标，下载到本地并且解压：抽取这五个文件（有时没有woff2就不用管）：eot || svg || ttf || woff || woff2然后复制 iconfont.css 里面的css样式，只 src: url('./font/iconfont.eot?t=1566835316127') 注意要引入对应的eot,...原创 2019-09-01 14:58:25 · 439 阅读 · 0 评论 -
【webpack】快速笔记5 -- plugins（html-webpack-plugins与clean-webpack-plugin）
html-webpack-plugins官方文档： https://www.webpackjs.com/plugins/html-webpack-plugin/var HtmlWebpackPlugin = require('html-webpack-plugin');var path = require('path');var webpackConfig = { entry: ...原创 2019-09-02 08:26:25 · 262 阅读 · 0 评论 -
【webpack】快速笔记6 -- 打包多个压缩js文件及output相关配置
当不再是一对一的输出时也就是说entry有多个入口文件，对应的输出output出口文件怎么写，才能将每个填写的entry文件都打包module.exports = { mode: 'production', // mode: 'development', entry: { "main": './src/index.js', "temp":...原创 2019-09-02 08:29:12 · 937 阅读 · 0 评论 -
【webpack】快速笔记7 -- 使用sourchMap追根溯源（报错源）
平时的报错是不是看到的是这样的(┬＿┬)原创 2019-09-02 08:31:33 · 367 阅读 · 0 评论 -
【webpack】快速笔记8 -- webpackDevServer开启本地服务
热更新的热潮是否记得使用vue/react自动搭建的脚手架中，每次ctrl+s浏览器就会自动刷新，展示修改后的新内容；这是什么操作，这是因为这些框架中底层使用的就是webpackDevServer这种热更新的服务，给开发带来了很大的便捷额；回顾之前几篇文章我们就开始使用webpack的快捷指令启动，但每次改动后，都要重新在命令行中打包，在去刷新手动打开的浏览器，才能看到更改的内容，是不是要...原创 2019-09-03 03:09:02 · 596 阅读 · 0 评论 -
【webpack】快速笔记9 -- Hot Module Replacement 热模块更新
整理一下上一篇内容删除server.js，package.json改成使用webpack-dev-server即可： "scripts": { "start": "webpack-dev-server" },webpack.config.js增加css规则：{ test: /\.css$/, use: [ ...原创 2019-09-04 00:02:54 · 311 阅读 · 0 评论 -
【webpack】快速笔记10 -- 使用Babel翻译ES6语法
处理一下上一篇遗留的代码删除掉三个文件，counter.js、number.js、style.css其次将index.js中的代码清空一下开始进入主题在index.js中写下这段ES6代码：const arr = [ new Promise(()=>{}), new Promise(()=>{})]arr.map(item => { con...原创 2019-09-06 16:35:11 · 538 阅读 · 0 评论 -
【webpack】快速笔记11 -- 借助Babel实现对React框架的打包
直入正题↓ 整理写React代码：我们上一篇使用的transform-runtime，此时需要更改一下，在.babelrc中更改为presets的配置（特别注意，.babelrc文件中的书写格式是要对应的键和值该双引号的双引号，它就想我们mock数据中写的jsonp一样有自己的规则，否则会报错）：{ "presets":[["@babel/preset-env", { "ta...原创 2019-09-07 00:05:38 · 450 阅读 · 0 评论 -
【webpack】快速笔记12 -- Tree Shaking 概念详解
慢慢剥开 Tree Shakingindex.js:我们将React相关代码注释掉或者删除，只引入一个@babel/polyfill的包import "@babel/polyfill";// import React, {Component} from 'react'// import ReactDom from 'react-dom'// class App extends Co...原创 2019-09-08 11:40:08 · 333 阅读 · 0 评论 -
【webpack】快速笔记13 -- development和production模式的区分打包
回顾上一篇我们进行配置Tree Shaking时是不是分两种环境进行配置分析，每次我们都需要改 webpack.config.js 里面的代码，现在能不能将这两个环境的代码都有自己的script启动命令，这样我们就可以通过对应输入命令行代码启动对应的环境的webpack了分离开发和生产配置分离：根据上面说的问题，那我们可以新建两个webpack配置，一个为webpack.dev.js，另一...原创 2019-09-08 11:40:58 · 378 阅读 · 0 评论 -
【webpack】wepack番外篇 -- Webpack会主宰我们吗？
Webpack会主宰我们吗？前言webpack刚出现时gulp如日中天，现在webpack更新到4.x版本，gulp逐渐淡出我们的视线，聊webpack的人越来越多，直到最近发现Vue官方文档里到处都是基于webpack的讲解，仿佛webpack已经成为了打包器的事实标准，前端这几年变化太大了，如果村子刚通网的话，你会发现你是不是脱轨了…框架技术层出不穷，技术要求越来越硬，现在的前端攻城狮如...原创 2019-09-01 14:48:53 · 275 阅读 · 3 评论