摘要:添加依赖到如何使用依赖当你再兴建一个文件的时候,就不需要一个个插件安装了,将文件复制到当前文件下,并输入,即通过里的依赖关系,自动把依赖安装好了。第四步新建配置文件默认的配置文件在项目目录下为。
WilsonLiu"s blog 首发地址
前言早就想尝试webpack的,却一直没有时间,恰逢周末,又时值最近在公司实习的时候尝到用fekit做模块化的构建工具的爽。所以就开始以公司的项目结构去使用webpack的,当然最后还是有点问题的,只能折中解决了。公司的方案是前后端完全分离,html代码放在后端服务器上,css,js,images等资源文件放在前端服务器,两者是不同的域名。问过之后,才知道原来是因为,js每次请求会带上cookie,增加了不必要的带宽,所以将其放在前端服务器上,因为script的标签可以跨域引用(这也是jsonp的原理)。 所以主要的目录结构大概是,当然我说的折中是把html直接放进了prd文件夹下,这个之后要说明原因。
+html +src +prd +fekit-module安装
首先,你需要安装了node.js
第一步,全局安装npm install webpack -g
第二步,初始化package.json信息,这个可以直接回车到底npm init
第三步,局部安装webpack,添加依赖到package.json疑问:没有使用过相关构建工具的小伙伴,肯定疑惑。为什么全局安装后还需要局部安装? 原因:每个项目需要的依赖不同,如果都安装在全局,那么不同项目我们就无法做到定制化的服务,而是大锅粥式的服务,无法满足高效生产的目标。所以需要局部安装。
npm install webpack --save-dev //--save-dev 添加依赖到package.json
如何使用依赖?
当你再兴建一个文件的时候,就不需要一个个插件安装了,将package.json文件复制到当前文件下,并输入npm install,即通过package.json里的依赖关系,自动把依赖安装好了。当然,其他文件结构还是要自己新建。
这里提供一下我的package.json文件。
{ "name": "angular", "version": "0.0.0", "description": "practice", "main": "gulpfile.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "BSD-2-Clause", "devDependencies": { "webpack": "~1.12.11", "style-loader": "~0.13.0", "extract-text-webpack-plugin": "~1.0.1", "file-loader": "~0.8.5", "url-loader": "~0.5.7", "css-loader": "~0.23.1" } }第四步 新建配置文件
默认的配置文件在项目目录下为 webpack.config.js。 简单的操作可以参看下面这个文档。 《Webpack 中文指南》
恭喜入坑完成,上面四步,可以说你就已经走进了webpack的大门了。 但是,要想个性化的定制服务,理解每一个参数~ 查看了许多博客,讲的都差不多,都不是非常深入。所以,还是得去看官方文档 webpack
参数真的是非常多,一个个把认为会用到的敲过去,调了调,试了试。
接下来,本文,根据自己的学习历程,讲下我用到的重要部分,首先贴一下,项目结构,和配置文档。
-app +node_modules -prd +html +css +js +images -src +css +js +images -gulpfile.js -webpack.config.js -README.md var webpack = require("webpack"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { context: __dirname + "/src", entry: { test:["./js/test.js","./js/test1.js"] test2:"./js/test2.js", }, output: { path: __dirname + "/prd", publicPath: "../", filename: "js/[name].js" }, module: { loaders: [ { test: /.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}, { test: /.json$/, loader: "json"}, {test: /.html$/, loader: "html"}, { test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/, loader: "url-loader?limit=50000&name=[path][name].[ext]"} ] }, plugins: [ new ExtractTextPlugin("css/[name].css"), ] }参数说明
因为webpack是基于node.js所有,采用的是common.js的写法,common.js具体语法我在这里就不解释了。
首先,webpack是需要定义输入与输出文件的,entry为输入,output为输出。
context这个是输入entry的上下文环境,__dirname代指整个项目路径,即directory name。
我的项目结构中,开发目录是src,所有在__dirname后面,加上路径的 /src。
列出输入的文件
entry: { test:["./js/test.js","./js/test1.js"], test2:"./js/test2.js", },
entry有三种定义方式,第一个直接一个字符串路径名,代表唯一一个输入;第二个一个数组代表多个文件对应
一个输出,第三种,如上写,以字面对象量的方式,test,test2总共对应着3个输入2个输出。
output: { path: __dirname + "/prd", publicPath: "../", filename: "js/[name].js" },
path和entry的一样。代表所有文件输出时的前缀路径。
这里要加重了
publicPath: "../",
这个属性一直没重视,认为这个和path应该是一样一样的,为何还要多设置一个,所有一开始,我是只设置了path,并没有设置publicPath的。那么这里为什么设置了publicPath: "../",呢。
我们通过一个例子来说明原因。
div { background-image: url(../images/test/icon.jpg); } //我在src目录下的css文件夹中的index.css中设置背景图片 require(../images/icon.png) //我在src目录下的js文件的index.js中引入图片 var img = require("../images/test/icon.jpg"); document.getElementById("image").setAttribute("src", img); //prd下的html文件夹中的indexhtml代码test test
如上所述,我用css与js两种方式引入图片。
只是在src中的话,那样是没有问题的,但要是在prd中,因为prd为打包后文件。对于这些地址的处理,是没有太多介绍的,所有只能一个个试。如果我不加publicPath: "../",的话,那么这些图片对应的路径
__dirname/prd/css/images/test/icon.png /第一种 __dirname/prd/html/images/test/icon.png//第二种 __dirname/prd/images/test/icon.png //正确路径
所以问题出在了webpack打包的时候,处理地址的时候会将前面"../"给消除了,所有你再到chrome里看他是他的地址是 images/test/icon.jpg,没有前面哪个../,当然了,我的研究也暂时只到这里,你能够通过public设置../来达到目的。而我之所以把html放入prd中,而不是直接在项目目录下,也是因为这个~放在项目目录下,这个publicPath路径就没法统一了,所有只能先折中一下,将html也放入prd中。
这样上述的图片就应该正常显示了。
但是这样的话,也就达不到我想做的前后端完全分离的效果了,所有,这里先留下一笔,折腾了一天,还没找到解决方案。
filename: "js/[name].js"
这个是设置输出路径在紧接着前面path与publicPath两个深一层的 设置,这个对应着entry的输入文件,name就是entry对象里的键值名,即test,test2。
loader大体上module里面,我暂时用到的只有loaders,所有这里只讲解loaders。
module: { loaders: [ { test: /.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}, { test: /.json$/, loader: "json"}, {test: /.html$/, loader: "html"}, { test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/, loader: "url-loader?limit=50000&name=[path][name].[ext]"} ] },
loaders是一个数组,数组里是对每种文件的打包处理。因为webpack本身只支持js打包的处理,所有我们要是想把css,json,html,图片一起打包了,就得另外下各种各样的加载器了。
简单说下用法,在我们的entry的入口js文件中,require(../images/icon.png)既可以引入一个png格式的文件,此时,webpack打包时,会检测require的文件,并采用对应的规则去解析,如果你没有对应的加载器就会报错,这里我们引入了url-loader,所以他会正确解析打包。
(url-loader用法,url-loader?这里的?表示query查询的意思,后面跟的是规则,当文件大小小于50kb的时候,采用base64格式,如果大于50kb则采用链接)
不得不说,大部分加载器的说明文档还是太简单了,寥寥几句,暂时还不知道如何高度的定制化需求。list of loaders
test
test中对应的是一个正则表达式,没有什么好说的,不知道的可以找相关的文档看看,也可以点我这篇博客看看正则表达小结与小知识点集锦
loader
loader对应的就是,匹配该规则时指定的加载器,比如匹配到json文件时,采用“json”加载器,全称是"json-loader",当然简称也没有问题。至于css中那个是一个额外的插件,表示匹配到css时采用这个插件,至于插件的声明与用法,请看下面的参数。
plugins: [ new ExtractTextPlugin("css/[name].css"), ]
plugins 是插件的声明与用法,首先用new实例化一个插件,参数是一个地址规则的字符串,
表示把require的css文件输出的地址。
插件也有许多,想要高度定制需求,肯定是要结合插件与加载器的。list of plugin
使用的时候,直接到项目目录下,使用webpack就会自动执行。
当然,输入webpack -w 每次更改后会自动执行。
另外webpack提供node.js的服务器供调试。
满复杂的文档,看花了。webpack-dev-server
安装
npm install webpack-dev-server --save-dev
执行
webpack-dev-server
好了,使用的时候,还有许多其他的小细节,可以去探索 。
当然大部分时候有这些也足够了。感兴趣的可以继续去探索
其实,如果不喜欢折腾也可以来尝试一下fekit,学习成本较低,并且非常强大。
前端构建工具fekit
文中有什么纰漏,欢迎大家指出~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78544.html
摘要:介绍微信风格的,与客户端体验一致,这个自己去微信上看吧,略。微信调试一件套,网页授权模拟集成代理远程调试。这些在微信开发者中心有介绍,略。年微信开发经验的人,终于又成为了零年开发经验的人,重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活动地址:http://fequan.com/2016/ 注意:英文不好,小记也带有自己...
摘要:然而小程序放上去不到两周,就在昨天就在昨天就在昨天,突然收到腾讯云的邮件提示,欠费,,什么情况啊,我懵逼了,想了半天,先充了几块钱进去,毕竟不想自己努力构思的产品,就诞生这么几天就夭折了。 showImg(https://segmentfault.com/img/bVbkcfC?w=1080&h=298); 做过前端,或对小程序有些了解的同学都知道,小程序是没有域名访问概念的,访问的路...
摘要:然而小程序放上去不到两周,就在昨天就在昨天就在昨天,突然收到腾讯云的邮件提示,欠费,,什么情况啊,我懵逼了,想了半天,先充了几块钱进去,毕竟不想自己努力构思的产品,就诞生这么几天就夭折了。 showImg(https://segmentfault.com/img/bVbkcfC?w=1080&h=298); 做过前端,或对小程序有些了解的同学都知道,小程序是没有域名访问概念的,访问的路...
摘要:主有前端后端,并加,各一名。本着工欲善其事,必先利其器的理念,一直以来在工作效率这块,略怀执念一个问题不应该被解决两次。下图为开发项目机制所涉及到的插件工欲善其事,必先利其器,语言,框架皆可以归结为器而不当仅局限于开发工具以及机。 原文链接: http://www.jeffjade.com/2016/05/08/106-vue-es6-jade-scss-webpack-gulp/ 一...
阅读 2909·2021-11-22 15:25
阅读 2214·2021-11-18 10:07
阅读 991·2019-08-29 15:29
阅读 446·2019-08-29 13:25
阅读 1477·2019-08-29 12:58
阅读 3141·2019-08-29 12:55
阅读 2873·2019-08-29 12:28
阅读 459·2019-08-29 12:16