Webpack4

升级webpack5过程中遇到的坑

extract-text-webpack-plugin兼容问题webpack-dev-server兼容问题1.extract-text-webpack-plugin兼容问题升到webpack5后，运行打包直接报错，如下：原因是：webpack4
LYFlied·2021-02-04 19:39

Webpack 5 新特性尝鲜

Webpack5发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变；今天我们就来做个对比看看，webpack5带来了那些全新的改变；没有对比就没有伤害，为了更好地伤害webpack4
西岭老湿·2021-02-04 16:31

Webpack 5 新特性尝鲜

Webpack5发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变；今天我们就来做个对比看看，webpack5带来了那些全新的改变；没有对比就没有伤害，为了更好地伤害webpack4
·2021-02-04 14:13

Webpack 5 新特性尝鲜

Webpack5发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变；今天我们就来做个对比看看，webpack5带来了那些全新的改变；没有对比就没有伤害，为了更好地伤害webpack4
·2021-02-04 13:42

react 图片放在src里面还是public_从零搭建webpack4+react+typescript+eslint脚手架(一)

引言项目github仓库地址：https://github.com/mecoepcoo/ts-react-boilerplate这个系列的文章主要讲述如何从一个空目录建立webpack+react+typescript+eslint脚手架，书写此文时各主要工具的版本为：webpackv4reactv16.9typescriptv3.5babelv7eslintv6.2本文涉及的内容大致包含：web
yuxin tong·2021-02-04 11:01

关于webpack-dev-server和webpack4.x配置热更新&jsonp无刷新

学webpack以来折腾最久的一次bug…安装webpack-dev-server（在此之前要先完成webpack基本配置，不再赘述）yarnaddwebpack-dev-server-D此时出现警告如下：原因是chokidar2和fsevents1版本过低，node.js版本在14以上时将会报此错，接下来，用npmupgrade升级（先要保证安装了npmupgrade）npm-check检查更新
Amethyst紫宣·2021-02-03 19:41

真香 - Webpack5 新特性之增量编译

webpack5正式发布于2020年10月10号，距离上一个大版本Webpack4更新已经是2年前年了，每个大版本的升级都会有相当多的改变和提升，今天咱们就来看看增量编辑和长期缓存。
zz_jesse·2021-01-29 13:45

Webpack从零配置,以Vue项目为例！

我们继续3.我们来配置config文件(这里提一句，webpack4有默认配置入口文件：默认是./src/index.js，出口文件：默认是./dist/main.js)然后建立
·2021-01-26 19:05

webpack5新特性记录

webpack5大致使用和webpack4相同介绍下新的特性1、启动命令不一样了webpackserve就能启动webpack-dev-server"scripts":{"build":"webpack
前端程序猿dzf·2021-01-22 17:44

使用vue-cli3创建项目

文章目录1.前言2.创建项目3.目录结构4.配置文件去哪里了5.资料1.前言vue-cli3与vue-cli2版本有很大区别vue-cli3是基于webpack4打造，vue-cli2基于webapck3vue-cli3
webchang·2021-01-17 19:12

webpack 打包图片资源url-loader和file-loader

以下教程基于webpack4.46.0：当前src目录下有这些文件：test2.htmltest2.less，里面引用了3张图片:test2.js,引入test2.less:webpack.config.js
dyw3390199·2021-01-16 19:55

Webpack4.0各个击破（10）integration篇

一.Integration下文摘自webpack中文网：首先我们要消除一个常见的误解，webpack是一个模块打包工具(modulebundler)，它不是一个任务执行工具，任务执行器是用来自动化处理开发中常见任务的，例如检查(lint)，构建(build)，测试(test)等。相对于打包器，任务执行器所面对的逻辑问题更为上层，你可以使用上层的工具来管理整个持续集成（CI），而把打包的部分交给we
JAVA_朴先生·2021-01-12 21:44

webpack4.0各个击破（9）—— karma篇

一.webpack与自动化测试webpack对应的关键词是模块化，它的主要任务就是打包和管理模块，所以首先需要明确的概念就是webpack之所以关联自动化测试，是因为它能够为测试脚本提供模块管理的能力，本质上来讲，是将webpack的打包功能嵌入了自动化测试框架，而不是将自动化测试框架作为插件集成进了webpack，理解这个区别是非常关键的。对于Karma+Mocha+Chai及其他自动化测试相关
JAVA_朴先生·2021-01-12 21:43

Webpack4.0各个击破（8）tapable篇

一.tapable概述tapable地址：【tapable-0.2】tapable是webpack的核心框架（4.0以上版本的API已经发生了变化），是一个基于事件流的框架，或者叫做发布订阅模式，或观察者模式，webpack的整个生命周期及其开放的自定义插件系统都离不开tapable的支持，研究其运行原理是阅读webpack源代码的第一步。官方仓库master分支的代码是经过ES6重构的，模块化拆
JAVA_朴先生·2021-01-12 21:42

Webpack4.0各个击破（7）plugin篇

一.plugin概述1.1Plugin的作用plugin机制是webpack中另一个核心概念，它基于事件流框架tapable，你可以参考浏览器环境中的【DOM事件模型】，【SPA模型中的生命周期钩子】或是node环境中的【EventEmitter模块】来理解其作用。plugin系统提供给开发者监听webpack生命周期并在特定事件触发时执行指定操作的能力。当然，要写一个真正能实现一定功能的插件，你
JAVA_朴先生·2021-01-12 21:40

webpack4.29.x成神之路（十三） 摇树优化(tree shaking)

目录上节：source-map上节目录如下：概念官方：描述移除JavaScript上下文中的未引用代码。也就是希望webpack在打包时把没用到的函数删掉，最常见的就算第三方函数库：lodash,date-fns等。新建src/js/math.js：exportfunctionadd(...arg){returnarg.reduce((x,y)=>x+y);}exportfunctionsub(.
会js的诸葛村夫·2021-01-11 00:43

webpack4.29.x成神之路（四） entry与output

目录上节：基本配置与mode目录结构如下：本节将重点讲解entry和output的常用配置。一、entry先跟新webpack.config.js，将output删除：webpack.config.js:module.exports={mode:'production',entry:'./src/index.js'};然后执行：npmrunbuild在根目录下生成了dist目录，并且打包后的文件名
会js的诸葛村夫·2021-01-11 00:12

webpack4.29.x成神之路（二） 起步

目录上节：webpack简介一、webpack安装首先新建一个空文件夹，在改文件夹下打开命令行，输入npminit-y创建一个package.json文件。然后在package.json中填好一些基本信息，一个基本的package.json内容大致如下：package.json{"name":"webpack-train","version":"1.0.0","description":"webp
会js的诸葛村夫·2021-01-11 00:12

webpack4.29.x成神之路（十二） source-map

目录上节：babel编译es6上节目录如下：使用webpack编译后的代码运行在浏览器上，一旦出错，错误指向的是编译后的代码，这对调试带来极大困难，所以webpack自带devtool选项来解决这一问题。修改webpack.config.js://省略module.exports={mode:'production',entry:'./src/index.js',output:{filename:
会js的诸葛村夫·2021-01-11 00:12

webpack4.29.x成神之路（一） webpack简介

目录一、什么是webpack通常一个页面，至少都会对应一个js文件、html文件和css文件，而这个js文件，我们称它为入口文件。webpack会分析入口文件的各种依赖关系，比如main.js中引入了什么css、js、图片？而依赖的某js文件中是否又依赖了其它的资源文件？这一系列复杂的依赖关系，webpack都会精准的帮我们梳理好，并且打包编译成最终线上代码。二、为什么要用webpack在早期我们
会js的诸葛村夫·2021-01-11 00:11

webpack4.29.x成神之路（序） 关于本教程

起笔于2019-4-17，按官网文档重新整理指南顺序，用更通俗易懂的语言，从基础-进阶-实战一步步深入，目标是让阅读本系列的朋友能完全掌握webpack4的用法，并能随心搭建高性能的自动化环境。
会js的诸葛村夫·2021-01-11 00:40

Webpack4.0各个击破（10）integration篇

一.Integration下文摘自webpack中文网：首先我们要消除一个常见的误解，webpack是一个模块打包工具(modulebundler)，它不是一个任务执行工具，任务执行器是用来自动化处理开发中常见任务的，例如检查(lint)，构建(build)，测试(test)等。相对于打包器，任务执行器所面对的逻辑问题更为上层，你可以使用上层的工具来管理整个持续集成（CI），而把打包的部分交给we
JAVA_朴先生·2021-01-09 17:29

webpack4.0各个击破（9）—— karma篇

一.webpack与自动化测试webpack对应的关键词是模块化，它的主要任务就是打包和管理模块，所以首先需要明确的概念就是webpack之所以关联自动化测试，是因为它能够为测试脚本提供模块管理的能力，本质上来讲，是将webpack的打包功能嵌入了自动化测试框架，而不是将自动化测试框架作为插件集成进了webpack，理解这个区别是非常关键的。对于Karma+Mocha+Chai及其他自动化测试相关
JAVA_朴先生·2021-01-07 12:02

【webpack】vue2.5 + webpack3 常用loaders汇总

从零开始搭建vue+webpack环境，坑很多，各种plugins和loader眼花缭乱，最关键的是很多loader随着webpack4升级也是大改造，新版本在webpack3上直接用不了。
杨成功·2021-01-05 20:07

搭建一个vue-cli4+webpack移动端框架（开箱即用）

技术栈：vue-cli4+webpack4+vant+axios+less+postcss-px2rem源码github.com/Michael-lzg…//安装依赖npminstall//本地启动npmrundev
lzg9527·2021-01-05 14:49

Webpack4.0各个击破（7）plugin篇

一.plugin概述1.1Plugin的作用plugin机制是webpack中另一个核心概念，它基于事件流框架tapable，你可以参考浏览器环境中的【DOM事件模型】，【SPA模型中的生命周期钩子】或是node环境中的【EventEmitter模块】来理解其作用。plugin系统提供给开发者监听webpack生命周期并在特定事件触发时执行指定操作的能力。当然，要写一个真正能实现一定功能的插件，你
JAVA_朴先生·2020-12-31 15:56

Webpack4.0各个击破（6）loader篇

一.loader综述loader是webpack的核心概念之一，它的基本工作流是将一个文件以字符串的形式读入，对其进行语法分析及转换（或者直接在loader中引入现成的编译工具，例如sass-loader中就引入了node-sass将SCSS代码转换为CSS代码，再交由css-loader处理），然后交由下一环节进行处理，所有载入的模块最终都会经过moduleFactory处理，转成javascr
JAVA_朴先生·2020-12-30 15:44

Webpack4.0各个击破（6）loader篇

一.loader综述loader是webpack的核心概念之一，它的基本工作流是将一个文件以字符串的形式读入，对其进行语法分析及转换（或者直接在loader中引入现成的编译工具，例如sass-loader中就引入了node-sass将SCSS代码转换为CSS代码，再交由css-loader处理），然后交由下一环节进行处理，所有载入的模块最终都会经过moduleFactory处理，转成javascr
JAVA_朴先生·2020-12-30 14:44

cli vue webpack 实战_webpack升级指南

导读前端开发的同学基本上都知道，webpack现在已经是主流的前端项目构建工具，从1版本到现在的4版本(以下简称webpack4)，webpack进行了多次优化，目的是让前端构建的门槛更低，操作更简单方便
今融道APP·2020-12-30 08:57

Webpack4.0各个击破（5）module篇

一.模块化乱炖脚本合并是基于模块化规范的，javascript模块化是一个非常混乱的话题，各种【MD】规范乱飞还要外加一堆【.js】的规范实现。现代化前端项目多基于框架进行开发，较为流行的框架内部基本已经统一遵循ES6的模块化标准，尽管支持度不一，但通过构建工具可以解决浏览器支持滞后的问题；基于nodejs的服务端项目原生支持CommonJs标准；而开发中引入的一些工具类的库，热门的工具类库为了能
JAVA_朴先生·2020-12-29 20:34

webpack4.0各个击破（4）—— Javascript & splitChunk

一.Js模块化开发javascript之所以需要打包合并，是因为模块化开发的存在。开发阶段我们需要将js文件分开写在很多零碎的文件中，方便调试和修改，但如果就这样上线，那首页的http请求数量将直接爆炸。同一个项目，别人2-3个请求就拿到了需要的文件，而你的可能需要20-30个，结果就不用多说了。但是合并脚本可不是“把所有的碎片文件都拷贝到一个js文件里”这样就能解决的，不仅要解决命名空间冲突的问
JAVA_朴先生·2020-12-29 20:36

webpack4.0各个击破（3）—— Assets篇

一.Assets资源的基本处理需求Assets，指项目中被引用的资源，通常为各种格式的图片和字体文件，当然也可能包含各式各样其他扩展名的文件（.json,.xml等），常见的图片和文字资源的处理包括：体积压缩雪碧图合并及引用修正资源的引用路径自动替换二.webpack处理引用资源2.1资源打包webpack通过file-loader处理资源文件，它会将rules规则命中的资源文件按照配置的信息（路
JAVA_朴先生·2020-12-29 20:33

Webpack4.0各个击破（1）html篇

（本篇中的参数配置及使用方式均基于webpack4.0版本）一.webpack中的html对于浏览器而言，html文件是用户访问的入口点，也是所有资源的挂载点，所有资源都是
JAVA_朴先生·2020-12-29 20:30

webpack4.0各个击破（2）—— CSS篇

（本篇中的参数配置及使用方式均基于webpack4.0版本）一.CSS文件基本处理需求假设项目中的CSS文件均采用预编译语言编写，那么在打包中需要处理的基本问题包括：预编译
JAVA_朴先生·2020-12-29 20:30

Webpack4.0各个击破（5）module篇

一.模块化乱炖脚本合并是基于模块化规范的，javascript模块化是一个非常混乱的话题，各种【MD】规范乱飞还要外加一堆【.js】的规范实现。现代化前端项目多基于框架进行开发，较为流行的框架内部基本已经统一遵循ES6的模块化标准，尽管支持度不一，但通过构建工具可以解决浏览器支持滞后的问题；基于nodejs的服务端项目原生支持CommonJs标准；而开发中引入的一些工具类的库，热门的工具类库为了能
JAVA_朴先生·2020-12-29 20:37

create方法 eslint关闭_从零搭建webpack4+react+typescript+eslint脚手架(一)

引言项目github仓库地址：https://github.com/mecoepcoo/ts-react-boilerplate这个系列的文章主要讲述如何从一个空目录建立webpack+react+typescript+eslint脚手架，书写此文时各主要工具的版本为：webpackv4reactv16.9typescriptv3.5babelv7eslintv6.2本文涉及的内容大致包含：web
天启karl·2020-12-29 15:50

webpack4.0各个击破（4）—— Javascript & splitChunk

一.Js模块化开发javascript之所以需要打包合并，是因为模块化开发的存在。开发阶段我们需要将js文件分开写在很多零碎的文件中，方便调试和修改，但如果就这样上线，那首页的http请求数量将直接爆炸。同一个项目，别人2-3个请求就拿到了需要的文件，而你的可能需要20-30个，结果就不用多说了。但是合并脚本可不是“把所有的碎片文件都拷贝到一个js文件里”这样就能解决的，不仅要解决命名空间冲突的问
JAVA_朴先生·2020-12-28 18:24

webpack解决样式url()背景图问题

定位错误项目使用webpack4进行编译，打包后的样式中使用url方法指定的背景图片不能够正常显示.bgurl{background-image:url('/images/abc.jpeg')}上述样式在
天天修改·2020-12-28 00:08

vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目

h5移动端项目模板基于vue-cli4.0+webpack4+vantui+sass+rem适配方案+axios封装，构建手机端模板脚手架启动项目gitclonehttps://github.com/teach-tian
星空之火@田兴·2020-12-25 17:04

超级详细的手写webpack4配置来启动vue2项目（附配置作用）

基础目录结构以及各个文件的作用初始npm项目npminit一路回车，一律使用默认的npm项目配置package.json修改scripts如下：{"name":"doing-a-webpack4-vue2
Sotyoyo·2020-12-21 23:21

vue脚手架项目打包成app_用vue快速开发app的脚手架工具-阿里云开发者社区

前言多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来.使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOSAPP.本文最大特点:webpack4
weixin_39926311·2020-12-21 21:04

解决webpack打包样式url()背景图片问题

定位错误项目使用webpack4进行编译，打包后的样式中使用url方法指定的背景图片不能够正常显示源码戳这里.bgurl{background-image:url('/images/abc.jpeg')
kkndyyrolf·2020-12-21 14:08

「 面试三板斧 」之 代码分割（上）

现在比较多的项目用的都是webpack4,webpack4舍弃了之前的commonChunkPlugin，增加了SplitChunksPlugin。
皮小蛋·2020-12-16 13:08

「 面试三板斧 」之 代码分割（上）

现在比较多的项目用的都是webpack4,webpack4舍弃了之前的commonChunkPlugin，增加了SplitChunksPlugin。
皮小蛋·2020-12-16 12:09

webpack notes

webpack4慕课网全套课程学习笔记1、安装webpack-cli会自动帮我们安装webpack2、npxwebpackindex.js让webpack帮我们翻译index.js（会帮我们翻译和链接ES6
JohnsonGH·2020-12-10 02:18

vue创建项目

开搞  1.vue-cli3和vue-cli2的区别    (1).vue-cli3是基于webpack4打造的，vue-cli2是基于webpack3    (2).vue-cli3的设计原则是"0配置
GG_lyf·2020-12-09 20:18

webpack4配置优化

前面我们说了webpack的一些基础，现在我们来使用webpack实际来编译写个项目。用vue-cli创建一个项目，然后把它的vue-cli-service以及webpack等黑盒工具移除，然后我们来自己编译它。首先我们要创建三个文件webpack.common.js公共的webpack配置webpack.dev.js开发阶段的配置webpack.prod.js生产阶段的配置首先我们来编写webp
Charon·2020-12-06 23:35

Vue3+TypeScript+Router+Vuex+Ant-Design-Vue项目

搭建条件node8+npm6.1+vue-cli4+webpack4+vue-cli升级命令变更，低于3.0版本的需要先卸载再安装//卸载npmuninstallvue-cli-g//安装npminstall
锋叔·2020-12-04 18:32

[翻译]基于Webpack4使用懒加载分离打包React代码

code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec60140ec5a作者：AvivShafir摘要：Innovid网站使用Webpack4
白吟灵·2020-12-03 14:26

webpack4从0搭建组件库的实现

代码分离代码分离方法有三种：入口起点：使用entry配置手动地分离代码。防止重复：使用SplitChunksPlugin去重和分离chunk。动态导入：通过模块中的内联函数调用来分离代码。动态导入(dynamicimports)import()require.ensure预取/预加载模块(prefetch/preloadmodule)webpackv4.6.0+添加了预取和预加载的支持。在声明im
·2020-11-29 10:52
上一页 8 9 10 11 12 13 14 15 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他