基于打包工具Webpack進(jìn)行項(xiàng)目開發(fā)實(shí)例
一. 常見打包工具的介紹
在打包工具中,常見的有RequireJS,browserify,webpack,其中RequireJS是一個(gè)JavaScript模塊加載器,基予ADM(async module define)規(guī)范實(shí)現(xiàn),browserify是一個(gè)以在瀏覽器中使用Node.js模塊為出發(fā)點(diǎn)的工具,而webpack則是一個(gè)為前端模塊打包構(gòu)建而生的工具.
二. 工具的使用
(1)作為npm包的RequireJS提供了一個(gè)可執(zhí)行的r.js工具,通過(guò)命令行執(zhí)行,使用方式如下:
npm install -g requirejs r.js -o app.build.js
(2)browserify提供的命令行工具,使用如下面所示:
npm install -g browserify browserify main.js -o bundle.js
(3)webpack的使用
如下面所示,使用命令進(jìn)行安裝與使用,如下所示:
npm install webpack -g webpack main.js -o bundle.js
在上面命令行中,我們進(jìn)行了簡(jiǎn)單的全局安裝webpack和對(duì)main.js文件的打包操作
三. 項(xiàng)目構(gòu)建
對(duì)前端項(xiàng)目來(lái)說(shuō),webpack扮演的是構(gòu)建工具的角色,并不是代碼依賴,應(yīng)該被安裝在dev-dependencies中,使用如下命令進(jìn)行安裝:
npm install webpack --save-dev
在這個(gè)示例中,將進(jìn)行簡(jiǎn)單應(yīng)用的構(gòu)建,包括兩個(gè)js模塊
1.生成文本”Hello world”的hello模塊(hello.js)
module.exports = 'Hello world';
2.打印文本的index.js模塊(index.js)
var text = require('./hello');
console.log(text);
和用于在前端瀏覽器中顯示內(nèi)容的index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="./bundle.js"></script> </body> </html>
在上面的src路徑引入的bundle.js文件是不存在的,因?yàn)檫€沒有創(chuàng)建,在使用webpack進(jìn)行創(chuàng)建打包之后的js文件,如下面所示命令進(jìn)行創(chuàng)建:
webpack ./index.js bundle.js
在執(zhí)行完上面命令之后,我們就可以在瀏覽控制臺(tái)中看到打印出的結(jié)果 Hello world
這樣,我們就實(shí)現(xiàn)了簡(jiǎn)單項(xiàng)目的實(shí)現(xiàn)原理,打包內(nèi)容為bundle.js,我們能夠看到打包之后的內(nèi)容,在這里就不貼代碼了.
當(dāng)然,如果我們寫代碼都是這樣去構(gòu)建,那么,作用意義也不大,這就不得不提及webpack的另外一個(gè)優(yōu)點(diǎn)了,那就是配置文件的使用,在使用配置文件之前,我們?cè)谶M(jìn)行安裝樣式加載器,如下面命令:
npm install style-loader css-loader --save-dev
通過(guò)上面的配置,我們就能夠進(jìn)行樣式的加載
然后我們進(jìn)行webpack配置文件設(shè)置,需要首先在項(xiàng)目下創(chuàng)建文件webpack.config.js文件,其中內(nèi)容如下所示:
var path = require('path');
module.exports = {
entry: path.join(__dirname, 'index'),
output: {
path: __dirname,
filename: 'bundle.js'
},
module:{
loaders: [
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
};
在上面代碼中,
* entry: 表示項(xiàng)目的入口文件
* output: 表示構(gòu)建打包之后的結(jié)果輸出,在輸出的對(duì)象中仍有多項(xiàng)配置比如上面所使用的輸出路徑和輸出文件名
* module.loaders是對(duì)于模塊中的loader使用的配置,值為一個(gè)數(shù)組,數(shù)組的每一項(xiàng)指定一個(gè)規(guī)則,規(guī)則的test字段是正則表達(dá)式,若被依賴模塊的ID符合該正則表達(dá)式,則對(duì)依賴進(jìn)行使用loader轉(zhuǎn)換.這樣,我們就能夠使用webpack命令進(jìn)行代碼的轉(zhuǎn)換
更多詳細(xì)說(shuō)明請(qǐng)參見(http://www.dbjr.com.cn/article/136710.htm)
如下面命令行命令就可以進(jìn)行代碼的打包工作webpack
通過(guò)執(zhí)行上面命令,同樣能夠?qū)崿F(xiàn)文件的打包,并且,在顯示文件時(shí)也能夠?qū)邮竭M(jìn)行顯示,為了證明樣式確實(shí)能夠被引入,我們進(jìn)行創(chuàng)建index.css文件,其中內(nèi)容如下所示:
body {
background-color: darkgray;
}
然后在我們之前創(chuàng)建的index.js中引入,修改之后的代碼如下所示:
// import style from './index.css';
var style = require('./index.css');
var text = require('./hello');
console.log(text);
在上面代碼中,注釋掉的是node模塊的導(dǎo)入形式,而使用中的是CommonJS的使用規(guī)范,使用同樣的命令打包之后,我們能夠在瀏覽器中看到如下效果:
也就是樣式進(jìn)行了展現(xiàn).
當(dāng)然,webpack也能夠通過(guò)webpack-dev-server進(jìn)行項(xiàng)目的實(shí)時(shí)構(gòu)建.
使用如下命令進(jìn)行webpack-dev-server的安裝:
npm install webpack-dev-server --save-dev
在安裝之后,我們能夠配置使用服務(wù)器,首先,我們的package.json文件將會(huì)更為下面這樣,新增內(nèi)容為:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server --inline"
},
在添加完這行命令之后,我們就可以使用下面命令進(jìn)行啟動(dòng)webpack-dev-server服務(wù)器了,
npm run start
之后完整的package.json為如下:
{
"name": "react-basics-review",
"version": "1.0.0",
"description": "a practise of react study ",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server --inline"
},
"repository": {
"type": "git",
"url": "git+https://github.com/suwu150/react-basics-review.git"
},
"author": "jkwu",
"license": "ISC",
"bugs": {
"url": "https://github.com/suwu150/react-basics-review/issues"
},
"homepage": "https://github.com/suwu150/react-basics-review#readme",
"devDependencies": {
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.5",
"lodash": "^4.17.4",
"mocha": "^3.5.0",
"react": "^15.6.1",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"dependencies": {
"lodash": "^4.17.4"
}
}
webpack配置文件修改為如下內(nèi)容:
devServer中常用的配置對(duì)象屬性如下：
* 1. contentBase：”./” // 本地服務(wù)器在哪個(gè)目錄搭建頁(yè)面，一般我們?cè)诋?dāng)前目錄即可；
* 2. historyApiFallback：true // 當(dāng)我們搭建spa應(yīng)用時(shí)非常有用，它使用的是HTML5 History Api，任意的跳轉(zhuǎn)或404響應(yīng)可以指向 index.html 頁(yè)面；
* 3. inline：true // 用來(lái)支持dev-server自動(dòng)刷新的配置，webpack有兩種模式支持自動(dòng)刷新，一種是iframe模式，一種是inline模式；使用iframe模式是不需要在devServer進(jìn)行配置的，只需使用特定的URL格式訪問(wèn)即可；不過(guò)我們一般還是常用inline模式，在devServer中對(duì)inline設(shè)置為true后，當(dāng)我們啟動(dòng)webpack-dev-server時(shí)仍要需要配置inline才能生效，這一點(diǎn)我們之后再說(shuō)；
* 4. hot：true // 啟動(dòng)webpack熱模塊替換特性，這里也是坑最多的地方，不少博客都將hot設(shè)置了true，這里其實(shí)如果單單設(shè)置為true是不起作用,會(huì)報(bào)錯(cuò)誤的,錯(cuò)誤如下圖所示:
這是因?yàn)樵谑褂玫倪^(guò)程中沒有使用插件的原因,只需要將下面命令添加到配置文件即可:
plugins:[ new webpack.HotModuleReplacementPlugin(), ],
也就是調(diào)用webpack的熱模塊插件處理.
*5 .port：端口號(hào)(默認(rèn)8080) ；
*6.其他配置信息
–quiet 控制臺(tái)中不輸出打包的信息
–compress 開啟gzip壓縮
–progress 顯示打包的進(jìn)度
–open 自動(dòng)打開瀏覽器
var path = require('path');
const webpack = require ("webpack");
module.exports = {
entry: path.join(__dirname, 'index'),
output: {
path: __dirname,
filename: 'bundle.js',
publicPath: "/assets/",
},
module:{
loaders: [
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
],
devServer:{
//我們?cè)谶@里對(duì)webpack-dev-server進(jìn)行配置
contentBase: "./",
historyApiFallback:true,
inline:true,
hot:true
}
};
index.html文件的內(nèi)容修改為下面面格式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>身在山中不知山高</div> <script src="assets/bundle.js"></script> </body> </html>
也就是將路徑進(jìn)行修改,因?yàn)樵趙ebpack.config.json文件中進(jìn)行了服務(wù)器路徑的配置,修改了 publicPath: "/assets/",項(xiàng),在命令行執(zhí)行npm run start能看到服務(wù)器正常啟動(dòng),然后我們?nèi)g覽器進(jìn)行訪問(wèn),如下所示結(jié)果:
至此,我們完成了webpack實(shí)時(shí)構(gòu)建的配置,當(dāng)我們進(jìn)行修改某一樣式文件或者js文件的時(shí)候,項(xiàng)目就會(huì)重新打包,并且自動(dòng)刷新加載到瀏覽器中.
如下面鏈接提示:,進(jìn)行實(shí)時(shí)構(gòu)建的搭建webpack-dev-server實(shí)時(shí)搭建
同時(shí)該項(xiàng)目使用的代碼在github地址如下:github地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js中url對(duì)象化管理的相關(guān)知識(shí)以及用法介紹，有需要的朋友跟著小編一起學(xué)習(xí)下。2017-12-12
項(xiàng)目中常遇到輸入框檢查的需求，比如即時(shí)搜索，用change事件？change事件失去焦點(diǎn)才發(fā)生，無(wú)法做到即時(shí)。keypresss事件？能監(jiān)聽到鍵盤，但監(jiān)聽不到鼠標(biāo)復(fù)制粘貼，不完美2014-09-09
原生JS和jQuery操作DOM對(duì)比總結(jié)
這篇文章主要給大家介紹了原生JS和jQuery操作DOM的一些對(duì)比總結(jié)，文中總結(jié)了很多的對(duì)比，相信對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
使用JS獲取input file的路徑C:\fakepath\問(wèn)題及解決方法
這篇文章主要介紹了使用JS獲取input file的路徑C:\fakepath\問(wèn)題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽輸入框變化的實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽輸入框變化的解決方案,需要的朋友可以參考下2017-04-04
JS驗(yàn)證圖片格式和大小并預(yù)覽的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS驗(yàn)證圖片格式和大小并預(yù)覽的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
Bootstrap Table使用整理(五)之分頁(yè)組合查詢
這篇文章主要介紹了 Bootstrap Table使用整理(五)之分頁(yè)組合查詢的實(shí)例代碼，非常報(bào)錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
JS通過(guò)Cookie判斷頁(yè)面是否為首次打開
這篇文章主要介紹了JS通過(guò)Cookie判斷頁(yè)面是否為首次打開 的相關(guān)資料,需要的朋友可以參考下2016-02-02
個(gè)人總結(jié)的一些JavaScript技巧、實(shí)用函數(shù)、簡(jiǎn)潔方法、編程細(xì)節(jié)
這篇文章主要介紹了個(gè)人總結(jié)的一些JavaScript技巧、實(shí)用函數(shù)、簡(jiǎn)潔方法、編程細(xì)節(jié),本文講解了變量轉(zhuǎn)換、取整同時(shí)轉(zhuǎn)換成數(shù)值型、日期轉(zhuǎn)數(shù)值、類數(shù)組對(duì)象轉(zhuǎn)數(shù)組、進(jìn)制之間的轉(zhuǎn)換等方法技巧,需要的朋友可以參考下2015-06-06
js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01