webpack4.0

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

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

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

升级到webpack4.0遇到的一些问题

问题1Plugincouldnotberegisteredat'html-webpack-plugin-before-html-processing'.Hookwasnotfound.解决方案：升级webpackhttps://medium.com/@hiiamyes/[email protected]@3.1.0-npmihtml-webpack-plu
三木奈绪·2020-11-28 22:23

webpack4.0简单图们的例子

https://gitee.com/staudy/webpackdemo（下载后切换到dev分支）推荐的博文：https://www.jianshu.com/p/1192cfd4a012https://www.cnblogs.com/guolao/p/11830098.html
一壶酒儿·2020-09-16 09:59

关于webpack4.0打包代码分割optimization.splitChunks的配置详解

/***webpack中实现代码分割的两种方式：*1.同步代码：只需要在webpack配置文件总做optimization的配置即可*2.异步代码(import)：异步代码，无需做任何配置，会自动进行代码分割，放置到新的文件中*3.分离文件必须大于30kb，才可以分离成功，否则设置无效*/optimization:{splitChunks:{chunks:"all",//async对异步引入的代码
圣罗兰反转巴黎·2020-09-16 04:50

9012教你如何使用gulp4开发项目脚手架

如果gulp不是你们团队的重点，也可以移步我的另一篇文章:用webpack4.0撸单页/多页脚手架(jquery,react,vue,typescript)前言由于本文重点是介绍gulp4.0搭建脚手架的思路
weixin_30493401·2020-09-15 03:47

升级到webpack4.0之后.............

1.webpack4.0.0cannotfindmoudle"webpack/bin/config-yargs"原因webpack-dev-server与webpack版本不兼容问题。解决办法：我的webpack版本是4.0.0，我用"webpack-dev-server":"^3.1.1"这个版本就行了。2.webpack4:TypeError:compilation.mainTemplate.
java小王·2020-09-14 00:23

webpack打包原理分析和实现（一）

打包原理分析和实现（三）首先，新建一个空文件夹，编辑器(webstrom)打开文件夹，执行npminit-y，生成package.json，在根目录新建webpack.config.js,加入如下代码(webpack4.0
_kangzai·2020-09-13 00:23

从零到一，新建webpack工程

基于webpack4.0。包含开发环境配置，生产环境配置，代码分离，css提取，gzip压缩，base64加载资源，打包分析，ssh一键部署等常用配置。github项目地址[TOC]项目初始化统一
weixin_33711647·2020-09-12 20:32

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead解决

webpack4.0以上用3.xextract-webpack-plugin打包会不兼容，extract-webpack-plugin升级就可以了npminstall--save-devextract-text-webpack-plugin
qq_34200501·2020-09-12 11:30

Webpack4.0 打包工具基本操作教程 小白篇

前言我们在开发项目时，会用到很多的静态资源，我们在浏览器，浏览网页时，网页加载的速度就会变慢，而且有很多的文件都是相互依赖的。由于文章排版问题可能影响小阔爱的阅读，具体完整版可以关注微信公众号小帅搜总结网页加载速度慢，因为我们要发起很多的二次请求要处理错综复杂的依赖关系如何解决合并、压缩、精灵图、图片的Base64编码requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系we
一纸荒凉 * Armani·2020-09-12 04:08

关于webpack4.0打包代码分割optimization.splitChunks的配置详解

optimization可以实现很多功能，最常见的功能是：threeshaking只支持ESModule模块的引入，删除没有引用的模块打包CodeSplitting拆分代码，提高执行效率和用户体验splitChunks是用来设置代码如何打包和分割的，现就webpack官网提供的默认参数详细解释一下每个参数配置的含义以及使用场景。官网链接：https://www.webpackjs.com/plug
console.log...·2020-09-11 11:35

手把手教你从零认识webpack4.0

原文链接:www.jianshu.com/p/f931f47cb…前言：作为一个现代javascript应用程序的静态模块打包器，webpack能将各种资源，如js，css，图片等作为模块来处理，是当下前端工程化的一个很受欢迎的工具，webpack目前最新的版本是4.0，文章将在4.0的基础上，从使用者的角度，一步步教你认识并搭建一个简单的webpack配置项目，当然webpack的配置和使用较为
weixin_33995481·2020-09-11 11:07

webpack4.0学习笔记

webpack基础webpack基础配置webpack打包出的文件解析Html插件样式处理转化es6语法处理js语法及校验全局变量引入问题图片处理打包文件分类webpack配置打包多页应用配置source-mapwatch的用法webpack小插件应用webpack跨域问题resolve属性的配置定义环境变量区分不同环境webpack性能优化noParseIgnorePlugindllPlugin
weixin_33893473·2020-09-11 11:02

从基础到实战 手把手带你掌握新版Webpack4.0完整之个人笔记

1-1课程导学2-1webpack究竟是什么1.面向过程的程序和面向对象的程序面向过程的程序相当于一大长串的代码，会造成文件越来越大，不利于维护面向对象是把一个部分封装到一个类中，当某个东西出现问题时，可以方便的去寻找这个类2.import引入js文件浏览器并不认识import，需要通过webpack来解析一下3.安装webpacknpminitnpminstallwebpackwebpack-c
speed_zombie·2020-09-11 07:16

从基础到实战 手把手带你掌握新版Webpack4.0完整

2-1webpack究竟是什么一.1.面向过程的程序和面向对象的程序面向过程的程序相当于一大长串的代码，会造成文件越来越大，不利于维护面向对象是把一个部分封装到一个类中，当某个东西出现问题时，可以方便的去寻找这个类2.import引入js文件浏览器并不认识import，需要通过webpack来解析一下3.安装webpacknpminitnpminstallwebpackwebpack-cli4.w
speed_zombie·2020-09-11 07:45

webpack4.0让编译速度飙升

前端开发一个crm项目的时候，因为项目内容比较庞大，导致webpack编译和打包都巨慢，实在是影响开发效率，所以着手升级webpack。webpack4-es6-reactwebpack4-es6-react是一个全新的基于webpack4、react16、es6、antd-mobile的前端架构实现方案，默认是antd-mobile,也可以自定义配置ui框架如：antd功能编译速度快（使用hap
weixin_34162695·2020-09-10 19:02

使用 webpack4.0 和 babel7.0 从零开始搭建自己的 react 开发环境

719ff62e59a613d5f24765741061318b.jpegwebpack是一个前端模组化构建工具，它可以帮助我们实现前端项目的工程化开发，相信我，工程化真的很重要。目前的版本为4.37.1，关于webpack4的一些特性大家可以看这里，本次实践的源码可以在这里找到。1.初始化项目新建一个项目文件夹mkdirwebpack-dev-env&&cdwebpack-dev-env执行以下
wfatec·2020-08-24 04:56

npm安装依赖errno -4048报错

作为前端攻城狮，和npm打交道肯定是少不了的，经常利用npm下载各种依赖，题主就经常遇到这个报错F:\demo\webpack_study\webpack4.0>npminstallwebpack-DnpmERR
红豆稀饭_a071·2020-08-23 18:27

【Webpack】Webpack踩坑，初次安装版本不合适问题

初次安装webpack进行项目打包时，按照安装语句：npminstallwebpack-g默认进行了版本安装，但初次接触，由于webpack4.0以上版本，已经分离了webpack-cli,所以目前，无论是学习还是开发项目
Jayant89·2020-08-22 16:49

npm安装依赖errno -4048报错

作为前端攻城狮，和npm打交道肯定是少不了的，经常利用npm下载各种依赖，题主就经常遇到这个报错F:\demo\webpack_study\webpack4.0>npminstallwebpack-DnpmERR
weixin_39378610·2020-08-22 11:28

webpack4配置es6+less环境遇到的问题

webpack升级到4，分离出了webpack-cli，同时也升级了一堆插件（出问题就update一下，可能就OK了）webpack4.0简化了很多操作，如entry（默认dir目录，所以自己手动建一个
pannno·2020-08-22 04:11

【node.js】webpack 打包出错相关问题（WARNING in Configuration）

一、问题一：4.0以上版本的webpack的问题webpack4.0以上版本的webpack的脚手架webpack-cli已经被被分离出来了，需要另外安装。
汪小穆·2020-08-22 03:57

webpack3.0升级4.0

文章目录1.webpack3.11升级4.262.安装/升级依赖3.遇到的问题4.总结1.webpack3.11升级4.26为了提升打包效率，在webpack3.11基础之上做了升级，webpack4.0
_kangzai·2020-08-21 11:17

webpack4.0基础篇

webpack就是为打包而生的。一、准备学习webpack首先需要安装nodejs，并且作者也强调新版本的nodejs会提高webpack的打包速度。安装好node后就可以在项目命令行中执行下面的代码npminit然后根据需要设置，也可以一直回车，当然如果都使用默认配置也可以npminit-y这样就可以在项目中生成package.json文件了。这样做的目的就是为了使项目符合node规范。二、安装
巴斯光年·2020-08-20 22:00

webpack4.0基础篇

webpack就是为打包而生的。一、准备学习webpack首先需要安装nodejs，并且作者也强调新版本的nodejs会提高webpack的打包速度。安装好node后就可以在项目命令行中执行下面的代码npminit然后根据需要设置，也可以一直回车，当然如果都使用默认配置也可以npminit-y这样就可以在项目中生成package.json文件了。这样做的目的就是为了使项目符合node规范。二、安装
巴斯光年·2020-08-20 22:00

书签管理器3-(暂存(每150行分割))

babel7版本)-掘金24个实例入门并掌握「Webpack4」(一)-掘金24个实例入门并掌握「Webpack4」(二)-掘金24个实例入门并掌握「Webpack4」(三)-掘金从基础到实战手摸手带你掌握新版Webpack4.0
VivaLaVida_692c·2020-08-19 03:35

自己搭建纯净版vue框架

1190000012789253源码地址https://github.com/mosewutong/writeSmallVue1.初始化项目npminit//创建package.json2.安装webpack因为使用的是webpack4.0
墨色梧桐·2020-08-18 19:42

webpack4.0以上版本取消打包严格模式一些坑

使用vue结合mint-ui进行项目开发时，遇到打包mint-ui文件出现严格模式错误情况，解决办法如下：使用cnpm安装@babel/plugin-transform-modules-commonjs@babel/plugin-transform-strict-mode；cnpmi@babel/plugin-transform-modules-commonjs@babel/plugin-tran
tomato94·2020-08-18 03:32

webpack系统学习

webpack4.0的四个核心概念入口（entry）输出（output）loader插件（plugins）入口（en
拿我格子衫来·2020-08-17 22:24

react配置反向代理

新版react16.6中create-react-app升级版(webpack4.0)配置http请求跨域问题但在最新的create-react-appv2升级版(webpack4.0)中，如果proxy
淘气_de小码农·2020-08-17 01:13

08 webpack4.0学习笔记——配置文件_DefinePlugin使用

概述DefinePlugin用来做定义。这就类似于我们项目开发中的config文件一样，在config文件中一般放的是系统代码中的一些服务器地址之类的公共信息，我们将这些信息提取出来单独放在配置文件中，方便于后期的维护和管理。那DefinePlugin的功能和config这个文件类似，我们可以在它里面定义一些公有信息，然后在代码里直接使用，接下来我们来看详细操作步骤。具体操作步骤1、根据官网的介绍
X北辰北·2020-08-15 19:04

webpack怎么根据不同环境给不同的打包配置（基于webpack4.0）

实际项目运用中，打包到生产环境的代码跟开发环境的代码的需求是不一样的，一个很简单的例子一般情况下，webpack的mode是production模式的，打包出来的js文件是经过压缩的，这适用于生产环境；但是开发环境我们需要的是用development的；在实际的开发的时候，前后端联调的时候也会根据不同的环境，比如开发环境，测试环境，正式生产环境配置不同的域名；结合各种情况，给不同的环境配置不同的打
Bessicxie·2020-08-15 18:35

webpack4.0基础（四）

使用babel处理ES6语法官网：https://babeljs.io/1.npmi-Dbabel-loader@babel/core@babel/preset-env#安装babel-loader和@babel/core和@babel/preset-envbabel-loader:是webpack和babel通讯的桥梁，使webpack和babel打通，babel-loader并不会把js中的E
weixin_45368324·2020-08-15 17:17

webpack与extract-text-webpack-plugin版本冲突问题解决

描述：在webpack4.0中使用“extract-text-webpack-plugin”之后，生产环境下报错，如何解决(node:4728)DeprecationWarning:Tapable.pluginisdeprecated.UsenewAPIon
yanya_·2020-08-15 08:24

使用 Webpack4.0 打包组件库并发布到 npm

Webpack4的升级指南可以参考下Webpack4.0升级配置，本文不做赘述。
weixin_33910434·2020-08-15 00:19

前端工程化--关于npm/yarn、webpack、vue的工具链

前端工程化--关于npm/yarn、webpack、vue的工具链管理工具npm/yarn安装起步包的安装删除包和依赖安装所有依赖更新包清楚缓存设置webpack配置安装webpack4.0和webpcak-cliwebpack
kikpin·2020-08-14 22:04

Webpack构建Vue项目踩过的坑

问题1：Error:Chunk.entrypoints:UseChunks.groupsIterableandfilterbyinstanceofEntrypointinstead解决方法：webpack4.0
红枫忆梦·2020-08-12 17:56

webpack4.0入门指南（一）安装和转换es6语法

webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。webpackv4.0.0开始，可以不用引入一个配置文件。安装npminstall-gwebpacknpminstall-g
Mathilda91·2020-08-11 23:40

05 webpack4.0学习笔记——配置文件_babel-loader使用

概述babel-loader负责将ES6、ES7代码转换成浏览器可运行的ES5的代码，是现代前端工程化中比较重要的loader。接下来我们介绍babel-loader的基本使用和配置。具体操作步骤1、本文中使用的demo继续使用前一文章中的代码，webpack配置文件如下所示（没有新增任何代码，还是之前url-loader所用的配置代码）：constpath=require('path');mod
X北辰北·2020-08-11 22:03

3、webpack4.0 babel-preset-env将ES6转ES5

1.这里利用的是bable来进行转化安装babel-loader@babel/core@babel/preset-envyarnaddbabel-loader@babel/core@babel/preset-env-D在webpack中配置如下：在module中的规则rules里面要使用babel-loader，如下module:{rules:[{test:/\.js$/,use:[{loader
YmwWow·2020-08-11 21:33

搭建webpack4.0项目（1）

1.新建项目test-webpack2.项目下，本地安装webpack、webpack-cliyarnaddwebpackwebpack-cli-D//-D表示当前是开发依赖，上线时不需要3.配置webpackwebpack可以进行0配置（0配置配置很弱）webpack是打包工具，将输出后的结果，打包成js模块（1）首先新建打包目录src，并在文件夹下新建index.js文件console.log
Sely_Lou·2020-08-11 20:36

webpack 安装和配置

webpack基础篇npm卸载包npmuninstall包名npmunistallwebpack-g-global全局表示哪都能用初始化项目yarninit-y||npminit-ywebpack安装webpack4.0
anji·2020-08-11 18:27

Webpack编译把css从页面分离出来

版本：webpack4.0以上版本主要webpack4.0以上已经不支持extract-text-webpack-plugin插件请使用cnpmimini-css-extract-plugin-D安装到
梦里小白龙·2020-08-11 13:58

webpack4.0从零搭建一个vue项目

开始之前先了解一下webpack的几个核心概念。entry：入口起点(entrypoint)指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。output：output属性告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist。loader：loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解Jav
codeXml·2020-08-11 13:57

初识webpack4.0

概念webpack本质是javaScript(以下简称js)应用的静态打包工具，基本过程是在内部构建一个依赖图(dependencygraph)，用于映射项目所需的每个模块，并生成对应的bundle。模式module.exports={/*默认是production,可根据环境自行判断*/mode:isProd?'production':'development',}入口入口用于指定webpack
小样_简书·2020-08-10 11:34

详谈vue

HTML页面里面直接写vue实例一个是通过脚手架搭建vue环境脚手架分两部分一个是包含webpack一个是不包含webpack不包含webpack是vue-cli3.0以后也是在说明webpack3.0或者webpack4.0
刘勇大三入门前端·2020-08-10 10:27
上一页 1 2 3 4 5 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他