每周三集前端免费视频
每年帮助超100万前端爱好者学习

Webpack3.X版 成神之路 全网首发 (共24集)

第00节:文章和问答说明

 本文首发:jspang.com,其他网站禁止转载

本文讲解的是Webpack3.0+的知识,努力做到全网最好的webpack3.0教程。文章通过一个半月的时间创作完成,共二十四小节,将近四万字,并根据文字教程录制了对应的视频教程(48元24节,350分钟视频讲解,保证你可以学会),当然你不需要看视频教程也能很快的学会webpack最新版的知识。

如果你已经购买了视频教程,可以在视频的最后一节看到如何加入讨论微信群,技术胖会每周上线解答你学习中的困难。

 

 

第01节:认识WebPack的作用

如果您已经在前端行业中,WebPack在业界的流行程度自然必备多说,成为了前端小白升级为前端工程师的必备技能。如果你对webpack还不够熟悉,那你在前端前进的脚步会受到阻碍,但是你幸运的搜索到了这篇文章。(但是文章可能不会讲解如何从1.0、2.0版本升级3.0版本的知识,而是直接讲解3.0的知识,所以你可能需要有一个空杯心态来学习)

在学习过程中,我希望你能每节看完文章后,都可以自己亲手做一做,如果你不作就不会出现错误,不出现错误,你就没办法增长经验,那你就什么都学不会。相信我,慢慢来,比较快

前端为什么需要WebPack?

现在的前端网页功能丰富,特别是SPA(single page web application 单页应用)技术流行后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决SCSS,Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。

现在最流行的三个前端框架,可以说和webpack已经紧密相连,框架官方都推出了和自身框架依赖的webpack构建工具。

  • React.js+WebPack
  • Vue.js+WebPack
  • AngluarJS+WebPack

从此可以看出,无论你前端走那条线,你都要有很强的Webpack知识,才能祝你成为这个框架领域的大牛。

什么是WebPack?

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。

这段话有三个重点:

  • 打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
  • 转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
  • 优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任。

我们可以从下图再次了解一下WebPack的作用:

安装WebPack

看了这么久,一定着急动手作一作了。要使用WebPack就要先进行安装,就和你要使用微信,必须在手机上下载微信的APP一样,但是不同的是WebPack的安装,采用的是命令行npm形式的安装。

这里我以windows系统为例,给大家做截图示范。苹果安装稍有不同,不过大同小异(如果有问题,可以直接进群交流,进群方法看文章开头)。

具体安装方法:

用win+R打开运行对话框,输入cmd进入命令行模式。然后找到你想开始项目的地方,输入下方代码:

第一句是建立一个文件夹,第二句是进入这个文件夹。这个文件夹就是我们的项目文件目录了,文件夹建立好后,可以通过下面命令安装WebPack。

需要注意的是,你在执行下一步时必须安装node,可以通过 node -v来查看node安装情况和版本,如果没有安装,要先安装node才可以继续进行。

如果你这时安装失败了(出现了报错信息),一般有三种可能:

  • 检查你node的版本号,如果版本号过低,升级为最新版本。
  • 网络问题,可以考虑使用cnpm来安装(这个是淘宝实时更新的镜像),具体可以登录cnpm的官方网站学习http://npm.taobao.org/
  • 权限问题,在Liux、Mac安装是需要权限,如果你是Windows系统,主要要使用以管理员方式安装。

注意:全局安装是可以的,但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。

对项目目录进行安装

全局安装完成后,我们还要进行一个项目目录的安装。在用npm安装前,我们先要进行一下初始化,初始化的主要目的是生成package.json文件(这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等,如果你对此文件还不了解,可以看看node 的相关知识)。

在命令行输入:

输入完成后,npm终端会问你关于项目的名称,描述……一堆内容,如果你不考虑发布到npm上,这些内容都不重要,而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。

输入下面命令进行项目目录的安装:

这里的参数–save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用。

开发环境and生产环境:

  • 开发环境:在开发时需要的环境,这里指在开发时需要依赖的包。
  • 生产环境:程序开发完成,开始运行后的环境,这里指要使项目运行,所需要的依赖包。

查看webpack版本

你安装好后,会想知道你现在webpack版本,在工作中交流时,也会经常问到你,你的打包版本是什么?这时候我们可以用下面的命令进行查看。

可以看到我现在的版本的3.6.0版本,这是目前(2017/9/16)最新的版本了。出现了版本号,也说明你的webpack安装成功了。

看到这里,我们第一节的内容就完成了,我建议你停一下,把webpack安装到你的电脑上,再进行向下观看,如果在安装时遇到什么问题,可以在下方的留言区给我留言。

第02节:让你快速上手一个Demo

上节课已经安装好了Webpack到电脑上,这节课就开始一个简单的Demo,让你快速上手和熟悉Webpack的基本用法,学习并作完这节课内容你就可以和朋友小吹一下说:我也会Webpack。

建立基本项目结构

首先进入上节课我们建立的webpack_demo目录(每个人建立的位置不同,可能建立在了D盘或者E盘)。进入后在根目录建立两个文件夹,分别是src文件夹dist文件夹

  • src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。
  • dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。

你可以理解成src是源码文件,dist是我们编译打包好的文件;一个用于开发环境,一个用于生产环境

编写程序文件:

文件夹建立好后,我们在dist文件下手动建立一个index.html文件,并写入下面的代码。

/dist/index.html

这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有,这是用webpack执行打包命令后生产的文件。我们的index.html写好后,接下来在src文件夹下建立entery.js的文件,用于编写我们的JavaScript代码,也是我们的入口文件。

src/entery.js

这个文件的代码很简单,就是在<div id=”title”></div>标签里写入Hello Webpack这句话。

第一次Webpack打包

Webpack其实是可以在终端(命令行)中使用的,基本使用方法如下:

  • {entery file}:入口文件的路径,本文中就是src/entery.js的路径;
  • {destination for bundled file}:填写打包后存放的路径。
  • 注意:在命令行中是不需要写{ }的。

在我写的例子中,终端执行命令如下:

执行的结果如下图:

命令执行成功后,会在dist目录下出现bundle.js文件,这时我们就可以在浏览器中预览结果了,网页中显示出了Hello Webpack的信息。

总结:

从这个Demo中你会了解到webpack的基本用法和使用过程,并会了命令行打包的方法。在这节文章的最后,我还是要强调,你一定要把本节内容在自己的电脑上敲一遍,这样你才能深入了解。

第03节:配置文件:入口和出口

首先要说明的是:学习这节课前,务必作完上节课的代码,否则你会学的一脸懵逼。

上节课通过一个小Demo我们对Webpack有了初步了解,但是上节课的终端打包方案,在实际开发中并不使用,而是使用Webpack的配置文件的方式进行设置。这节课我们就学一下配置文件的大体结构和入口出口文件的配置。

配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件,这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置,先看下面的代码(webpack.config.js的基本结构),这是一个没有内容的标准webpack配置模版。

webpack.config.js

  • entry:配置入口文件的地址,可以是单一入口,也可以是多入口。
  • output:配置出口文件的地址,在webpack2.X版本后,支持多出口配置。
  • module:配置模块,主要是解析CSS和图片转换压缩等功能。
  • plugins:配置插件,根据你的需要配置不同功能的插件。
  • devServer:配置开发服务功能,后期我们会详细讲解。

entry选项(入口配置)

这个选项就是配置我们要压缩的文件一般是JavaScript文件(当然也可以是CSS…..)。按照上节课的代码(如果你上节课的代码还没作,那你可以返回去重新作一下),这里要填写的是src目录下的entery.js文件。

wepback.config.js中的entry选项

output选项(出口配置)

出口配置是用来告诉webpack最后打包文件的地址和文件名称的。按照上节课的操作,应该打包到dist目录下。在编写出口文件时,我们需要用到一点Node的知识,如果你还不会Node也没有 关系,就简单的两句代码,你记住就可以了(在视频中我还有详细的讲解)。

如果你只这样写,是会报错的:找不到path这个东西。所以我们要在webpack.config.js的头部引入path,代码如下:

这里我们使用了const,这是ES6的语法,如果你对ES6还不熟悉,也可以看技术胖ES6的课程哦(http://jspang.com/2017/06/03/es6/)。

其实path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。如果你还是不理解,我会在视频中给你进行演示。

filename:是打包后的文件名称,这里我们起名为bundle.js。

现在webpack.config.js的代码:

这个代码写完后,可以在终端中直接输入webpack就会进行打包。

在实际开发中我们都是通过配置文件进行打包的,所以必须要掌握好。

多入口、多出口配置

Webpack在版本1的时候很难设置多出口文件,但是在2版本开始就变的很方便了。直接看多入口和多出口的文件配置,然后可以和单一出口对比一下,你会发现这种设置非常简单(只需改动两点配置就可以)。

可以看到代码的第7和14行进行了增加和修改,在入口文件配置中,增加了一个entry2.js的入口文件(这个文件你需要自己手动建立),这时候要打包的就有了两个入口文件。在代码14行我们把原来的bundle.js修改成了[name].js。

[name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件。

总结:

这节课的内容是需要仔细消化的,不求你记住,但是要练习,因为你无论配置任何项目的Webpack都要作这些操作。你可以把本文当作一个字典,在需要的时候进行查询。

第04节:配置文件: 服务和热更新

作为一个前端工程师,最大的编程需求之一就是所见即所得的工具,也就是常说的热更新。现在一般有点规模的公司都为前端工程师准备了双屏显示器,其目的就是一个屏幕编写代码,一个屏幕实时显示页面效果。这节课就学习用webpack3.6版本实现热更新效果。

从这节课开始视频需要购买才可以观看。教程一共30集左右,学完后完全可以达到独立构建中大型项目水平,从此webpack不在是你职业发展的瓶颈了。

购买地址https://chungold.com

设置webpack-dev-server

要执行webpack-dev-server是要先用npm install webpack-dev-server –save-dev 来进行下载的。下载好后,需要配置一下devServer。最简单的devServer配置项只有四个。先看一下代码,然后我再作解释。

/webpack.config.js

  • contentBase:配置服务器基本运行路径,用于找到程序打包地址。
  • host:服务运行地址,建议使用本机IP,这里为了讲解方便,所以用localhost。
  • compress:服务器端压缩选型,一般设置为开启,如果你对服务器压缩感兴趣,可以自行学习。
  • port:服务运行端口,建议不使用80,很容易被占用,这里使用了1717.

注意:这里需要使用npm 来进行安装webpack-dev-server了, 命令如下:

这是本地安装,所以使用了–save-dev。

 

配置好后,你可以试着在终端中输入webpack-dev-server,如果可以执行成功,但是往往提示下面的错误(或者是无法找到内部或外部命令)。

出现下面的错误不用慌张,我们只要在package.json里配置一下scripts选项就可以执行了。

/package.json

配置好保存后,在终端里输入 npm  run  server  打开服务器。然后在浏览器地址栏输入http://localhost:1717就可以看到结果了。

支持热更新

在npm run server  启动后,它是有一种监控机制的(也叫watch)。它可以监控到我们修改源码,并立即在浏览器里给我们更新。

注意:这里只是我们的webpack3.6版本支持,在3.5版本时要支持热更新还需要一些其他的操作。因为已经有了成熟的3.6版本,我就不再介绍低版本的操作方法。还有一种情况。如果你都设置好了,但是不进行热更新,可能是你系统的问题,在Linux和Ma上支持良好,在Windows上有时会出现问题。

如果你在操作时,在Windows上出现问题了,请在文章下方给我留言。

第05节:模块:CSS文件打包

Webpack在生产环境中有一个重要的作用就是减少http的请求数,就是把多个文件打包到一个js里,这样请求数就可以减少好多。这节课我们就学习一个重要的知识,把我们的CSS文件打包。在学习CSS打包之前,需要先对webpack.config.js里的Loaders配置项进行了解。

购买地址https://chungold.com

Loaders

Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理。

简单的举几个Loaders使用例子:

  • 可以把SASS文件的写法转换成CSS,而不在使用其他转换工具。
  • 可以把ES6或者ES7的代码,转换成大多浏览器兼容的JS代码。
  • 可以把React中的JSX转换成JavaScript代码。

注意:所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置。下面我们对Loaders的配置型简单梳理一下。

  • test:用于匹配处理文件的扩展名的表达式,这个选项是必须进行配置的;
  • use:loader名称,就是你要使用模块的名称,这个选项也必须进行配置,否则报错;
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
  • query:为loaders提供额外的设置选项(可选)。

明白了Loader是什么后,就开始这节课的正题,如何打包CSS文件。

打包CSS文件:

建立index.css文件

要打包CSS你必须先要有个CSS文件,在/src目录下,我们建立一个css文件夹,在文件夹里建立index.css文件。代码内容如下。

./src/css/index.css

CSS文件建立好后,需要引入到入口文件中,才可以打包到,这里我们引入到entry.js中。

/src/entery.js中在首行加入代码:

CSS和引入做好后,我们就需要使用loader来解析CSS文件了,这里我们需要两个解析用的loader,分别是style-loader和css-loader。

style-loader:

它是用来处理css文件中的url()等,npm中的网址:https://www.npmjs.com/package/style-loader

用npm install 进行项目安装:

css-loader:

它是用来将css插入到页面的style标签。npm中的网址:https://www.npmjs.com/package/css-loader

用npm install 进行项目安装:

两个loader都下载安装好后,我们就可以配置我们loaders了。

loaders配置:

修改webpack.config.js中module属性中的配置代码如下:

webpack.config.js

这个文件的详细讲解,我们在上面已经提及,如果你还是无法理解可以观看视频。

总结:

敲黑板,这节课的内容非常重要,上面的配置过程最好作两遍以上,完全了解后,再进行下节课的学习。loader的使用也决定着你webpack水平的高低。所以一定要重视和练习。

第06节:插件配置:配置JS压缩

通过五节课的学习,我相信小伙伴已经对Webpack有所入门。这节课让我们初步了解插件(plugins[ ])的用法。在学习新知识之前,我先回答一个小伙伴提的问题,他的问题就是:“我看到别人写的CSS打包配置文件和你写的不一样,是不是有其他的写法?”

视频教程购买地址https://chungold.com

loader的三种写法:

上节课学习了如何把CSS文件进行打包到JS当中去,有小伙伴就提问,我看到别人的CSS打包的写法和你的写法不太一样,是不是他们写错了,loader还有几种写法,这里我们就看两种另外的写法。

第一种写法:直接用use。

第二种写法:把use换成loader。

第三种写法:用use+loader的写法:

由此看出,webpack的扩展和灵活性是非常强的,你习惯于那种写法都可以。最重要的是,你看见别人项目的其他写法也不要慌张,自己去试一试,有可能就可以Get到新知识。

压缩JS代码:

现在你写的JS代码,在上线之前,都是需要进行压缩的,在没有webpack和gulp这些工具前,你可能需要找一个压缩软件或者在线进行压缩,在Webpack中可以很轻松的实现JS代码的压缩,它是通过插件的方式实现的,这里我们就先来引入一个uglifyjs-webpack-plugin(JS压缩插件,简称uglify)。

注意:虽然uglifyjs是插件,但是webpack版本里默认已经集成,不需要再次安装。

引入:

我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件

引入后在plugins配置里new一个 uglify对象就可以了,代码如下。

这时候在终端中使用webpack进行打包,你会发现JS代码已经被压缩了。如果你用的VSCode的话,可以按Alt+Z让他文件自动换行,查看效果。

贴出通过6节课学习,现在webpack.config.js文件中的所有代码,这样大家可以对照学习。

 

第07节:插件配置:HTML文件的发布

有经验的小伙伴其实一眼就可以看出,现在我们的项目结构是有问题的,我们把index.html直接放到了dist文件夹下,这肯定是不正确的,应该放到我们src目录下。但是前期我们为了循序渐进的学习,所以把index.html放到了dist目录下。这节课我们就学习如何把html文件打包到我们的生产路径下。

视频教程购买地址https://chungold.com

devServer和JS压缩的冲突

上节课学习了JS压缩,在视频中我使用了webpack进行打包,而没有使用npm run server 进行预览,也就是说没有启用devServer里的配置。那有些小伙伴在学习完视频后,在终端中输入了npm run server进行了预览,发现终端中报错了。

要弄明白这个问题,我们先要弄清楚什么是开发环境,什么是生产环境。开发环境中是基本不会对js进行压缩的,在开发预览时我们需要明确的报错行数和错误信息,所以完全没有必要压缩JavasScript代码。而生产环境中才会压缩JS代码,用于加快程序的工作效率。devServer用于开发环境,而压缩JS用于生产环境,在开发环境中作生产环境的事情所以Webpack设置了冲突报错

在实际开发中,webpack配置文件是分开的,开发环境一个文件,生产环境一个文件。所以在讲课之前我并没有发现这个问题,感谢小伙伴提出的问题。如果你在学习过程中有任何疑问,欢迎在文章下方留言

打包HTML文件

我们先把dist中的html文件剪切到src目录中,并去掉我们的JS引入代码(webpack会自动为我们引入JS),因为这才是我们真实工作的目录文件结构。

然后我们配置webpack.config.js文件,先引入我们的html-webpack-plugin插件。

引入后使用npm进行安装包。

最后在webpack.config.js里的plugins里进行插件配置,配置代码如下。

  • minify:是对html文件进行压缩,removeAttrubuteQuotes是却掉属性的双引号。
  • hash:为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
  • template:是要打包的html模版路径和文件名称。

上边的都配置完成后,我们就可以在终端中使用webpack,进行打包。你会看到index.html文件已经被打包到我们的dist目录下了,并且自动为我们引入了路口的JS文件。

总结:

html文件的打包可以有效的区分开发目录和生产目录,在webpack的配置中也要搞清楚哪些配置用于生产环境,哪些配置用于开发环境,避免两种环境的配置冲突。

第08节:图片迈坑:CSS中的图片处理

在学习Webapck过程中你可能遇到的第一个坑就是CSS中的图片处理。很多webpack新手都在图片的坑中无法自拔(有的小伙伴在开发环境中是可以找到图片的,但是一打包后就找不到图片了,有的小伙伴是不知道如何正确引入html或者css中的图片,导致程序出错),我们将用三节课时间搞彻底走出webpack图片的坑。

视频教程购买地址https://chungold.com

图片写入CSS

你可以先在网上找一个图片,我这里就自恋的使用了我的头像,如果你需要下载,也可以下载(当然你可以完全自己找一个自己喜欢的)。

找到图片后在src目录下新建一个images文件夹,把图片放入images文件夹。

index.html文件中增加一个放置div的标签(需要注意的是这里修改的是src下的index.html文件,不是dist下的,这点新手很容易弄混,要格外注意),代码如下。

编写css文件,把你用的图片作为背景显示。

编写完成后,我们可以试着用webpack去打包一下。你会发现终端中是报错的,具体错误可以看下图。

file-loader、url-loader

上面的错误是由于缺少loader的解析,对loader其实我们并不陌生,因为前边已经学习了CSS打包的loader。我们先安装两个解析图片用的loader。

安装file-loader和url-loader

安装好后我们需要对两个loader进行基本的了解,学习尽量做到知其然知其所以然。

file-loader:解决引用路径的问题,拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。

url-loader:如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。

配置url-loader

我们安装好后,就可以使用这个loader了,记得在loader使用时不需要用require引入,在plugins才需要使用require引入。

webpack.config.js文件

  • test:/\.(png|jpg|gif)/是匹配图片文件后缀名称。
  • use:是指定使用的loader和loader的配置参数。
  • limit:是把小于500000B的文件打成Base64的格式,写入JS。

写好后就可以使用webpack进行打包了,这回你会发现打包很顺利的完成了。具体的Base64的格式,你可以查看视频中的样子。

为什么只使用了url-loader

有的小伙伴会发现我们并没有在webpack.config.js中使用file-loader,但是依然打包成功了。我们需要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢?简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。通过上面的介绍,我们可以看到,url-loader工作分两种情况:

1.文件大小小于limit参数,url-loader将会把文件转为DataURL(Base64格式);

2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。

也就是说,其实我们只安装一个url-loader就可以了。但是为了以后的操作方便,我们这里就顺便安装上file-loader。

第09节:图片迈坑:CSS分离与图片路径处理

通过上节课的学习已经能把小图片打包成Base64格式,也对webpack对图片的打包有个基本了解。这节课主要学习两个知识:第一个是把CSS从JavasScript代码中分离出来,第二个是如何处理分离出来后CSS中的图片路径不对问题。

视频教程购买地址https://chungold.com

CSS分离:extract-text-webpack-plugin

有些简单的交互页面中,你的JavasScript页面代码会非常少,而大部分代码都在CSS中,这时候项目组长会要求把CSS单独提取出来,方便以后更改。遇到这个需求你不要惊慌,已经有大神为我们准备好了对象的插件(plugin)。

extract-text-webpack-plugin

这个插件就可以完美的解决我们提取CSS的需求,但是webpack官方其实并不建议这样作,他们认为CSS就应该打包到JavasScript当中以减少http的请求数。但现实中的需求往往不是我们前端能控制的,有些需求是我们不能控制的,分离CSS就是这样一个既合理由不合理的需求。

 

安装:录制课程时的版本是3.0.0版本,直接使用npm install 就可以安装。

引入:安装完成后,需要先用require引入。

设置Plugins:引入成功后需要在plugins属性中进行配置。这里只要new一下这个对象就可以了。

这里的/css/index.css是分离后的路径位置。这部配置完成后,包装代码:还要修改原来我们的style-loader和css-loader。

修改代码如下。

作完上边这四部后,就可以使用webpack进行打包了。

图片路径问题:

利用extract-text-webpack-plugin插件很轻松的就把CSS文件分离了出来,但是CSS路径并不正确,很多小伙伴就在这里搞个几天还是没有头绪,网上也给出了很多的解决方案,我觉的最好的解决方案是使用publicPath解决,我也一直在用。

publicPath:是在webpack.config.js文件的output选项中,主要作用就是处理静态文件路径的。

在处理前,我们在webpack.config.js 上方声明一个对象,叫website。

注意,这里的IP和端口,是你本机的ip或者是你devServer配置的IP和端口。

然后在output选项中引用这个对象的publicPath属性。

配置完成后,你再使用webpack命令进行打包,你会发现原来的相对路径改为了绝对路径,这样来讲速度更快。

总结:这节课我们实现了CSS的分离,并在分离后处理了图片路径不对的问题。处理路径的方法一定要充分理解,因为这在工作中经常用到。

 

第10节:图片迈坑:处理HTML中的图片

在webpack中是不喜欢你使用标签<img>来引入图片的,但是我们作前端的人特别热衷于这种写法,国人也为此开发了一个:html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题。因为是国人开发的,文档都是中文,所以学习起来还是比较简单的。所以在学习新课之前我们先解决两个小伙伴的问题。

视频教程购买地址https://chungold.com

只有项目安装webpack,如何打包?

有的小伙伴在学习视频时,并没有全局安装webpack,而是使用了项目安装。首先我要说的是,这种做法是webpack推崇的,webpack并不鼓励全局安装webpack。但是小伙伴看我视频中直接在终端用webpack进行打包项目,他使用时会出现不是内部命令或者外部命令。

这时候需要配置package.json里的scripts选项,我们以前的课程已经学习了配置 webpack-dev-server命令,在这个命令下面我们再加一个build命令进行打包项目使用。

配置完成后,可以在控制台输入npm run build 进行打包。

如何把图片放到指定的文件夹下

前边两节课程,打包后的图片并没有放到images文件夹下,要放到images文件夹下,其实只需要配置我们的url-loader选项就可以了。

这回你再执行打包就可以把图片打包到images文件夹里了。

html-withimg-loader

html-withimg-loader就是我们今天的重点了,这个插件并不是很火,也是我个人喜欢的一个小loader。解决的问题就是在hmtl文件中引入<img>标签的问题。

安装:

配置loader

webpack.config.js

然后在终端中可以进行打包了。你会发现images被很好的打包了。并且路径也完全正确。

总结:我们通过三节课的时间讲了webpack图片中的坑,这些坑在我初学webpack初期给我带来了不少的麻烦,我也算是倾囊相教了,希望小伙伴们有所收获。在你工作中遇到图片的问题,也可以返回文章里进行对比查找问题。

第11节:CSS进阶:Less文件的打包和分离

第05节中已经讲过CSS文件的打包,后来又讲了CSS分离。这节我们讲解一下Less文件如何打包和分离。Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。也就是说Less给我们枯燥单一的样式文件加入了编程机制,这让我们这些前端程序员很受用,所以在工作中大部分程序员都使用了Leess开发。

视频教程购买地址https://chungold.com

打包Less文件

安装:

要使用Less,我们要首先安装Less的服务,当然也是用npm来进行安装。

还需要安装Less-loader用来打包使用。

写loader配置:

安装好后,需要在webpack.config.js里编写loader配置,当然要想正确解析成CSS,还是需要style-loader和css-loader的帮助,但是这两个loader前边已经讲过了,所以在这里就不重复了,如果你还对这两个loader不熟悉,那自行回去补前边的第五节吧。

webpack.config.js

编写一个less文件

现在webpack的配置好了,我们还需要编写一个less文件,这里明文为black.less.里边只做一件是就是把一个层的背景设置成黑色。

black.less

这里#gogo是层的ID名称。@base是我们设置的变量名称。

引入到我们entery.js文件中

这样我们就可以把less文件进行打包了。我们可以使用webpack命令打包试一试。

把Lees文件分离。

我们之前讲了extract-text-webpack-plugin这个插件,想把Less文件分离出来的方法跟这个几乎一样,之前的我们在第09节中讲过,这里我们就只讲less的loader配置方法。(此处建议收看视频

配置好后,你会发现less被分离到了index.css文件里。

总结:Less是非常好的CSS扩展,但是Less得转换稍显麻烦,好的是webpack为我们提供了简单轻松的转换方法。希望小伙伴可以学好这一课,在你们的工作中都开始使用Less编写你们css代码。

第12节:CSS进阶:SASS文件的打包和分离

上节课学习了Less的打包和分离,群里使用SASS的小伙伴马上就不干了,要求讲一下SASS的配置,其实你会了Less得配置,SASS的配置可以很轻松的学会,为了公平公正,那我们就用一节课的时间学一下SASS的配置的。

视频教程购买地址https://chungold.com

安装SASS打包的loader

这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader

node-sass:因为sass-loader依赖于node-sass,所以需要先安装node-sass

sass-loader:

注意:在用npm安装时,这个loader很容易安装失败,最好使用cnpm来进行安装。如果你安装一直报错,最好是把node_modules文件夹删除后,再重新安装。

编写loader配置

需要注意的是loader的加载要有先后顺序。

Sass文件的编写

写好loader配置后,就可以愉快的编写sass文件拉,但是不要忘记把sass文件引入到entery.js中。

都完成后,你就可以启动我们npm run server 来查看效果了。

把SASS文件分离。

这节课算是专门为sass使用者录制的吧,其实整体过程和less的使用差不多,希望你能在工作中开始使用sass,并写出漂亮的css代码。

第13节:CSS进阶:自动处理CSS3属性前缀

CSS3已经成了前端的必会技能,但是你一定为那些属性需要加前缀,那些属性不需要加前缀而头疼。以前我在课程中讲过一个can i use的网站,可以查询这些,但是每次都查实在是编码效率太低了。这节课我们就学习一下如何通过postcss-loader给css3属性自动添加前缀。

视频教程购买地址https://chungold.com

什么是属性前缀

我们先来看一下代码:

为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。

PostCSS

PostCSS是一个CSS的处理平台,它可以帮助你的CSS实现更多的功能,但是今天我们就通过其中的一个加前缀的功能,初步了解一下PostCSS。

安装

需要安装两个包postcss-loader 和autoprefixer(自动添加前缀的插件)

postcss.config.js

postCSS推荐在项目根目录(和webpack.config.js同级),建立一个postcss.config.js文件。

postcss.config.js

这就是对postCSS一个简单的配置,引入了autoprefixer插件。让postCSS拥有添加前缀的能力,它会根据 can i use 来增加相应的css3属性前缀。

编写loader

对postcss.config.js配置完成后,我们还需要编写我们的loader配置。

提取CSS

配置提取CSS的loader配置.

总结:postcss还有很多功能,我希望小伙伴学会自学。这里给出postcss-loader的github地址:https://github.com/postcss/postcss-loader

第14节:CSS进阶:消除未使用的CSS

像Bootstrap这样的框架往往会带有很多CSS。在项目中通常我们只使用它的一小部分。就算我们自己写CSS,随着项目的进展,CSS也会越来越多,有时候需求更改,带来了DOM结构的更改,这时候我们可能无暇关注CSS样式,造成很多CSS的冗余。这节课就学习用webpack消除未使用的CSS。

视频教程购买地址https://chungold.com

PurifyCSS

使用PurifyCSS可以大大减少CSS冗余,比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。

安装PurifyCSS-webpack

从名字你就可以看出这是一个插件,而不是loader。所以这个需要安装还需要引入。 PurifyCSS-webpack要以来于purify-css这个包,所以这两个都需要安装。

这里的-D代表的是–save-dev ,只是一个简写。

引入glob

因为我们需要同步检查html模板,所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

引入purifycss-webpack

同样在webpack.config.js文件头部引入purifycss-webpack

配置plugins

引入完成后我们需要在webpack.config.js里配置plugins。代码如下,重点看标黄部分。

这里配置了一个paths,主要是需找html模板,purifycss根据这个配置会遍历你的文件,查找哪些css被使用了。

注意:使用这个插件必须配合extract-text-webpack-plugin这个插件,这个插件在前边的课程已经讲解过了。如果你还不会请自学一下。

配置好上边的代码,我们可以故意在css文件里写一些用不到的属性,然后用webpack打包,你会发现没用的CSS已经自动给你删除掉了。在工作中记得一定要配置这个plugins,因为这决定你代码的质量,非常有用。

 

第15节:给webpack增加babel支持

在前端开发中都开始使用ES6的语法了,虽然说webpack3增加了一些ES6的转换支持,但是实际效果不是很好,也可能是本人技术有限,没发挥出真正的功能。所以我在开发中还是喜欢添加Babel-loader的,我也查看了一些别人的webpack配置也都增加了babel-loader,所以这节课我们学习一下如何增加Babel支持。(此节文章部分内容引用了zhangwang大神的文章内容)

视频教程购买地址https://chungold.com

Babel是什么?

Babel其实是一个编译JavaScript的平台,它的强大之处表现在可以通过便宜帮你达到以下目的:

  • 使用下一代的javaScript代码(ES6,ES7….),即使这些标准目前并未被当前的浏览器完全支持。
  • 使用基于JavaScript进行了扩展的语言,比如React的JSX。

Babel的安装与配置

Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包)。

我们先一次性安装这些依赖包

在webpack中配置Babel的方法如下:

现在你已经可以用webapck转换ES6的语法兼容各个浏览器了,我们可以修改一下entry.js的代码如下:

上面的代码使用了ES6的let声明方法。如果你不使用Babel来进行转换,你会发现打包出来的js代码没有作兼容处理,使用了Babel转换的代码是进行处理过的。

.babelrc配置

虽然Babel可以直接在webpack.config.js中进行配置,但是考虑到babel具有非常多的配置选项,如果卸载webapck.config.js中会非常的雍长不可阅读,所以我们经常把配置卸载.babelrc文件里。

在项目根目录新建.babelrc文件,并把配置写到文件里。

.babelrc

.webpack.config.js里的loader配置

ENV:

现在网络上已经不流行babel-preset-es2015,现在官方推荐使用的是babel-preset-env,那我们为了紧跟潮流,我们在讲一下env的配置方法。

首先需要下载:

然后修改.babelrc里的配置文件。其实只要把之前的es2015换成env就可以了。

总结:对于在React中Babel的使用,如何解析JSX,我会在后边的课程作详细了解,大家不要着急。在实际工作中还是要安装Babel的,这样能更好的兼容每种浏览器,而把Babel的配置文件分解出来是最好的选择。

第16节:打包后如何调试

作为一个程序员每天的大部分工作就是调试自己写的程序,那我们使用了webpack后,所以代码都打包到了一起,给调试带来了麻烦,但是webpack已经为我们充分考虑好了这点,它支持生产Source Maps来方便我们的调试。(敲黑板,这节可能偏理论一点。)

视频教程购买地址https://chungold.com

在使用webpack时只要通过简单的devtool配置,webapck就会自动给我们生产source maps 文件,map文件是一种对应编译文件和源文件的方法,让我们调试起来更简单。

四种选项

在配置devtool时,webpack给我们提供了四种选项。

  • source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度;
  • cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便。
  •  eval-source-map:使用eval打包源文件模块,在同一个文件中生产干净的完整版的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定要不开启这个选项。
  • cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法,生产的 Source map 会和打包后的JavaScript文件同行显示,没有影射列,和eval-source-map选项具有相似的缺点。

四种打包模式,有上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的打包速度的后果就是对执行和调试有一定的影响。

个人意见是,如果大型项目可以使用source-map,如果是中小型项目使用eval-source-map就完全可以应对,需要强调说明的是,source map只适用于开发阶段,上线前记得修改这些调试设置。

简单的配置:

总结:调试在开发中也是必不可少的,但是一定要记得在上线前一定要修改webpack配置,在打出上线包。

第17节:实战技巧:开发和生产并行设置

一周没有写博客了,这一周都在出差(10月9-10月12日),肯定有小伙伴等着看教程了,在这里跟小伙伴说对不起了。这节详细讲讲用webapck开发和生产(或者说开发和上线)的那些事。把小伙伴容易迷茫的几个点讲清楚。(从这篇开始强烈建议看视频学习,文章很难表述我的意思)

视频教程购买地址https://chungold.com

依赖不同

一个项目中是有开发环境和生产环境的,这两个环境的依赖也是不同的。

  • 开发依赖:只在开发中用来帮助你进行开发,简化代码或者生成兼容设置的以来包。你可以打开package.json来查看,devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。
  • 生产依赖:就是比如我们的js使用了jquery,jquery的程序要在浏览器端起作用,也就是说我们最终的程序也需要这个包,这就是生产依赖。这些包在dependencies中。

npm安装

假如我们要在项目中使用jquery库,这时候我们一般有三种安装方法,每种我都详细讲解一下。

第一种:

安装完成后,你会发现在package.json中并不存在这个包的依赖。如果你项目拷贝给别人继续开发,或者别人和你git合作,再次下载项目npm install时就会缺少这个jquery包。项目就会无法正常运行,所以这也是我们最不赞成的安装方法。

第二种:

安装完成后,它存在于package.json的dependencies中,也就是说它是生产环境需要依赖的包(上线时需要的以来包)。

第三种:

安装完成后,它存在于package.json的devDependencies中,也就是说它是开发环境中需要的,上线并不需要这个包的依赖。

安装全部项目依赖包:

安装生产环境依赖包:

配置生产和开发并行

我们在以前的配置中设置了一个变量website,用于静态资源正确找到路径。那如果生产环境和开发环境不一样,而且我们需要来回切换,这时候我们需要更好的设置方法。

修改package.json命令

其实就是添加一个dev设置,并通过环境变量来进行区分,下面是package.json里的值。

修改webpack.config.js文件

可以利用node的语法来读取type的值,然后根据type的值用if–else判断。

如果你说我想看一下传过来的值到底是什么?可以用下面的输出语句。

Mac下的package.json设置

MAC电脑下需要把set换成export,并且要多加一个&符,具体代码如下。

第18节:实战技巧:webpack模块化配置

现在的前端开发随着ES6的普及已经大面积使用模块化进行开发了,那在webpack.config.js配置文件中,如何进行模块化开发那?例如把开发环境的写到一个模块中,把生产环境的写到一个模块中。这节课我们就用一节课的时间学习一下webpack模块化配置的技巧。

视频教程购买地址https://chungold.com

JS中的模块化实现

先来看一下JavaScript如何实现模块话开发。其实很多小伙伴都会这种操作,那我们就当复习了,再预习一遍知识。看下面ES6中的模块化代码。

上面的代码是一个最简单的es6模块化写法,我们声明了一个jspang方法,并且把这个方法用module.exports进行暴露出去。然后我们在入口文件中用import进行引入,并进行使用。

我们了解如何作Javascript的模块化后,其实webpack的模块化和上边的过程很类似。

webpack模块

为了让大家容易看懂,我把webpack.config.js中的entry入口文件进行模块化设置,单独拿出来制作成一个模块。

首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下:

entry_webpack.js

配置的模块化代码编写好以后,需要在webpack.config.js中引入,注意这里的引入只能使用require的方法。

然后在入口文件部分,修改成如下代码:

这时候你可以再次使用npm  run dev 进行测试,你会发现模块化成功了。

总结:模块化在实际工作中是必不可少的操作,但是现在的webpack教程还很少讲到,大家一定要重视这节,因为如果你搞不清这节的内容,可能你看别人的配置也会看不明白。记得一定要动手练习操作,否则你下面的课程也没办法学习。

第19节:实战技巧:优雅打包第三方类库

在工作中引用第三方的框架是必不可少的,比如引入JQuery或者Vue,但是很多小伙伴一遇到引入第三方的类库时就不知道如何操作了。这节课就学习一下如何优雅并正确的用webpack引入第三方库。(本节建议收看视频学习)我们讲两种打包的方法,小伙伴们可以根据自己的喜好选择,个人认为两种都是比较不错的。

引入JQuery

其实引用第三方库的方法有很多种,但是有些并不是很优雅,还有些方法会出现打包问题,技术胖在这里介绍一下自己工作中引入第三方模块的方法,我们就拿JQuery为例。小伙伴们要举一反三,学会后试着自己引入Vue试试。

安装JQuery

安装时需要注意的时Jquery最终要在生产环境中使用,所以我们这里要使用–save进行安装。

修改entry.js文件

安装好后,还需要引入到我们的entry.js中,这里直接使用import进行引入就可以。

这里引入是不需要我们写相对路径的,因为jquery的包是在node_modules里的,只要写一个包名jquery,系统会自动为我们查找的。

引入好后我们就可以在entry.js里使用jquery,我们可以加入下面的代码,然后进行测试。

可以看到上面是标准的jquery代码,你可以使用npm  run server 进行测试,现在代码顺利运行了,这说明我们引用的JQuery库成功了。需要说的是你不仅可以在入口中进行引入,你还可以在任何你需要的js中引入,webpack并不会重复打包,它只给我们打包一次。

用plugin引入

如果你觉的上面的方法和webpack没什么关系,只是普通的引入,webpack只是负责了一下打包,这样并没有全局感。那再学习一种在webapck.config.js中配置的方法,这种不需要你在入口文件中引入,而是webpack给你作了全局引入。这个插件就是ProvidePlugin

ProvidePlugin是一个webpack自带的插件,Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件,所以要先再webpack.config.js中引入webpack。

在webpack.config.js里引入必须使用require,否则会报错的,这点小伙伴们一定要注意。

引入成功后配置我们的plugins模块,代码如下。

配置好后,就可以在你的入口文件中使用了,而不用再次引入了。这是一种全局的引入,在实际工作中也可以很好的规范项目所使用的第三方库。

总结:每一个项目都可能引入第三方类库,而像Vue和Angular这样的成熟框架都推出了自己的webpack框架,比如vue-cli。但是很多情况还是需要我们手动更改这些配置好的webpack来适用于我们的公司项目,所以这节课的知识也是在工作中经常使用的,希望小伙伴们一定要重视并进行练习。

第20节:实战技巧:watch的正确使用方法

在初级开发阶段,使用webpack-dev-server就可以充当服务器和完成打包任务,但时随着你项目的进一步完成,可能需要前后台联调或者两个前端合并代码时,就需要一个公共的服务器了。这时候我们每次保存后手动打包显然效率太低,我们希望的场景是代码发生变化后,只要保存,webpack自动为我们进行打包。这个工具就是watch,这节课我们把wacht完全学会,你会发现在开发中更加的得心应手。

watch的配置

很多小伙伴认为–warch直接使用就可以,并没有什么需要讲的。其实这只是初级的用法,但是在学习一种技术时,我们必须要做到了解全部,也就是常说的知其然知其所以然。我们看下面的配置代码,我在代码中已经做出了解释。

上边的每一行配置我都作了说明,有时候你在没配置的情况下,直接用webpack –watch是不起作用的,这时候你需要进行配置这些选项。

配置好后,我们就可以痛快的使用watch了,在大型项目中,这大大加快了我们的开发效率,不用反复的手动打包了。

BannerPlugin插件

由于这节课的内容太少了,我们再讲一个工作中的小技巧,再工作中每个人写的代码都要写上备注,为的就是在发生问题时可以找到当时写代码的人。有时候也用于版权声明。

这个插件就是BannerPlugin,我们使用后会在JS中加上我们的版权或开发者声明。

需要注意的是在使用这个插件之前必须引入webpack。

这时在dist目录下的entery.js已经加上了版权声明。

第21节:实战技巧:webpack优化黑技能

作为一个程序员,无论是写什么程序都i要有一颗不断优化的心。webpack在优化这条路上,也为我们作了很多配置,这节课我们就看看工作中常用的webpack优化黑技能。

ProvidePlugin和import

在第19节中学习了如何引入第三方类库,并引入了jquery,在引用JQuery时我们用了两种方法,第一种时import,第二种时使用ProvidePlugin插件。那两种引入方法有什么区别那?

  • import引入方法:引用后不管你在代码中使用不适用该类库,都会把该类库打包起来,这样有时就会让代码产生冗余。
  • ProvidePlugin引入方法:引用后只有在类库使用时,才按需进行打包,所以建议在工作使用插件的方式进行引入。

具体的对比操作,会在视频中演示,你会看出两种引入方法的对比打包结果。差距还是蛮大的。

抽离JQuery

上边的方法只是优化的第一步,工作中你会发现,不适用的类库几乎我们也不会引入,所以上边只是一个必要操作的第一步。那往往把第三方类库抽离出来,才是最好的解决方法。

第一步:修改入口文件

抽离的第一步是修改入口文件,把我们的JQuery也加入到入口文件中,看下面的代码。

webpack.config.js

第二步:引入插件

我们需要引入optimize优化插件,插件里边是需要配置的,具体配置项看下面的代码。

minChunks一般都是固定配置,但是不写是不行的,你会打包失败。

filename是可以省略的,这是直接打包到了打包根目录下,我们这里直接打包到了dist文件夹下边。

配置完成后,我们可以先删掉以前打包的dist目录,然后用webpack再次打包,你会发现jquery被抽离了出来,并且我们的entry.js文件变的很小。

多个第三方类库抽离

会了如何抽离Jquery,但是在实际开发中,我们会引用不止一个第三方类库,这时也需要抽离。我们拿引入Vue为例,看看如何抽离出来。

第一步:我们先用npm 进行安装。

注意这里是–save,而不是–save-dev。因为这个类库在生产环境中也是要使用的。

第二步:在入口配置中引入vue和jquery

只是多比上边多加了一个vue选项。

第三步:修改CommonsChunkPlugin配置

需要修改两个位置:

  • 第一个是在name属性里把原来的字符串改为数组,因为我们要引入多个模块,所以是数组;
  • 第二个是在filename属性中把我们输出的文件名改为匹配付[name],这项操作就是打包出来的名字跟随我们打包前的模块。

下面是我们修改的代码,你可以跟jquery抽离时对比一下。

配置好后,我们就可以在控制台输入webpack进行打包了。你会看到我们预想的结果,jquery和vue都被我们抽离出来了。

总结:在项目开发中,我们很使用很多第三方类库,那好的做法就是把第三方这些类库全部抽离处理,这样在项目维护和性能上都是不错的选择。希望学会这个技巧后,你也能在工作中使用上。

 

第22节:实战技巧:静态资源集中输出

工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图、开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片。项目组长会要求你打包时保留这些静态资源,直接打包到制定文件夹。其实打包这些资源只需要用到copy-webpack-plugin。

使用copy-webpack-plugin

copy-webpack-plugin就是专门为我们作静态资源转移的插件,不过它不同上两节使用的插件,它是需要安装的。

插件安装

插件的安装只要使用npm就可以了。

如果在安装过程中出错,你可以使用npm来进行安装。

引入插件

安装好后,需要在webpack.config.js文件的头部引入这个插件才可以使用。

配置插件

引入之后我们就可以在plugins里边进行配置插件了,我们先看下面的插件配置代码,然后再进行详细讲解。

  • from:要打包的静态资源目录地址,这里的__dirname是指项目目录下,是node的一种语法,可以直接定位到本机的项目目录中。
  • to:要打包到的文件夹路径,跟随output配置中的目录。所以不需要再自己加__dirname。

配置好后,我们就可以使用webpack 进行打包了,你会发现图片按照我们的配置打包了过去。

总结:你是不是觉的学习起来越来越容易了,因为你经过20多节课的学习,已经基本掌握了webpack的知识,剩下的就是不断练习和在实际项目中发现新的需求,然后找到新的loader或者pulgin来解决你的问题。

第23节:实战技巧:Json配置文件使用

在实际工作中,我们的项目都会配置一个Json的文件或者说API文件,作为项目的配置文件。有时候你也会从后台读取到一个json的文件,这节课就学习如何在webpack环境中使用Json。如果你会webpack1或者webpack2版本中,你是需要加载一个json-loader的loader进来的,但是在webpack3.x版本中,你不再需要另外引入了。

读出Json内容

第一步:现在我们的index.html模板中加入一个层,并给层一个Id,为了是在javascript代码中可以方便引用。

第二步:到src文件夹下,找到入口文件,我这里是entry.js文件。修改里边的代码,如下:

这两行代码非常简单,第一行是引入我们的json文件,第二行驶写入到到DOM中。

第三部:启用我们的npm run server 命令就可以在浏览器中看到结果了。

说说热更新

其实在webpack3中启用热加载相当的容易,只要加入HotModuleReplacementPlugin这个插件就可以了。

现在只要你启动 npm run server 后,修改index.html中的内容,浏览器可以自动给我们更新出最新的页面。

但这里说的热加更新和我们平时写程序的热加载不是一回事,比如说我们Vue或者React中的热更新,并不是刷新整个页面,而是一个局部更新,而这里的更新是重新刷新了页面。

这点小伙伴们要搞清楚。

总结:这节主要回答了两个同学的问题,这两个问题在实际开发中也经常用到,所以我就总结成课,给小伙伴们讲解一下,希望对你们有所帮助。

 

第24节:剧终-webpack自学技巧传授

本来打算在最后加一个多页webpack实战给大家的,但是这个要录制10多节,所以决定再独立出一套视频教程给大家(当然这是免费的)。请关注我的博客(http://jspang.com)。

这节课我会教大家一些自学webpack的技巧,让大家可以再本教程结束后继续自行精进,也算倾囊相授。(精彩内容视频呈现,请关注视频内容)

 

 

 

 

 

 

未经允许不得转载:技术胖-胜洪宇关注web前端技术 » Webpack3.X版 成神之路 全网首发
分享到: 更多 (0)

评论 231

  1. #100

    胖哥,babel-preset-es2015安装的时候已经提示它被babel弃用了,应该更改为babel-preset-env

    匿名6个月前 (01-14)回复
  2. #99

    胖哥,style-loader与css-loader的作用说反了

    匿名6个月前 (01-13)回复
  3. #98

    那个 热更新 我为什么其实,es/abstract/es6 然后报错了。。。。

    匿名6个月前 (01-13)回复
  4. #97

    胖哥,我把sass的样式,分离出来之后,npm run server,启动服务,再更新sass里面的样式,不会自动刷新了。需要webpack重新打包后,才会刷新。如何让它能够随着sass样式的修改自动刷新呢。就像没分离出来样式的时候一样,更新样式,页面自动更新。谢谢。

    匿名6个月前 (01-12)回复
  5. #96

    watchOptions的aggregateTimeout 配置写错了,应该是aggregateTimeout

    匿名6个月前 (01-12)回复
  6. #95

    我付款买了视频,但是。。但是。。就在我准备从《第04节:配置文件: 服务和热更新》这节开始学习的时候发现,这一节放的是第三节入口跟出口的视频,然后我以为是在后面的视频里讲了,就一路往后面看,结果都没有看到有《第04节:配置文件: 服务和热更新》的视频,麻烦您修改一下。

    匿名6个月前 (01-09)回复
  7. #94

    纯金,任务4,服务和热跟新和任务3重复了。胖大大 感觉解决一下

    匿名6个月前 (01-09)回复
    • 已经更新解决,非常抱歉给你带来了不变。

      技术胖6个月前 (01-10)回复
  8. #93

    付款了,可是没有看到进群方法

    匿名7个月前 (01-04)回复
  9. #92

    第六节 有错误
    ‘uglifyjs-webpack-glugin’ =====> “plugin”

    匿名7个月前 (01-04)回复
  10. #91

    练习的时候发现entry错了,我说为什么有点语意不明

    匿名7个月前 (01-02)回复
  11. #90

    胖哥 20节的文本有误 aggregeateTimeout 打错。 还有17节的修改命令里面的webpack打错了

    匿名7个月前 (01-01)回复
  12. #89

    很好的教程,网上很少有webpack3的教程,感谢分享,也希望出点项目实战的视频。

    匿名7个月前 (01-01)回复
  13. #88

    你好,胖哥, 第六节 webpack打包就可以压缩代码,但是webpack-dev-server 就不行??那这样不是很麻烦!

    匿名7个月前 (12-29)回复
  14. #87

    胖哥 加你好友没有同意啊。。。。

    匿名7个月前 (12-29)回复
  15. #86

    胖哥 怎么把打包的js文件 放进打包好的文件夹里 啊 就想CSS分离js一样打包进一个文件夹里面

    匿名7个月前 (12-28)回复
  16. #85

    您好,技术胖,请问webpack多页面应用配置什么时候可以录制呢?多页面应用,webpack也有很多坑。

    匿名7个月前 (12-27)回复
  17. #84

    您好,第九节的publicPath使用本机的ip地址会一直刷不出来,使用”/”就可以了

    匿名7个月前 (12-27)回复
  18. #83

    您好!我发现一个问题,按照之前的教程一步步坐下来但是到了extract-text-plugin这步,修改style-loader和css-loader之后存在css找不到的问题

    匿名7个月前 (12-25)回复
    • 还没学到精髓吧。

      技术胖7个月前 (12-25)回复
      • css可以找到了,但是css中url定义的图片路径不对,查看dist中文件发现路径少了../ 这些符号,目前没有地方可以配置

        匿名7个月前 (12-27)回复
  19. #82

    技术胖您好,看了您的vue四季的基础视频和ES6,还有这次的webpack3.X系列(目前看到第九节),但是本人只是一个前端新手,只停留在div+css还原布局和jq使用上,想问下这样是否太急功近利了

    匿名7个月前 (12-24)回复
    • 是学的有点快,最好有个基本的JS基础在学习Webpack3.x版本。

      技术胖7个月前 (12-26)回复
  20. #81

    第二节中 webpack src/entry.js dist/bundle.js中 应该是entery.js吧

    匿名7个月前 (12-22)回复
    • 是的,你的留言一定可以帮助更多的人。

      技术胖7个月前 (12-22)回复
  21. #80

    胖哥 你好 我们webpack 打包的时候一直都是打的一个页面 比如我们src下面有很多页面的时候怎么配置了

    new HtmlWebpackPlugin({
    minify: {
    removeAttributeQuotes: true
    },
    hash: true,
    template: ‘./src/[a,b].html’,
    }),
    我换位 *.html 还是报错

    匿名7个月前 (12-21)回复
    • 这个坑我遇到过,页面不多的时候,就new多几个就可以啦

      匿名6个月前 (01-10)回复
  22. #79

    胖哥,你好我在用webpack分离jquery和vue的时候,报Vue is not a constructor错误,怎么解决呀

    匿名7个月前 (12-20)回复
    • 亲解决了吗

      匿名6个月前 (01-08)回复
  23. #78

    胖哥,css怎么压缩啊

    匿名7个月前 (12-20)回复
    • 看视频吧,教程中已经讲的很清楚了。

      技术胖7个月前 (12-21)回复
  24. #77

    在npm run server后报错:

    webpack-dev-server

    module.js:487
    throw err;
    ^

    Error: Cannot find module ‘errno’
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object. (F:\Project\webpackItem\node_modules_memory-fs@0.4.1@memory-fs\lib\MemoryFileSystem.js:7:14)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! webpackitem@1.0.0 server: webpack-dev-server
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the webpackitem@1.0.0 server script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! E:\Program Files\nodejs\node_cache_logs\2017-12-20T08_34_59_905Z-debug.log

    匿名7个月前 (12-20)回复
    • 你这是有模块没有找到,看看你的node_modules和你的package.json里是否可以对应上。

      技术胖7个月前 (12-21)回复
  25. #76

    胖哥:那个我看视频和你写的文章上面有点出入 npm install –save-dev css-loader 和npm install css-loader –save-dev 这2句话的意思是一样的吗

    匿名7个月前 (12-20)回复
    • 是一样的。写在前边后边都可以的。

      技术胖7个月前 (12-21)回复
  26. #75

    胖哥,感觉应该把exclude提前讲讲,不然在讲babel之前执行webpack,都会提示[BABEL] Note: The code generator has deoptimised the styling of “XXX.js” as it exceeds the max of “500KB”.

    匿名7个月前 (12-20)回复
  27. #74

    胖哥看完你的视频,我希望你能出个传统的多页面的配置,自己搞不来!

    匿名7个月前 (12-19)回复
    • 好的,请继续关注博客,以后有精力一定会出的,相信胖哥。

      技术胖7个月前 (12-22)回复
  28. #73

    胖哥,看了你Vue的教程以后想学习webpack的技术,打上19.8以后却没有显示进群的方法。。。。。。。

    匿名7个月前 (12-18)回复
  29. #72

    watchOptions中aggregeateTimeout报错无效配置,3.8.1的版本

    匿名7个月前 (12-18)回复
    • 应该是这个 aggregateTimeout

      匿名6个月前 (01-11)回复
  30. #71

    胖哥,问一下一般找合适自己项目的webpack插件到哪里挑选啊?

    匿名7个月前 (12-18)回复
    • github上挑选,或者多阅读别人的配置代码。肯定会有所收获。

      技术胖7个月前 (12-22)回复
  31. #70

    请问那个打赏30元的代金券可以用来买这个视频么?

    匿名7个月前 (12-17)回复
    • 有15元代金券可以用来买这个视频的。希望对你有帮助。

      技术胖7个月前 (12-22)回复
  32. #69

     胖哥,购买的视频是不是高清的,感觉页面的有点模糊,强迫症患者==

    匿名7个月前 (12-16)回复
    • 算高清了,因为要视频手机观看,可能窗口有点小,但是看清楚应该没问题的。

      技术胖7个月前 (12-16)回复
  33. #68

    胖哥 第五节css打包里边在js里边引入css的方式好像不对,可能我的编辑器装了eslint检测吧,直接 import ‘./css/index.css’ 直接这样可以, 如果import css from ‘./css/index.css’ 这样会报错

    匿名7个月前 (12-15)回复
  34. #67

    最近一段时间比较忙,没来及学习webpack, 不知道打赏30送的45的代金券能不能用来买视频,嘿嘿

    匿名7个月前 (12-15)回复
    • 有15元代金券专门买这个视频的。

      技术胖7个月前 (12-15)回复
      • 在哪里领15元代金券?

        匿名7个月前 (12-17)回复
        • 打赏后加我微信,php100.然后我告诉你如何获得。

          技术胖7个月前 (12-18)回复
  35. #66

    胖哥 在第二节小dome里边 webpack src/entry.js dist/bundle.js 这个方法,怎么打包多个文件呢?

    匿名7个月前 (12-15)回复
  36. #65

    请问 importLoaders:1 这是什么意思,是引入的loader数量为1吗

    匿名7个月前 (12-13)回复
  37. #64

    在webpack配置file-loader 和 url-loader 的时候,使用file-loader可以生成图片,但是显示不出来,直接浏览器报错了
    使用url-loader的话,在生成的js文件总没有看到base64的转码,还提示缺少相关的loader
    我重新下载了file-loader url-loader 还是报错

    浏览器报错信息:
    entry.js?5baaec25e14ab9d52a09:9792 Uncaught Error: Module parse failed: Unexpected character ‘�’ (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)

    匿名7个月前 (12-12)回复
    • 问题解决了,是因为loader的安装问题。在重复练习的过程中。有时候安装了loader,但是总会报错没有找到loader,这时候就把node_modules删除,然后重新下载就差不多可以解决。

      匿名7个月前 (12-13)回复
  38. #63

    胖哥 webpack 配置多页项目要怎么弄呢

    匿名7个月前 (12-12)回复
    • 以后我单独讲一套课程,免费让大家看。

      技术胖7个月前 (12-12)回复
  39. #62

    第四节配置dev-server,都配置好了,也下载了webpack-dev-server,script下也配置了,但是报错了。
    报错信息:
    Error: Cannot find module ‘webpack’
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object. (G:\webpack\demo01\node_modules\webpack-dev-server\lib\Server.js:22:17)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! demo01@1.0.0 server: webpack-dev-server
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the demo01@1.0.0 server script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    试着删除了node_module,重新下载,但是还是报错

    匿名7个月前 (12-11)回复
    • 从这里看是webpack没有安装好。你可以重新安装一下看看。

      技术胖7个月前 (12-11)回复
      • 嗯嗯,是的。之前webpack是全局安装的,现在我把webpack换成了项目内部安装使用Ok了。

        匿名7个月前 (12-11)回复
  40. #61

    watchOptions:{
    //检测修改的时间,以毫秒为单位
    poll:1000,
    //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存,不进行打包操作
    aggregeateTimeout:500,
    //不监听的目录
    ignored:/node_modules/,
    }

    第二项配置单词写错了,应该是 aggregateTimeout

    匿名7个月前 (12-11)回复
  41. #60

    纯金视频怎么回事啊,看一会再返回看的话就卡着不能播放了???

    匿名7个月前 (12-09)回复
    • 好的,我去跟纯金协商一下,给你个圆满解释。否则我就是你的人了。别慌别慌。

      技术胖7个月前 (12-11)回复
  42. #59

    live-server报这个错是怎么回事,胖哥?
    Uncaught SyntaxError: Unexpected token import

    匿名7个月前 (12-08)回复
    • webpack就不要用live-sever了,webpack有自带的服务。

      技术胖7个月前 (12-11)回复
  43. #58

    1
    2
    3
    var website ={
    publicPath:”http://192.168.1.108:1717/”
    }

    开发环境设置了就路径报错,这个是不是生产环境才设置??

    匿名7个月前 (12-08)回复
    • 你要查看自己的路径,这个是我的,找到自己的就好了。

      技术胖7个月前 (12-11)回复
  44. #57

    老师,为什么在webpack.config.js中写入-watch的配置后就出现这个错误,Invalid configuration object. Webpack has been initialised using a configuration
    object that does not match the API schema.
    – configuration.watchOptions has an unknown property ‘aggregeateTimeout’. These
    properties are valid:
    object { aggregateTimeout?, ignored?, stdin?, poll? }

    匿名7个月前 (12-08)回复
  45. #56

    这里写的是css-loader用来将css插入style标签,style-loader是处理css文件中的url()等 ;是不是写反了,还是我看的其它地方是错的?

    匿名7个月前 (12-07)回复
    • 这个是写反了,感谢你提出的意见。

      技术胖7个月前 (12-08)回复
  46. #55

    Unexpected token: name (urlParts) 请问这个问题是什么原因

    匿名7个月前 (12-07)回复
  47. #54

    ERROR in myEntry.js from UglifyJs
    Unexpected token: name (urlParts) [myEntry.js:325,4]
    请问这个错误是为什么?我一直是跟着胖哥的步骤做的啊

    匿名7个月前 (12-07)回复
    • 查看你的路径是不是配置的不对,也要注意publicPath的配置。

      技术胖7个月前 (12-11)回复
      • 我用的cnpm下载的依赖,有问题,后面用npm下载过就好了

        匿名7个月前 (12-13)回复
    • 因为entry.js里面写的是es6代码,而uglify不支持压缩es6,需要先配置babel

      匿名7个月前 (12-20)回复
  48. #53

    胖哥,通过providePlugin插件加载的vuejs不能使用啊,会报Vue is not defined

    匿名7个月前 (12-07)回复
    • 解决了吗?

      匿名6个月前 (01-08)回复
  49. #52

    胖哥,有vue多页面的脚手架吗

    匿名8个月前 (12-06)回复
  50. #51

    期待出更高级的课程

    匿名8个月前 (12-05)回复
    • 好的,我会更加努力出更多的课程。

      技术胖8个月前 (12-05)回复
  51. #50

    胖哥,你好,看了你的视频我想请教一个问题。我在项目中使用webpack-dev-server实现了热更新。但是修改less文件时,发现页面css样式没有刷新,必须要手动打包后,页面css样式才能变化。请问一下,需要怎么设置,才能在修改less时,页面样式同步更新?非常感谢!

    匿名8个月前 (12-04)回复
    • 检查你的less插件,平且不要进行压缩,然后把配置文件分开,打包的和你开发的分开就可以了。

      技术胖8个月前 (12-04)回复
  52. #49

    请问怎么购买??

    匿名8个月前 (12-04)回复
    • 直接点击链接去纯金进行购买。

      技术胖8个月前 (12-04)回复
  53. #48

    看了胖哥的教程之后,已经学会自己动手搭建webpack了,非常感谢

    匿名8个月前 (12-03)回复
    • 你能在这里学到东西,我也感动很高兴。

      技术胖8个月前 (12-03)回复
  54. #47

    技术胖 我学习到第四节 “scripts”: {
    “server”: “webpack-dev-server”
    }, 已经完成了修改,但是报错了,
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! webpacktest@1.0.0 server: webpack-dev-server
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the webpacktest@1.0.0 server script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-12-01T12_34_22_582Z-debug.log

    匿名8个月前 (12-01)回复
  55. #46

    _(:з」∠)_为什么纯金网我电脑视频播不出来,但是手机可以播

    匿名8个月前 (12-01)回复
    • 纯金是合作网站,这个你需要找他们的管理解决。但是我也会联系他们解决你的问题。请放心。

      技术胖8个月前 (12-01)回复
  56. #45

    胖哥 webpack 看完了很受用,非常感谢,但是胖哥你貌似还是欠我们小伙伴一点东西啊,说好的讲一下多页面的打包,还有说了来一个整体项目的实例的呢? 我还在这苦等了。。。 呜呜~~~~(>_<)~~~~

    匿名8个月前 (11-30)回复
    • 以后会出,最近工作太忙。有心无力,放心。技术胖不会跑单的。说出一定出。

      技术胖8个月前 (11-30)回复
  57. #44

    胖哥,在 第四节中,我下载了 webpack-dev-server,第一次安装没注意,写成了 cnpm install webpack-dev-server -S,后来看您的不一样,就有重新下载了一边cnpm install webpack-dev-server –save-dev,配置好package.json里的scrips后,还是出现 错误,就是没配置package.json前的错误,怎么办

    路人甲10个月前 (09-28)回复
    • 需要重新作一边。或者自己改package.json,然后删掉node_module文件夹,然后重新npm install.

      技术胖10个月前 (09-28)回复
  58. #43

    看文字一步步来的 npm run server 可以启动 但热更新无效

    10个月前 (09-28)回复
    • 热更新无效,可以试着去配置一下publicPath=”/temp”。

      技术胖10个月前 (09-28)回复
  59. #42

    通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理。 语言不通顺

    逆时针10个月前 (09-27)回复
    • 谢谢你指出的问题,我马上修改。

      技术胖10个月前 (09-28)回复
  60. #41

    我没有在全局安装webpack,直接在项目安装的webpack,为什么显示webpack不是内部命令也不是外部命令,这个是需要在哪里进行配置吗?

    fyj10个月前 (09-26)回复
    • 没有全局安装时肯定找不到webpack这个命令的。你可以全局安装一下。如果不想全局安装可以在package.json里进行配置。

      技术胖10个月前 (09-26)回复
      • package.json要怎么配置啊,我也是遇到这个问题,不知道如何解决了

        匿名5个月前 (03-06)回复
  61. #40

    胖哥,想问你一个问题就是做为 一个开发来说, 如果想系统的学习你博客里面的这些东西,应该以一个什么样的顺序进行,因为觉得现在你授课的这些东西,都很有用。本人也是前端,样样都略懂一点,想系统的跟着你学习,主要是胖哥你讲的简单易懂!付费的课程,我也都购买了,

    51echo10个月前 (09-26)回复
    • 网站右边有个Vue的学习过程,总体来说是从后往前学就对了。

      技术胖10个月前 (09-26)回复
  62. #39

    刚来您的网站,发现很棒!还有你的域名也很有意思,js胖、技术胖、金三胖,哈哈!

    拓荒10个月前 (09-25)回复
  63. #38

    宇哥,我按照你步骤写出来,但是热跟新没有用啊

    leywis10个月前 (09-24)回复
    • 你看的是视频还是文字教程?查看自己的wbpack版本,和node版本。

      技术胖10个月前 (09-25)回复
  64. #37

    module.rules 里的use 总是报错 , 怎么换成 loader就可以了

    信号10个月前 (09-23)回复
    • 是有几种写法的,我在第6节课中已经重点讲解了。

      技术胖10个月前 (09-25)回复
  65. #36

    自己敲代码的时候看见一个问题,3.6安装完模块会生成一个package-lock.json文件,这个是新版本增加的吗? 以前的版本是没有的,即使有那也是隐藏的,可以在视频中解释一下吗?

    周壮10个月前 (09-22)回复
    • package-lock.json是node8.X版本新加的,主要作用是记录node_modules里的树状结构,所以重新下载时会很快,它并不会在生产环境中使用。希望这个答案对你有帮助。

      技术胖10个月前 (09-22)回复
  66. #35

    纯金网站前面必需加上www才能访问,你可以叫你朋友改一下

    hawkzz10个月前 (09-22)回复
  67. #34

    “–save-dev” 还是 “-save-dev”

    L10个月前 (09-21)回复
  68. #33

    我觉得在第二节课后是否需要提一嘴,这样打包的好处,为什么需要这样做,不然新手看到这后,会有疑问,为什么我不直接在index.html里直接引用entry.js,毕竟对于这个例子来说,webpack确实感觉多此一举。

    Jay10个月前 (09-20)回复
    • 非常好的建议,我会进行更正。

      技术胖10个月前 (09-21)回复
  69. #32

    胖哥,从第二节开始没有视频了嘛,我刚开始学,能买你全套的 webpack 视频嘛

    言Sir10个月前 (09-20)回复
    • 视频还在录制中,不过现在购买时有优惠的。

      技术胖10个月前 (09-20)回复
  70. #31

    在第01节中创建的“entery.js”,在第02节中入口文件写成了“entry.js”

    L10个月前 (09-19)回复
  71. #30

    第02节,写的挺好简单易懂,不知道后面会不会讲的更细些,如entry:string | [string] | object { : string | [string] } output.filename的[hash]、[chunkhash]、[name]、[id]、[query]表示啥使用场合等等(可以给大伙讲讲经验,你踩过的坑)

    你的记忆10个月前 (09-19)回复
  72. #29

    [name]的意思是根据入口文件的名称,打包成相同的名称,有几个路口文件,就可以打包出几个文件 。路口文件改为入口文件。

    homefrank10个月前 (09-19)回复
    • 感谢你的建议,文中已经修改。非常感谢指正。

      技术胖10个月前 (09-20)回复
  73. #28

    path.resolve(__dirname,’dist’) 可以解释下 __dirname是什么

    老K10个月前 (09-19)回复
  74. #27

    path.resolve(__dirname,’dist’) 可以解释下 __drname是什么

    老K10个月前 (09-19)回复
  75. #26

    胖哥,react和webpack要双线作战吗?(两个一起出,还是先出webpack?)

    barry10个月前 (09-19)回复
  76. #25

    胖哥,我刚学,暂时不能给你提出啥建议,在这里就提前祝胖哥中秋国庆同乐!

    YT10个月前 (09-19)回复
    • 谢谢你的祝福。让我们一起学习webpack吧。我相信学完后你就能独挡一面了。

      技术胖10个月前 (09-19)回复
  77. #24

    1. “接下来在src文件家下”:文件夹;
    2. entry file直接命名为entry.js会不会更直观一些呢;
    3. {entry file}:入口文件的路径,本文中就是src/entery.js的路径;
    {destination for bundled file}:填写打包后存放的路径。个人觉得这里不是很清楚,是不是注明相对于哪里的路径,没有看下面的例子的话,可能会想是不是绝对路径还是相对路径,相对路径又是相对哪里,比较迷惑~

    杨小毒zhuozhuo10个月前 (09-19)回复
  78. #23

    我觉得可以把,cd /d xxx等一些简单、常用的命令提一下

    你的记忆10个月前 (09-18)回复
  79. #22

    原文:学习并作完这节课你就可以和朋友小吹一下
    改成:学习并做完这节课的内容
    顺便希望胖哥能解释下生成的bundle.js里面的内容

    小灰10个月前 (09-18)回复
    • 非常感谢你提供的错误内容,文中已经修改。

      技术胖10个月前 (09-18)回复
  80. #21

    原文:{entry file}:路口文件的路径,本文中就是src/entery.js的路径;

    “路口文件”? 是指“入口文件”
    微信名:L

    L10个月前 (09-18)回复
    • 谢谢你指出的错误,非常感谢。文中已经修改。

      技术胖10个月前 (09-18)回复
  81. #20

    胖哥!可以讲一下webpack安装,和打包时常见的错误!个人建议

    WLlebronc10个月前 (09-18)回复
    • 非常感谢你的建议,教程中一定会讲解相关的内容,请关注教程。

      技术胖10个月前 (09-18)回复
  82. #19

    胖哥我看了下刚刚的文章,好像漏了一点,如果电脑之前安装了旧版本的webpack,该如何升级到最新的webpack版本,这个可以附带睡一下,就一行字的事,然后我觉得视屏过程中,胖哥可以说说你是怎么学习webpack的。个人觉得学习方法才是王道。

    落_尘10个月前 (09-18)回复
    • 非常好的建议,确实有遗漏,已经在文章中增加。
      技术胖为感谢你提供的意见,赠送给你价值48元免费观看《webpack3.X 成神之路》视频教程。
      请尽快在微信中联系技术胖,获取视频激活码。

      技术胖10个月前 (09-18)回复
  83. #18

    原文:
    dist文件夹:用力存放供浏览器读取的文件,可以理解成webpack打包成的文件。
    改成:
    dist文件夹:用来存放供浏览器解析的文件,可以理解成webpack打包后的文件。

    hawkzz10个月前 (09-18)回复
    • 感谢你提供的建议,文中已经修改。

      技术胖10个月前 (09-18)回复
  84. #17

    个人建议:1.webpack的优势,带个前端开发的优势;2.带领大家装好webpack;3.充分讲解安装好的模块的作用;4.讲解一个通用的webpack配置;5.如何定制私有化的webpack;6.webpack的高级用法以及常用插件的安装使用。

    安河桥北10个月前 (09-16)回复
    • 你的建议非常好,整个课程的大纲会参考你的意见完成。谢谢你一直的支持。

      技术胖10个月前 (09-17)回复
  85. #16

    胖哥 我拿Mac按照你步骤输入npm install -g webpack就老报这个错
    no such file or directory, access ‘/usr/local/lib/node_modules/webpack/node_modules/ansi-regex’
    但是转用cnpm就能安装上
    求教这个问题

    男二号10个月前 (09-16)回复
    • 两个原因,Mac是需要权限的,所以你加上sudo试一下。

      技术胖10个月前 (09-17)回复
  86. #15

    文章还是分章节好一点,文章太长滑动有点卡,尤其是嵌入多个视频的时候

    伊吾鱼10个月前 (09-16)回复
    • 好的。你的意见非常好,我会慎重考虑。

      技术胖10个月前 (09-17)回复
  87. #14

    安装是很简单的一步,一般错误可能出现在node的版本号,我们可以友好提醒,这也是安装的前提条件

    A+韩瑜10个月前 (09-16)回复
  88. #13

    1.原文中的拼写错误
    原文:WebPack在业界的 流行成都 自然必备多说
    改:流行程度

    原文:这个文件夹就是我们的项目文件目录了, 文件家 建立好后,可以通过下面命令安装WebPack。
    改:文件夹

    2.第一步是从安装开始,那么是否也介绍一下,本地安装
    “不推荐全局安装 webpack。这会将您项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。” 这是官方文档的原话,那么我们这里是否也提醒一下,或者说解释一下

    A+韩瑜10个月前 (09-16)回复
    • 感谢你的指正和建议,文章中已经改正,技术胖为了感谢你支持,赠送价值48元《webpack3.0+视频课程》一套,请微信跟技术胖联系,获取免费观看码。

      技术胖10个月前 (09-17)回复
  89. #12

    scss就是(sass),胖哥能不能把安装过程中的依赖什么的截个图,小伙伴直接一路enter可能会和你的最终结果不一样

    夏曦10个月前 (09-16)回复
    • 你的建议已经在文章中修改并体现,非常感谢你的建议。

      技术胖10个月前 (09-17)回复
  90. #11

    希望胖哥出一下 webpack 打包传统多页面的 例子,
    现在网上都是 关于webpack用于 vue,react, ag 单页面应用上的例子,
    请胖哥有空可以考虑一下,webpack 应用于传统的website开发,提高一下传统模式下的开发效率。
    业余时间我自己做了一套webpack2的工作脚手架,目前可以 自动热更新,省了手动刷新页面,sass的编译等,但是感觉还不够完美。
    微信群昵称:慕歌

    慕歌10个月前 (09-16)回复
    • 你的意见,我会在课程大纲中进行考虑,并酌情进行讲解。感谢你一直一来的支持。

      技术胖10个月前 (09-17)回复
  91. #10

    胖哥,还需解决scss,是不是错了,应该是sass

    wLlebronc10个月前 (09-16)回复
    • 非常感谢指出错误。谢谢你的支持。

      技术胖10个月前 (09-17)回复
  92. #9

    可以加上2.0的版本对比吗,当介绍到3的知识点和2不同的时候,捎带提一下变化,因为很多公司还在用第二个版本

    空格10个月前 (09-16)回复
    • 在3.0+讲解完,会加入一些2.0的对比。

      技术胖10个月前 (09-17)回复
  93. #8

    “WebPack在业界的流行成都自然必备多说”流行程度打错啦~然后那个npm安装那里要不要再注明一下用cnpm成功率会高一些呢,我是用npm就不能够安装成功

    zhuozhuo10个月前 (09-16)回复
    • 谢谢你提出的建议,已经改正。

      技术胖10个月前 (09-17)回复
  94. #7

    应该提醒下得安装node,不然cmd也没用…

    你的记忆10个月前 (09-16)回复
    • 你提的建议非常好,已经修改文章,谢谢你的支持。

      技术胖10个月前 (09-17)回复
  95. #6

    ONE:
    title:什么是WebPack?
    content:并将其转换和打包为合适的格式供浏览器使用。
    suggest:这句话不严谨,建议修改一下。把合适的格式准确的罗列出来。

    TWO:
    title:安装WebPack
    content:package.json
    suggest:建议简略讲一下每一项的意思,代表什么,详细内容自行移步node。

    李小白10个月前 (09-16)回复
    • 你的第一个意见,已经修改。第二个会在视频中有所体现。谢谢你的支持。

      技术胖10个月前 (09-17)回复
  96. #5

    可以说明下全局安装和非全局安装的区别作用

    樱桃小丸子10个月前 (09-16)回复
    • 非常好的建议,已经在文章和视频中增加了此内容。

      技术胖10个月前 (09-17)回复
  97. #4

    文件夹写成了文件家
    还有就是全局安装webpack 不需要建立好文件夹

    老K10个月前 (09-16)回复
  98. #3

    原文:
    Angluar.js+WebPack
    改为:
    AngularJS + WebPack

    XieszTrue10个月前 (09-16)回复
    • 感谢你的意见,文章中已经修改。

      技术胖10个月前 (09-17)回复
  99. #2

    原文:
    如果你不作就不会出现错误
    改为:
    如果你不做就不会出现错误

    XieszTrue10个月前 (09-16)回复
  100. #1

    胖哥,动手作一作,改一下。

    wLlebronc10个月前 (09-16)回复