媒介
早就想尝试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
列出输入的文件
entry: {
test:["./js/test.js","./js/test1.js"],
test2:"./js/test2.js",
},
entry有三种定义体式格局,第一个直接一个字符串途径名,代表唯一一个输入;第二个一个数组代表多个文件对应
一个输出,第三种,如上写,以字面对象量的体式格局,test,test2统共对应着3个输入2个输出。
output
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);
<!DOCTYPE html> //prd下的html文件夹中的indexhtml代码
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link href="../css/test.css">
</head>
<body>
<div id="test">
test
</div>
<img src="" id="image" />
<script src="../js/test.js"></script>
</body>
</html>
如上所述,我用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
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
文中有什么马虎,迎接人人指出~