摘要:還可以用作文件加載使用,詳細請看。實用命令除了簡單運行,還可以添加幾個參數,方便部署文件處理。以上僅僅介紹了前端開發最基本的用法,更多參數以及功能使用,參考官網
作者:Jogis
原文鏈接:https://github.com/yesvods/Blog/issues/3
轉載請注明原文鏈接以及作者信息
前一篇文章介紹了webpack以及安裝方法,這次將會介紹webpack在單頁面應用程序(Single Page Application)與多頁面站點不同場合的用法。
輸入與輸出跟其他模塊加載器類似,webpack也是需要配置一個入口文件,比如是entry.js
有幾種配置方式,下面來介紹一下直接把入口文件寫在配置文件 webpack.config.js:
module.exports = { entry: { "entry":"./entry.js" }, output: { path: "build", filename: "bundle.js" } }
通過命令行
> webpack
很便利地,webpack檢測配置文件,讀取模塊入口與輸出路徑和文件名,將文件依賴整合成一個文件,輸出到build/bundle.js
通過在HTML簡單引入
就可以在瀏覽器運行。
加載器簡單的SPA程序加載,包括:JS編譯與加載、CSS編譯與加載、圖片加載與壓縮、JS與CSS壓縮。
Webpack提供了一套加載器機制,比如:css-loader、style-loader、url-loader等,用于將不同資源加載到js文件中,例如url-loader用于在js中加載png/jpg格式的圖片文件,css/style loader 用于加載css文件,less-loader用于將less文件編譯成css。
下面介紹一些常用的加載器(詳細介紹在這里):
style+css+less加載Bootstrap less版本:
require("style!css!less!./bower_components/bootstrap/bootstrap.less");
style+css 加載一般樣式文件:
require("style!css!./styles/main.css");
url 加載圖片資源文件:
require("url!./images/logo.png");
json loader加載json格式文件:
require("json!./data.json");
js后綴的文件不需要使用加載器
require("./scripts/main.js");
coffee script加載
require("coffee!./scripts/main.coffee");
喜歡嘗鮮的童鞋可以通過Babel loader體驗ES6/7特性:
require("babel!./scripts/es6.js");
需要注意的是,避免用babel作為加載器加載所有node_module模塊,會出現意外結果,而且大量加載情況下,加載時間很長。babel還可以用作reactjs jsx文件加載使用,詳細請看。
配置加載器剛剛介紹了行內加載資源的方式,如果有很多css或者圖片資源需要加載,重復寫加載器顯得很笨拙,webpack提供另一種方式加載資源。
在配置文件添加配置:
module.exports = { module: { loaders: [ {test: /.css$/, loader: "style!css"}, {test: /.(png|jpg)$/, loader: "url-loader?limit=8192"} ] } }
其中test是正則表達式,對符合的文件名使用相應的加載器
/.css$/會匹配 xx.css文件,但是并不適用于xx.sass或者xx.css.zip文件
/.css/除了匹配xx.css也可以匹配xx.css.zip
加載器后可以加入?xx=yy傳遞參數,表示添加將xx設置為yy(跟http地址Query很像)
需要注意的是,使用加載器前需要使用
> npm i --save xxx-loader
安裝相應加載器,并通過--save把依賴配置到package.json中,使用加載器并不需要使用require引入。
搜索路徑變量以上介紹的加載器,可以很方便使用webpack整合日常資源,如果認為webpack僅僅只能做這些,那就讓您失望了。
可以看到,以上加載資源時候,都使用相對路徑來描述路徑,對于那些./app/src/scripts/main.js通過修改webpack配置文件,添加默認搜索路徑后,顯得更加優雅。
// webpack.config.js var path = require("path") module.exports = { resolve: { alias: { js: path.join(__dirname, "./app/src/scripts") } } }更改配置文件后加載:
require("js/main.js");
默認搜索路徑配置
對于bower_components死忠們,前端開發少不了幾個bower插件,使用gulp可以通過gulp-wiredep來動態把bower.json dependencies加載到指定HTML文件。
在webpack也有非常便利的導入方法:
首先,加入配置
module.exports = { resolve: { alias: { js: path.join(__dirname, "src/scripts"), src: path.join(__dirname, "src/scripts"), styles: path.join(__dirname, "src/styles"), img: path.join(__dirname, "src/img") }, root: [ path.join(__dirname, "bower_components") ] }, plugins: [ new webpack.ResolverPlugin( new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"]) ) ] }
resolve.root 表示添加默認搜索路徑,使用如下語法:
require("jquery");
webpack會在bower_components/jquery目錄下進行查找CommandJS模塊node_module/index.js、index.js
但是,因為Bower不屬于CommandJS規范范疇,使用的是bower.json main屬性指定項目入口文件
說到這里,大家就知道plugins里面那串東東是干嘛的啦
之后,我們就可以很方便在任何js文件里面引用jquery:
var jQuery = $ = require("jquery");
需要注意的是,require的并非jquery.js,而是bower_components目錄下的文件夾名
多頁面開發webpack 不僅僅適用于SPA開發,對于多頁面站點,webpack支持得很好,通過更改配置文件為多入口:
module.exports = { entry: { "entry":"./src/scripts/entry.js", "swiperEffect":"./src/scripts/swiperEffect.js" }, output: { path: "build" filename: "[name].bundle.js" } }
output設置里面,[name]代表entry的每一個鍵值,因此運行webpack時候,會輸出對應的兩個文件:
build/entry.bundle.js build/swiperEffect.bundle.js
然后就可以在index.html和about.html兩個頁面分別引用啦
文件分離前端工程一項就是減少http請求,這表示需要把多個js合并成一個,但是,單個js文件過大會影響瀏覽器加載文件速度,由于現在瀏覽器并發http請求多達6個,可以利用這個特性,將可復用第三方資源庫分離加載。
使用CommandJS規范的
//entry.js require.ensure(["jquery", "imgScroll"], function(require){ var $ = require("jquery"); require("imgScroll"); $("#container").scroll({ XXX }) })
通過require.ensure聲明的文件,稱作按需加載依賴,這些依賴會獨立出來一個文件,待入口模塊加載完,需要請求時候才會相繼加載
再次編譯webpack:
build/entry.bundle.js build/swiperEffect.bundle.js build/2.2.bundle.js
其中2.2.bundle.js就是jquery+imgScroll異步加載內容
一圖勝千言:
可以看到2.2.bundle.js在entry.bundle.js加載完后進行異步加載。
webpack 實用命令除了簡單運行webpack,還可以添加幾個參數,方便部署文件處理。
輸出js文件,經過uglify進行壓縮:
> webpack -p
自動監聽變化,動態運行webpack編譯:
> webpack --watch
通常Dev階段,使用--watch配合live-server就可以自動化開發繁瑣的窗口切換與回車。
以上僅僅介紹了webpack前端開發最基本的用法,更多參數以及功能使用,參考官網
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86202.html
摘要:還可以用作文件加載使用,詳細請看。實用命令除了簡單運行,還可以添加幾個參數,方便部署文件處理。以上僅僅介紹了前端開發最基本的用法,更多參數以及功能使用,參考官網 作者:Jogis原文鏈接:https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...
摘要:還可以用作文件加載使用,詳細請看。實用命令除了簡單運行,還可以添加幾個參數,方便部署文件處理。以上僅僅介紹了前端開發最基本的用法,更多參數以及功能使用,參考官網 作者:Jogis原文鏈接:https://github.com/yesvods/Blog/issues/3轉載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...
摘要:開發這樣一款加載器最大原因,就是為了代碼分離以及靜態資源模塊化無縫接合。異步方式,將依賴分割成多個節點,然后每個節點形成一個新的文件塊。會處理最常見的模塊標準和。通過聲明依賴,可以選擇一個本地的版本,而不需要使用全局聲明的版本。 作者:Jogis 原文鏈接:https://github.com/yesvods/Blog/issues/2 轉載請注明原文鏈接以及作者信息 模塊加載器...
摘要:開發這樣一款加載器最大原因,就是為了代碼分離以及靜態資源模塊化無縫接合。異步方式,將依賴分割成多個節點,然后每個節點形成一個新的文件塊。會處理最常見的模塊標準和。通過聲明依賴,可以選擇一個本地的版本,而不需要使用全局聲明的版本。 作者:Jogis 原文鏈接:https://github.com/yesvods/Blog/issues/2 轉載請注明原文鏈接以及作者信息 模塊加載器...
閱讀 1711·2021-11-11 10:58
閱讀 4186·2021-09-09 09:33
閱讀 1257·2021-08-18 10:23
閱讀 1548·2019-08-30 15:52
閱讀 1625·2019-08-30 11:06
閱讀 1867·2019-08-29 14:03
閱讀 1507·2019-08-26 14:06
閱讀 2943·2019-08-26 10:39