1. 首页

一小时的时间,上手 Webpack

一小时的时间,上手 Webpack

本文由公众号 字节逆旅 的主笔 慢一拍 写作而成,慢一拍 已认证成为图雀社区专栏作者,后续将为大家带来一系列 Webpack 的文章,敬请期待✌️。欢迎加入图雀社区,一起创作精彩的免费技术实战教程,加速技术的传播!

如果您觉得我们写得还不错,记得 点赞 + 关注 + 评论 三连,鼓励我们写出更好的教程💪

为什么要用构建工具?如果你只会js+css+html,最多再加上jquery,那么当你听到构建工具这个说法是不是蒙的?这种情况下我不建议你学习webpack,建议你学下 vue 或者 react 框架,这两个框架都有自己的脚手架,所谓脚手架就是别人用构建工具帮你搭好了原始项目,你可以在不懂构建工具的情况下进行前端开发。不过这就是初级前端的基本工作,给我一个环境,让我安心的写业务代码。

实际上,仅仅做上述工作也没什么不好,你可以钻研 css,研究js深度语法,甚至去不断精进算法与数据结构都是高级进阶之路。

我想说的是如果你有一天对webpack感兴趣了,ok,欢迎你来到大前端世界!webpack是一个强大且可扩展的前端构建工具,还有包括grunt、gulp等同类工具都是基于node.js为底层驱动平台实现的。

为什么需要构建或者说编译呢?因为像es6、less及sass、模板语法、vue指令及jsx在浏览器中是无法直接执行的,必须经过构建这一个操作才能保证项目运行,所以前端构建打包很重要。除了这些,前端构建还能解决一些web应用性能问题,比如:依赖打包、资源嵌入、文件压缩及hash指纹等。具体的我不再展开,总之前端构建工程化已经是趋势。

至于为什么选择webpack,因为这个工具配置非常灵活,支持插件化扩展,社区生态很丰富,官方迭代更新速度快,作为程序员,这是一个靠谱的选择。

好了,废话不多说,下面直接上干货,教你半小时上手,用webpack构建开发一个小项目。学东西要快,可以不用理解清楚每个概念,先动手,不然等你学会得要一个星期了。

一、node安装

首先要保证你的电脑有node环境,node安装比较简单,直接在官网https://nodejs.org/en/下载node安装包就可以了,注意这里有两个版本,左边是稳定版本,右边是最新版本,一般用稳定版本就可以了。具体的安装过程不是本文的主要内容,网上有很多安装教程。有了node环境,后面就可以通过npm进行webpack的安装,npm是一个包管理工具,安装node就会自动安装npm。如果有必要我可以在我的公众号里也写个教程。

一小时的时间,上手 Webpack

二、webpack安装及配置

1、webpack安装

首先创建一个my_webpack文件夹作为项目文件夹,进入当前文件夹,通过命令行工具cmd执行以下命令:


npm init -y npm install webpack webpack-cli --save-dev 复制代码

安装完了检查版本,确认安装成功


./node_modules/.bin/webpack -v 复制代码

安装成功后,文件夹下面会有这些内容

一小时的时间,上手 Webpack

2、webpack配置

然后在根目录创建一个空配置文件webpack.config.js,创建以下内容:


'use strict' const path = require('path'); module.exports = { entry: { index: './src/index.js', }, output: { path: path.join(__dirname,'dist'), filename: 'index.js' }, mode: 'production', } 复制代码

entry代表打包入口,output需要指定输出地址及打包出来的文件名,mode指开发环境。然后在项目根目录中创建src文件夹及dist文件夹,src文件夹里创建index.js及hellowebpack.js两个文件,最后在dist目录创建一个index.html文件,完整目录如下:

一小时的时间,上手 Webpack

hellowebpack.js文件里输入以下内容:


export function hellowebpack() { return 'hellowebpack' } 复制代码

接着在index.js中引用hellowebpack.js文件中的这个函数


import {hellowebpack} from './hellowebpack' document.write(hellowebpack()) 复制代码

这个时候到./node_modules/.bin/目录下执行webpack打包命令,我们会看到dist目录下多出一个index.js文件,打开会看到压缩代码。

我们在dist目录下的indext.html文件创建如下内容,在浏览器打开此页面就能看到效果。


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./index.js" type="text/javascript"></script> </body> </html> 复制代码

看到这应该明白了吧,在src目录下面是开发内容,后面用 webpack 代码打包后,会在 dist 目录下生成一个index.js 文件,最后在index.html页引用,这就是webpack打包项目的基本流程。

前面在运行打包要进入 ./node\_modules/.bin/ 目录下执行 webpack打包命令,比较麻烦,这里添加一个配置就可以更方便打包。在 package.json 文件下的 script 节点添加一项配置 "build": "webpack",然后再删掉 dist 目录,再运行  npm run build 就可以方便地打包了。

一小时的时间,上手 Webpack

三、webpack入门示例

1、webpack解析es6

到这一步需要掌握一个新的概念:loaders,所谓loaders就是说把原本webpack不支持加载的文件或者文件内容通过loaders进行加载解析,实现应用的目的。这里讲解es6解析,原生支持js解析,但是不能解析es6,需要babel-loader ,而babel-loader 又依赖babel。来看步骤:先安装babel-loader,


npm i @babel/core @babel/preset-env babel-loader -D 复制代码

再在根目录创建 .babelrc 文件,增加以下内容


{ "presets": [ "@babel/preset-env", ] } 复制代码

接着在webpack.config.js文件下添加module属性,属性内容是一个rules集合,内容如下


// ... module: { rules: [ { test: /.js$/, use: 'babel-loader' }, ] } // ... 复制代码

rules集合的每个元素都是一个文件类型的配置信息,这里只有一个js文件,后面会讲到css、less及各种格式的图片等;test是一个正则,用来匹配文件后缀名;use表示此loader名称。

一小时的时间,上手 Webpack

前面例子里创建了hellowebapck.js文件,然后在index.js文件中被引用。里面用到的import是es6方法,有的浏览器并不支持es6,如果直接用webpack打包在这浏览器上是会出错的,但是刚才已经安装并配置了babel-loader,可以实现解析es6方法,babel还可以解析jsx语法。现在执行npm run build进行构建,就可以看到效果是成功的。(这个其实用一个ie浏览器就可以验证es6解析前后的效果)

2、webpack加载css、less等样式文件

css-loader用于加载css文件并生成commonjs对象,style-loader用于将样式通过style标签插入到head中

安装loader


npm i style-loader css-loader -D 复制代码

// ... module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.css$/, use: [ 'style-loader', 'css-loader' ] }, ] } // ... 复制代码

注意,这里的解析css用到了两个loader,所以use对象里是个数组,需要格外注意到loader顺序,是先写style-loader,再写css-loader,但是执行的时候是先加载css-loader,将css解析好后再将css传递给style-loader;

接下来在项目中加一个public.css文件,在里面写入一个样式:


.color-text { font-size: 20px; color: red } 复制代码

将此文件在src/index.js文件中引用,如下所示。

一小时的时间,上手 Webpack

我们知道此文件做为打包入口文件,最后打包后在dist目录下,我们可以直接到dist目录下的index.html文件内,添加一个div标签,加上样式名color-text,以验证样式打包及引用效果


<body> <script src="./index.js" type="text/javascript"></script> <div class="color-text">text-color</div> </body> 复制代码

一小时的时间,上手 Webpack

然后运行npm run build命令,执行成功后,在浏览器打开dist目录下index.html文件,会看到以下内容,样式文件被成功打包并发挥了作用:

一小时的时间,上手 Webpack

解析less文件也是一样的,直接把public.css文件改成less后缀,此时是不能解析的,需要安装less依赖,添加配置。

安装less相关依赖


npm i less less-loader -D 复制代码

添加less文件解析配置


// ... module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, ] } // ... 复制代码

这些步骤完成后,再运行 npm run build 命令进行打包,最后在浏览器查看 dist\index.html ,会发现效果是一样的。

3、webpack加载图片

图片在webpack中的打包步骤跟上面类似,只不过loader不同。

安装file-loader

执行以下命令,安装file-loader依赖


npm i file-loader -D 复制代码

然后在webpack.config.js配置文件 module 节点下添加解析配置内容:


{ test: /.(jpg|png|gif|jpeg)$/, use: 'file-loader' } 复制代码

随便找一张图片放在src目录下,在同级目录的public.css文件中加上背景图片样式,输入内容如下:


.color-text { font-size: 20px; color: red; height: 500px; background: url(beautiful.jpg) no-repeat; } 复制代码

然后运行npm run build命令进行构建,最后执行时并没有图片展示,但是我们在dist目录下发现了刚才打包过来的图片,如图所示。这就尴尬了,虽然图片是打包过来了,问题是我每次还在拷贝复制一下名称再引用,这很不科学。

一小时的时间,上手 Webpack

有没有更好的办法加载图片呢?答案是肯定的!看步骤:

安装url-loader


npm i url-loader -D 复制代码

url-loader直接内置了file-loader,是对它的再封装,在配置文件里可以直接去掉file,用url替换。

在webpack.config.js文件添加配置内容,注意limit是指图片大小上限,单位是字节,如果图片大小小于这个值,就会被打包为base64格式,否则就仍是图片。由于这个图片有120K,我这里设置为160000,差不多是150多K了。


{ test: /.(jpg|png|gif|jpeg)$/, use: [{ loader:'url-loader', options: { limit:160000, name: 'imgs/[name].[hash].[ext]' } }] } 复制代码

执行npm run build查看效果,发现成功了,再看dist目录下的index.js文件,发现内容多了很多,其实就是多了这张图片的base64数据。

一小时的时间,上手 Webpack

好了,这篇文章就写到这里,如果你按我的步骤来,一定可以轻松体验入门。当然,要真正达到应用水平,还要继续深入学习,webpack的内容还有很多,比如如何加载vue指令或者jsx语法,如何打包组件等,后面我会继续带来入门教程。

想要学习更多精彩的实战技术教程?来图雀社区逛逛吧。

如果您觉得我们写得还不错,希望您能给❤️这篇文章点赞❤️哦

一小时的时间,上手 Webpack

作者:图雀社区
链接:https://juejin.im/post/5e717455e51d4526c70fc9b9

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:一小时的时间,上手 Webpack

链接:https://www.javascriptc.com/3940.html

« 张鑫旭:我对前端从业人员分布与技术风向的一点看法
送你13 个精选的 React JS 框架»
Flutter 中文教程资源

相关推荐

QR code