Webpack
关注
分享
扫一扫
Meskjei
爱那么短 而回忆那么长
展开
-
Webpack概念
文章目录引入概念引入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-08-25 20:28:24 · 259 阅读 · 0 评论 -
Webpack--自己写一个Loader
先直接来看代码：module.exports = function(source){ return source.replace('Webpack', 'JavaScript');}这三行代码就实现了一个最简单的Loader，它的作用是将源码中出现的所有’Webpack’替换成’JavaScript’。参数source就是所处理的文件的代码，是一个字符串。所导出的函数必须是使用...原创 2019-09-09 17:42:49 · 712 阅读 · 0 评论 -
Webpack之resolve
文章目录resolve.extensions注意resolve.mainFilesresolve.aliasresolve.extensions我们在引入外部模块的时候，通常会有这种写法：import test from './test/test这种写法就是想从./test目录下去引入test.js。可是再进行React的开发时，我们经常会将文件后缀命名为.jsx。那么再通过上面那样的写法...原创 2019-09-09 09:52:27 · 1291 阅读 · 0 评论 -
Webpack之DLL
文章目录引入流程问题引入在我们的项目中，免不了要引入许多的第三方模块。这些第三方模块在打包的时候就会被打包进最后生成的文件之中。导致最后生成的文件过大的同时也增加了打包的时间。这时我们就会想，如果这些第三方模块能只打包一次，之后就直接使用这些打包好的模块多好，毕竟这些第三方的模块代码不会有变动。那么，我们再次打包目标代码时就不需要再从node_modules中去寻找第三方模块，而是从我们预...原创 2019-09-09 09:17:14 · 1714 阅读 · 0 评论 -
Webpack与ESLint
文章目录概念使用概念在团队中，每个人的代码风格都不尽相同。自然的，提交到代码库里的代码也就风格多样。这不是一个好事，统一的代码风格有助于团队成员理解他人写的代码，也易于维护。那么想要所有人的代码风格统一，我们就需要用到ESLint。使用首先得要安装eslint：yarn add eslint然后进行ESLint的初始化：npx eslint --init初始化过程会让我们...原创 2019-09-07 21:58:30 · 1035 阅读 · 0 评论 -
webpack-dev-server与单页应用路由
首先是三个使用React编写的文件：index.js：import React, { Component } from 'react';import ReactDOM from 'react-dom';import { BroswerRouter, Route } from 'react-router-dom';import Home from './Home';import List...原创 2019-09-07 00:24:16 · 616 阅读 · 0 评论 -
webpack-dev-server的代理（proxy）
文章目录引入proxy引入先看一个例子：import React, { Component } from 'react';import ReactDOM from 'react-dom';import axios from 'axios';class App extends Component { componentDidMount(){ axios.get(...原创 2019-09-06 21:47:28 · 6808 阅读 · 0 评论 -
Webpack与TypeScript
文章目录引入使用问题引入TypeScript是最近一段时间非常火的一个JavaScript的超集。说是超集，那么自然TypeScript也完整的支持JavaScript语法，同时还提供了许多新特性。那么Webpack也能够对TypeScript的源文件进行打包。使用首先创建一个新项目，就叫typescript。然后在项目根目录下新建src文件夹、webpack.config.js配置文...原创 2019-09-06 17:15:35 · 779 阅读 · 0 评论 -
Webpack之Shimming
文章目录引入使用this引入首先在index.js内写如下内容：import _ lodash from 'lodash';import { test } from './test';console.log(_.join(['a','b','c'], ''));然后在test.js中：console.log(_.join(['1','2','3'], ''));打包后在浏览器中...原创 2019-09-02 12:32:30 · 197 阅读 · 0 评论 -
Webpack与浏览器缓存
想必大家都知道浏览器是有缓存的。浏览器缓存分为强缓存和协商缓存，在命中强缓存时就不会像服务器请求数据。那么就产生了一个问题，在强缓存生效的时间内一旦服务器资源发生了变化该怎么办？办法也很简单，修改资源的文件名。只要文件名不一样，那么请求的url也不一样，那么就相当于请求一个新的资源，自然就不会去使用缓存（尽管缓存依然存在）。那么现在我们的需求便是希望文件名能够体现文件有没有被修改过，如果两次...原创 2019-09-02 11:01:35 · 291 阅读 · 0 评论 -
Webpack之prefetch和preload
文章目录引入例子引入所有新技术的出现都是为了解决现有的问题或者是旧技术没法解决的问题。prefetch和preload也是如此。现在有两个问题：首先，代码的懒加载固然能是首页加载的速度变快，可是相应的，待到用户与页面交互再加载交互相关代码会使得用户首次交互的体验不佳（长时间没有对操作进行响应）。其次，在SplitChunksPlugin的默认配置中，chunks字段默认是为async的...原创 2019-08-29 13:28:22 · 3380 阅读 · 0 评论 -
Webpack和Code Spliting
文章目录引入Webpack与Code Spliting（代码分割）总结引入首先来看一个例子：我们安装一个ladash的库，引入之后写下列代码：import _ from 'lodash';console.log(_.join(['a','b','c'], ''));...// 假设下面还有许多业务代码首先我们假设lodash的大小为1MB，我们写的业务逻辑代码也有1MB，那么在...原创 2019-08-28 15:35:40 · 215 阅读 · 0 评论 -
Webpack之不同模式的区分打包
文章目录引入初步的区分打包更进一步的区分打包引入Webpack针对development和production两种模式各自有一些默认的配置，以及个人设置的一些配置。例如在开发环境中，我们通常会使用devServer搭配HMR，而且错误信息也会更加全面。而到了生产环境时，Webpack则会默认开启Tree shaking，也会对代码进行压缩。用过create-react-app的人肯定都知道...原创 2019-08-28 13:16:06 · 1109 阅读 · 0 评论 -
Webpack之Tree shaking
文章目录引入使用问题引入了解Tree Shaking之前先来看一个例子：math.js：export const add = (a, b) => { console.log(a+b);}export const minus = (a, b) => { console.log(a-b);}index.js：import { add } from '....原创 2019-08-28 01:47:10 · 231 阅读 · 0 评论 -
Webpack之Plugins
文章目录概念HTMLWebpackPlugin使用clean-webpack-plugin使用概念plugin可以在Webpack运行到某个时刻的时候，来自动做一些事情，类似于React里的生命周期函数。HTMLWebpackPlugin这个插件的主要功能是在打包结束之后，自动在输出目录下生成一个html文件，并把打包生成的JS文件自动的引入到这个html文件中。使用const pat...原创 2019-08-27 11:20:00 · 579 阅读 · 0 评论 -
Webpack打包静态资源之图片篇
文章目录占位符更改输出目录url-loader占位符我们知道，在打包图片的时候，名字是被file-loader重新命名过的。那如果我想使用图片本身的名字该怎么办呢？同样的，可以在webpack.config.js里配置。const path = require('path');module.exports ={ entry: './src/index.js', outpu...原创 2019-08-26 00:52:11 · 1390 阅读 · 0 评论 -
Webpack配置文件初步
在命令行中输入：npx webpack 需要打包的文件名这样便可以对文件进行打包，似乎并不需要所谓的配置文件。而实际上，并不是不需要配置文件，而是因为Webpack自身有一个比较完善的默认配置。Webpack的默认配置文件名是webpack.config.js。我们来看一个比较基础的配置写法：const path = require('path');module.exports =...原创 2019-08-25 21:05:44 · 136 阅读 · 0 评论 -
实现一个类似Webpack的基础打包工具
文章目录引入步骤简述具体实现分析文件源码解析分析依赖关系源码解析生成最终代码源码解析引入其实在Webpack官网，可以看到官方对于Webpack的定位是一个打包工具。而它最基础的使用就是在浏览器中实现JS的模块化和将ES6转为ES5。浏览器中引入一个JS文件，如果文件中有使用import语句进行模块的引入，浏览器是会报错的。那么我们要实现的这个基础的打包工具也就是用来解决这个问题的。步骤...原创 2019-09-17 11:06:54 · 546 阅读 · 0 评论