【webpack】-- 初探

以前也了解过webpack,而且多数情况都是和vue、react这些技术联系在一起。这次正式的学习webpack起源于最近开发的微信项目。
相信大家都遇到过微信缓存的问题,上线的项目遇到版本更新的时候总会有一部分用户因为缓存的问题出现各种各样的问题。让客户自己手动去清理微信缓存肯定会大大降低用户体验,于是就在网上查了下关于微信缓存的解决方案。
整理下来大概有三种:
html 代码
前两种方法简单粗暴,我就不细说了。但是前两种方式有个问题就是,每次更改过文件后,你都需要去手动修改相应的版本号和随机数。项目大一点以后非常不利于管理,于是就将目光锁定在第三种方法上。然后就搜到了webpack打包工具,最近也蛮火的,据说比gulp简单,上手快。最后就选了webpack。 一、使用前的准备
首先我们需要先安装webpack。
1、新建一个文件夹,作为你的项目文件夹,这里我取名为【webpackPro】。
2、在该文件夹按住shift键点击鼠标右键,点击【在此处打开命令窗口】,这样我们就调出命令窗口了,并默认是当前文件夹的目录。
3、在命令行里键入命令:
html 代码
说明:你可以选择全局安装,或者是安装到你的项目中,都可以。 如果提示你说“npm不是内部命令”,那么说明你还没有nodejs的环境,可以去官网下载nodejs并安装和配置好环境变量。但是由于npm安装插件是从国外服务器下载,受网络影响大,可能出现异常。所以我还是喜欢用淘宝镜像的,除了用cnpm 替换 npm ,其他都是一模一样的。所以以下我都用cnpm的版本。 结果:安装成功以后,你的文件夹里就会多一个【node_modules】的文件夹。并且我的文件夹里出现了一个名为package的json文件。 补充:如果你的没有package.json文件,可以在命令行里键入命令【cnpm init】,然后就会有一些提示,比如项目名称、项目描述、作者等,如果不想管,可以一直回车,这样初始化webpack就完成了。 目前的目录结构: -webpackPro -node_modules ... -package.json 二、准备我们需要打包的源文件
在webpackPro文件下新建一个名为【src】的文件夹,这个文件夹用来存放我们的源码。
然后常规操作,【src】下新建【css】、【images】、【js】文件夹分别存放我们的样式表、图片和脚本文件。
然后在【src】下新建一个index.html。
最后在index.html、css文件夹、images文件夹、js文件夹里写上和放入相关的代码和文件即可。
目前的目录结构:
-webpackPro
-node_modules
...
-src
-css
-index.css
-images
...
-js
-index.js
index.html
-package.json
三、然后我们就可以开始打包啦
打包的方式可以在命令行直接打包制定文件,也可以配置配置文件来进行打包。
1、直接打包
在webpackPro > src > js文件夹里调出命令行,键入命令:
html 代码
说明:index.js是你需要打包的文件,output.js是打包后的输出文件。 结果:打包成功后,你的【js】文件夹内就出现了一个output.js文件,这就是打包后的index.js文件。output.js里面有很多代码,你的index.js里面的代码可以在output.js文件的文末看到。 补充:但是是无法直接打包css和图片。css和图片的处理方式后面会讲到。 目前的目录结构: -webpackPro -node_modules ... -src -css -index.css -images ... -js -index.js -output.js //打包后的文件 index.html -package.json 2、利用配置文件 在webpackPro下新建一个名为【dist】的文件夹作为输出文件夹,打包后的文件都放在这里。 然后在webpackPro下新建一个名为【webpack.config】的配置文件js,内容如下: **javascript 代码** 然后在webpackPro下输入命令:webpack,就会自动去寻找根目录下的webpack.config.js配置文件,并根据配置文件的内容打包。 说明:(1)、entry是webpack的入口,里面配置webpack的入口文件。接受字符串或者是对象, 如果只有一个入口文件,字符串就可以;如果有多个入口文件需要写成对象的形式。比如: **javascript 代码** (2)、output是webpack的输出,决定最后文件打包成什么样子。 filename是输出的文件名,path是输出文件的位置。如果是多个文件入口, 为了避免所有js都被打包成一个js(因为同名文件会被覆盖),需要对文件名进行处理。比如: **javascript 代码** '[name]'是之前的文件名,这样每个打包后的文件名都不一样; '[hash:8]'是hash值,一个随机的字符串,正是有了这个才保住每个文件的唯一性,也是解决微信缓存的关键。冒号后面一个8,表示显示8位hash值。 结果:打包成功以后,dist文件夹下就会出现一个名为【output】的js文件,该文件就是我们打包后的输出文件。 目前的目录结构: -webpackPro -dist -output.js -node_modules ... -src -css -index.css -images ... -js -index.js index.html -package.json -webpack.config.js 四、如何在index.html中引入index.js、index.css并打包
1、因为webpack不能单独处理css文件,所以我们先在index.js里引入index.css文件:
javascript 代码
2、使用工具前,我们得先安装。所以我们在命令行里输入: **html 代码** 3、然后我们在配置文件中配置,处理非js文件的文件,我们需要配置加载器和插件。加载器和插件是webpack里非常重要的功能,加载器使得我们可以调用外部的脚本或工具,实现对不同格式的文件的处理,如:scss、es6等。插件是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。所以我们在配置文件中加入加载器如下: **javascript 代码** 说明:module里面配置加载器:test是一个用以匹配loaders所处理文件的拓展名的正则表达式,是一个必填的值;loader是loader的名称,也是必填。 plugins里面配置插件:filename是输出文件名。 template是html模板路径。 chunks和 entry里面的入口名相对应,html里面需要引入哪些js这里就填哪些。 结果:打包好以后dist里面就会生成两个文件:一个index.html、一个output.js文件。访问index.html,1946bv1946伟德备用地址样式和脚本都被打包进去了,也就说明我们打包成功了。 补充:加载器和插件都可以有很多个,以满足不同文件的打包处理需求。注意打包之前需要安装相应的依赖。 目前的目录结构: -webpackPro -dist -index.html -output.js -node_modules ... -src -css -index.css -images ... -js -index.js index.html -package.json -webpack.config.js 五、webpack对于图片的打包问题
1、命令行安装加载器:
html 代码
2、修改配置文件,增加对于图片处理的加载器
javascript 代码
说明:limit是图片的界限值,小于这个界限值的图片webpack就会打包成base64格式,大于这个值就会在输出文件夹里生产一个images文件夹,并将图片放在里面。 补充:处理图片就是要注意路径问题。图片的丢失,webpack也会编译出来并报错。 到这里,一个超级简单的项目打包我们就完成了。
具体的参数,详细使用说明可以参照webpack中文版文档:
https://doc.webpack-china.org/concepts/#-entry-
补充一个关于img标签里面的图片打包后404的解决方案:使用html-withimg-loader就可以解决这个问题
1、命令行安装加载器:
html 代码
2、修改配置文件:在处理html时使用这个加载器
javascript 代码
评论 ( 0 )
最新评论
暂无评论
赶紧努力消灭 0 回复