WEBPACK4 第5页

基于webpack4制作项目开发的demo配置(含babel、less等常用开发插件)

现在的前端开发基本上都是基于vue或者react的开发，而且大部分都是基于别人已经写好的基础全家桶，已经配置好了webpack、less/sass、babel等等其他插件，但是某些时候需要自己更改webpack配置的话，总避免不了去查issue，有些时候呢，比较简单的页面，又不想用vue/react来写，但是需要用到webpack的打包(可以使用es6、自动打包等等很爽的特性)，在写这个demo的

imxiaochao·2023-08-18 09:21

使用 Vue 脚手架，为什么要学 webpack？

它们是Vue-cli2和Vue-cli3创建项目的两个命令，之所以两个命令不同，根本原因是Vue-cli2是基于webpack3，而vue-cli3是基于webpack4的。

前端人·2023-08-17 21:44

Webpack3.X升级到4.X多页面实战和构建优化

Webpack4.x出来也有一段时间了，网上已经有很多关于Webpack4.x原理和新特性的介绍，比如零配置等，这边就不重复了。

weixin_34161029·2023-08-15 02:10

从零搭建webpack4+react+typescript+eslint脚手架(二)

完善webpack打包配置有了webpack的基础配置，还不足以支持打生产环境能够使用的包，我们还需要增加一些配置。首先，每次打包前最好能把上一次生成的文件删除，这里可以用clean-webpack-plugin插件实现：$npmi-Dclean-webpack-plugin然后修改webpack基础配置：//webpack.base.jsconst{CleanWebpackPlugin}=req

天真即是正义·2023-08-14 14:12

Webpack(十七)：webpack4+vue+route+vuex项目构建

一：vue传值方式有哪些？在vue项目开发过程中，经常会使用组件来进行项目开发，那么在组件中会调用另一个组件来作为自己的子组件，那么我们如何进行给子组件进行传值呢？或者说，子组件如何给父组件传值呢？父子组件数据是如何通信的呢？因此vue常用的传值方式有如下几种：1.父传子2.子传父3.非父子传值父子组件传递数据可以看如下图所示总结是：父组件向子组件传递数据，可以通过prop属性向下传递数据，子组件

CodeMT·2023-08-12 22:58

从零搭建webpack4+react+typescript+eslint脚手架(三)

处理静态资源js的打包基本处理完了，还有图片、音频等静态资源需要处理。依然先装依赖：$npmi-Durl-loaderfile-loader$npmi-D@svgr/webpack#顺带支持一下导入svg图片增加webpack配置：//webpack.base.js{test:/\.svg$/,use:['@svgr/webpack']},{test:/\.(jpg|jpeg|bmp|png|we

天真即是正义·2023-08-12 16:41

webpack 笔记指南篇（一）

秀秀_2d78·2023-08-12 08:40

Webpack5 处理图片资源

文章目录处理图片资源1.配置2.添加图片资源3.使用图片资源4.运行指令5.输出资源情况6.对图片资源进行优化7.使用data-uri的优点和缺点处理图片资源过去在Webpack4时，我们处理图片资源通过

有趣的小良·2023-08-11 09:59

webpack4 devtool和source-map构建错误代码提示

1、配置在webpack.config.js中和entry同级设置devtool:'构建方式'外联:生成.map文件内联:将.map作为DataUrl嵌入,不生成.map文件cheap:不包含列的错误提示module:会将loader中的source-map也加进来source-map:外联,会生成.js.map文件,能提示错误代码信息和源代码位置,点击进入源代码inline-source-map

神奇大叔·2023-08-11 00:52

webpack4系列教程（九）：开发环境和生产环境

1.构建开发环境如果你一直跟随我前面的博文，那么你对webpack的基础知识已经有比较深刻的理解了。之前，我们一直执行着：npmrunbuild来打包编译输出我们的代码，本文我们来看看如何构建一个开发环境，来使我们的开发变得方便些。1.1webpack-dev-serverwebpack-dev-server是一个简单的小型的web服务器，并且能够实时重载，配置也很简单，首先安装：npminsta

前端小酱·2023-08-11 00:51

webpack4下import()模块按需加载,打包按需切割模块，减少包体积，加快首页请求速度

首页展示的时候只需要对应的js，并不需要全部的js模块，所以这里就可以用按需加载，这里webpack4官方文档提供了模块按需切割加载，配合es6的按需加载import()方法，可以做到减少首页包体积，加快首页的请求速度

_双眸·2023-08-10 13:12

[webpack] 基本配置 (一)

文章目录1.基本介绍2.功能介绍3.简单使用3.1文件目录和内容3.2下载依赖3.3启动webpack4.基本配置4.1五大核心概念4.2基本使用1.基本介绍Webpack是一个静态资源打包工具。

959y·2023-08-09 21:04

webpack 解析resolve(20)

获取全套webpack4.x教程，请访问瓦力博客resolve能设置模块如何被解析。webpack提供合理的默认值，但是还是可能会修改一些解析的细节。

瓦力博客·2023-08-09 14:57

webpack4分包方案

webpack4放弃了commonsChunkPlugin，使用更方便灵活智能的splitChunks来做分包的操作。

小雨小雨丶·2023-08-08 07:55

Webpack4 入门到带你打包一个简单单页应用项目

正文前先吐槽下,webpack对新手入门真的有点不友好，各个版本在配置上都有或多或少的差异，导致在对照各种教程学习的过程中免不了掉进各种坑里，所以写这篇文章旨在简单明了的解释说明webpack的各种常用配置，希望能让新人接触webpack时少走些弯路。一、搭建项目1.我们先新建一个项目project并用npm命令初始化项目（一路回车）npminit复制代码2.安装webpack与webpack-c

weixin_33958366·2023-08-06 22:16

webpack4学习笔记3-AST入门

AST(抽象语法树)，是一个非常基础而重要，缺又被大多数人忽略的知识点。webpack和lint等很多工具和库的核心都是通过AST来实现对代码的检查、分析等操作的。了解抽象语法树对于深入理解JavaScript有很大的帮助。以下内容参考了AST抽象语法树——最基础的javascript重点知识，99%的人根本不了解抽象语法树的用途代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提

fuheideMayuyu·2023-08-05 17:27

webpack shimming(17)

获取全套webpack4.x教程，请访问瓦力博客shimming简单翻译是垫片。

瓦力博客·2023-08-04 09:19

webpack dll(22)

获取全套webpack4.x教程，请访问瓦力博客DLL(DynamicLinkLibrary)文件为动态链接库文件,在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库

瓦力博客·2023-08-03 05:02

webpack4.0入门实践

npminit-y创建package.json文件npminstall-Dwebpackwebpack-cli命令行打包:node_modules/.bin/webpack需要打包的文件地址--output目标文件地址eq：node_modules/.bin/webpackindex.js--outputdist/bundle.js文件配置：eq：一个手动创建的.js文件依赖jquery.js进行

seepDown·2023-08-01 18:42

webpack 源码解析1

源码解析1打包文件解析安装webpack插件yarnaddwebpackwebpack-cli-D新建src/index.jsdata.js,写点写点内容constdata="webpack4"exportdefaultdata

席坤·2023-07-31 08:21

webpack4.0使用时提示npm install webpack-cli -D的问题

最近在看关于vue的书，在使用webpack构建项目时，遇到如下问题：>[email protected]/Users/********/WebstormProjects/webstormProject>webpack-dev-server--open--configwebpack.config.jsTheCLImovedintoaseparatepackage:webpack-cl

Jerry379·2023-07-31 02:08

带你入门Webpack及它能干什么？

本文讲解是Webpack4.x，注意版本。为什么要使用Webpack在之前我们都是用传统的方式去开发一个系统，html、css、js，就这些。开发完之后直接给后台人员去部署，当然这没什么问题。

牛大嘴·2023-07-29 14:07

2020-03-04

如何配置webpack4打包工具安装前先npm初始化npminit-y//初始化npmaddwebpackwebpack-cli-D//安装本地constpath=require('path')//相对路径变绝对路径

風吹過的夏天·2023-07-29 00:42

webpack4 - 3.Mode内置优化

webpack4以上版本提供了mode配置选项，用来选择使用相应的内置优化。mode选项有3个可选值：production（默认）、development、none。

yuanzicheng·2023-07-28 16:46

为什么我不推荐你使用vue-cli创建脚手架？

最近在知乎看到一个问题，原问题如下：“很奇怪，为什么现在能找到自己手动创建vue脚手架的文章非常少，而且大家似乎对webpack4的热情并不高，对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜

闰土大叔·2023-07-26 23:28

2. 重新出发-learn webpack

重新出发-learnwebpackgithub上搜索webpacklearn或webpackawesome基于Webpack4渐进式教程为基础这个非常适合初学者，24个demo，渐进式文档学习，https

天上有木月0·2023-07-25 15:19

webpack4的迁移

感觉是突然之间，webpack4的消息就满天飞了，听说打包速度提高了很多，还有最大的噱头是实现了零配置，leader有一天就吩咐我说，有时间把我们的项目也升个级呗。好嘞。

__橘生淮南·2023-07-24 05:19

【webpack4 系列之一】

第一：先说开发环境，使用vscode,github:https://github.com/hyyfrank/webpack4.git概念啥的很多地方都讲过了，这里水一下，请看文档：https://www.webpackjs.com

技术侠·2023-07-23 19:00

vue结合webpack4使用vuex入门学习2

将上一个的练习代码拷贝一份，在这基础上继续学习mutations中的方法名建议用一个变量来代替，这样可以减少发生错误的概率image在src下新建一个名为mutations-type.js的文件来放定义mutations方法名的变量，然后再在相应的文件引入mutations-type.jsexportconstincrement='increment'exportconstremove='remo

温酒居士·2023-07-23 00:56

【webpack4 系列之三】

基础entry:配置模块的入口webpack寻找文件的时候会以context为基础，context默认的是执行webpack的路径，比如我们项目就是默认根目录，当然也可以采取命令行去配置，比如webpack--contextmodule.exports={context:path.resolve(__dirnaame,'app')}我们现在看到的entry里的路径也是相对于这个context的路径

技术侠·2023-07-22 17:20

Vue2/3 config里配置publicPath/base之后proxy的配置修改

记录一下module.exports={publicPath:'/myProject',devServer:{disableHostCheck:true,//webpack4.0开启热更新proxy:{

GIS小虫·2023-07-19 22:37

学习webpack4的坑

安装清理/dist文件夹的插件clean-webpack-plugin官网没有更新教程直接按照官方教程会报错：TypeError:CleanWebpackPluginisnotaconstructor//官方错误写法：constCleanWebpackPlugin=require('clean-webpack-plugin');//更新后正确写法：const{CleanWebpackPlugin}

李大嘴JimmyLee·2023-07-15 18:19

npm run dev报错Error: error:0308010C:digital envelope routines::unsupported

的时候报错了Error:error:0308010C:digitalenveloperoutines::unsupported解决分析发现通常是安装了Node.jsv17及以上比较新的版本，然后使用了webpack4

独书先生·2023-07-15 10:37

简谈 webpack4之 splitChunks 分包打包

就一直处理开发跟处理bug上，页面的性能呢平时也有关注并且也有做一些优化，但是呢，我们都知道，当我们系统功能越来越多，使用的第三方插件越来越多的时候，打包速度是会解决，但是打包后，服务器访问是个硬伤，因为webpack4

Jim_d008·2023-07-14 20:02

webpack4知识点—babel

解析es6:使用babel-loader先下载依赖包npmi@babel/core@babel/preset-envbabel-loader-Dmodule.exports={module:{rules:[{test/\.js$/,//————>指定匹配规则use:'babel-loader'//use指定使用loader名称}]}}babel的配置文件是.babelrc{"presets":[/

躺在家里干活·2023-07-14 19:58

liuniansilence·2023-07-14 18:27

Webpack4+React16配置CSS、Sass并导入Antd

StyleDemoWebpack4.x+Babel7.x+React16.x环境下配置CSS、Sass导入AntDesignUI库Webpack4.x+Babel7.x+React16.x平台搭建请点击观看上一篇文章新建项目按照上一篇文章的方法新建一个新项目

焰火阑珊·2023-07-13 23:07

webpack js代码分割(11)

获取全套webpack4.x教程，请访问瓦力博客代码分割是一个概念，和webpack无关，在没有webpack的时候，代码分割这个概念也存在。

瓦力博客·2023-06-24 07:43

辛辛苦苦学会的 webpack dll 配置，可能已经过时了

前段时间写了一篇详解webpack4中易混淆知识点的文章，没想到收获了近600个赞，在这里对各位老铁抱拳感谢。

·2023-06-23 20:10

ES6 + stylus + zepto.js + webpack4.x 使用示例

ES6+stylus+zepto.js+webpack4.x项目示例在线预览(chrome浏览器下F12切换到手机模式)源码地址image.png项目步骤1.yarnaddswiperzepto2.起先是想用

漫漫江雪·2023-06-23 08:07

webpack入门笔记

此外用基于webpack4.17.1写了一个简单的demo，如果遇到啥问题，可以参考，之后应该会逐步来完善这个demo，如果有啥通用的想实现的功能，也可以在里面提issue。

AizawaSayo·2023-06-21 08:52

vue2、vue-cli4以及vue3、vite打包去掉console.log

vue2+vue-cli4webpack4会自带terser-webpack-plugin插件。

jiangbinwangyi·2023-06-20 02:21

webpack打包单个js文件

使用npminit初始化mkdirwebpack-demo&&cdwebpack-demonpminit初始化完成后，目录下会生成package.json按照webpack4以上还需要安装webpack-clinpminstall

星陈~·2023-06-19 21:26

【WebPack】前端工程化

文章目录前端工程化一、前端工程化概念二、前端工程化优点三、前端工程化解决方案四、webpack的基本使用4.1什么是webpack4.2创建列表隔行变色项目4.3安装webpack4.4配置webpack4.5

骑着蜗牛ひ追导弹'·2023-06-19 02:26

webpack4以上版本

1.mode属性：webpack需要设置mode属性用来指明是开发环境还是生产环境，可以是development或production，例如:webpack--modedevelopmentwebpack针对开发模式提供的特性:浏览器调试工具、注释、开发阶段的详细错误日志和提示、快速和优化的增量构建机制webpack针对生产模式提供的特性:开启所有的优化代码、更小的bundle大小、去除掉只在开发

苦海123·2023-06-18 23:19

Sixth vue-cli初步

39.png2.安装vue-cli使用npm（需要安装node环境）全局安装webpack，启动命令行，输入如下命令：npminstall-gwebpack安装完成后输入webpack-v1.png从webpack4

老婆日向雏田·2023-06-17 13:51

webpack 4.x

1.安装webpack是基于node所以首先要安装node环境和npm安装webpack4需要安装webpack和webpack-cli全局安装:npminstallwebpack-gnpminstallwebpack-cli-g

Pretend_ebb0·2023-06-16 17:54

对vue3新特性Tree-Shaking进行详细介绍

为了启用Tree-Shaking特性，确保你的webpack配置满足以下要求：使用webpack4及以上版本，因为Tree-Shaking功能更强大且更高效。确保在生产环境中设

猿耳盗铃·2023-06-15 16:35

升级webpack4

一、升级babel7网上已经有很多不错升级babel7的文章了，这里写下主要步骤1、一键升级npxbabel-upgrade--write运行命令行后发现package.json、.babelrc都自动发生了变化，升级完成！是的，不用怀疑！如果遇到报错可以百度下报错内容进行对应修改，我是没有遇到错误，直接升级成功，幸福来得太突然了2、polyfill//.babelrc...."presets":

Mr老朝·2023-06-14 09:09

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

移动端项目模板基于vue-cli4.0+webpack4+vantui+sass+rem适配方案+axios封装，构建手机端模板脚手架启动项目gitclonehttps://github.com/teach-tian

行动很重要冲冲冲·2023-06-13 20:55

推荐频道

WEBPACK4