摘要:了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊,返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。
了解Webpack相關(guān)
什么是webpack
Webpack是一個(gè)模塊打包器(bundler)。
在Webpack看來(lái), 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理
它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析,生成對(duì)應(yīng)的靜態(tài)資源
理解Loader
Webpack 本身只能加載JS模塊,如果要加載其他類型的文件(模塊),就需要使用對(duì)應(yīng)的loader 進(jìn)行轉(zhuǎn)換/加載
Loader 本身也是運(yùn)行在 node.js 環(huán)境中的 JavaScript 模塊
它本身是一個(gè)函數(shù),接受源文件作為參數(shù),返回轉(zhuǎn)換的結(jié)果
loader 一般以 xxx-loader 的方式命名,xxx 代表了這個(gè) loader 要做的轉(zhuǎn)換功能,比如 json-loader。
配置文件(默認(rèn))
webpack.config.js : 是一個(gè)node模塊,返回一個(gè) json 格式的配置信息對(duì)象
插件
插件件可以完成一些loader不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定。
Webpack 本身內(nèi)置了一些常用的插件,還可以通過(guò) npm 安裝第三方插件
學(xué)習(xí)文檔 :
webpack官方入門: http://webpack.github.io/docs...
Webpack中文指南: http://zhaoda.net/webpack-han...
你將學(xué)到:
How to install webpack
How to use webpack
How to use loaders
How to use the development server
How to use image
初始化項(xiàng)目: package.json
</>復(fù)制代碼
{
"name": "webpack_test",
"version": "1.0.0"
}
安裝webpack
</>復(fù)制代碼
npm install webpack@1 -g //全局安裝
npm install webpack@1 --save-dev //局部安裝
開(kāi)始編譯
創(chuàng)建入口src/js/ : entry.js
</>復(fù)制代碼
document.write("entry.js is work");
創(chuàng)建主頁(yè)面 build/: index.html
</>復(fù)制代碼
編譯js
</>復(fù)制代碼
webpack src/js/entry.js build/js/build.js
查看頁(yè)面效果
第二個(gè)js
創(chuàng)建第二個(gè)js: src/js/content.js
</>復(fù)制代碼
module.exports = "
It works from content.js";
更新入口js : entry.js
</>復(fù)制代碼
* document.write("entry.js is works.");
* document.write(require("./content.js"));
編譯js:
</>復(fù)制代碼
webpack src/js/entry.js build/js/build.js
查看頁(yè)面效果
第一個(gè)加載器(loader)
安裝樣式的loader
</>復(fù)制代碼
npm install css-loader style-loader --save-dev
創(chuàng)建樣式文件: src/css/test.css
</>復(fù)制代碼
body {
background: red;
}
更新入口js : entry.js
</>復(fù)制代碼
+ require("style-loader!css-loader!../css/test.css");
* document.write("entry.js is works.");
* document.write(require("./content.js"));
編譯js, 并查看頁(yè)面效果
</>復(fù)制代碼
webpack src/js/entry.js build/js/bundle.js
綁定加載器
更新入口js : entry.js
</>復(fù)制代碼
- require("style-loader!css-loader!./test.css");
+ require("./test.css");
編譯:
</>復(fù)制代碼
webpack src/js/entry.js build/js/bundle.js --module-bind css=style-loader!css-loader
查看頁(yè)面效果
使用webpack配置文件
創(chuàng)建webpack.config.js
</>復(fù)制代碼
module.exports = {
entry: "./src/js/entry.js",//入口路徑配置
output: {//出口配置
path: __dirname + "/build/js",//輸出路徑
filename: "bundle.js"http://輸出文件名
},
module: {
loaders: [//模塊加載器配置
{ test: /.css$/, loader: "style!css"} //所有css文件聲明使用css-loader和style-loader加載器
]
}
};
編譯
</>復(fù)制代碼
webpack
webpack --progress //編譯顯示進(jìn)度
問(wèn)題---每次修改模塊文件內(nèi)容的重新手動(dòng)打包,刷新
自動(dòng)編譯
</>復(fù)制代碼
webpack --watch //編譯并啟動(dòng)監(jiān)視(但需要刷新瀏覽器)
瀏覽器自動(dòng)刷新(熱加載)----解決手動(dòng)刷新瀏覽器問(wèn)題
</>復(fù)制代碼
npm install webpack-dev-server@1 -g
webpack-dev-server
訪問(wèn): http://localhost:8080/webpack-dev-server/
; http://localhost:8080
!!!發(fā)現(xiàn)問(wèn)題----訪問(wèn)的是文件夾路徑而不是頁(yè)面
devServer:{
contentBase: "./build",//內(nèi)置服務(wù)器動(dòng)態(tài)加載頁(yè)面所在的目錄
historyApiFallback:true,//不跳轉(zhuǎn)
inline:true
}
contentBase : 默認(rèn)webpack-dev-server為根文件夾提供內(nèi)置的服務(wù),如果其他目錄下的文件
提供服務(wù)需要在此設(shè)置目錄(我們?cè)O(shè)置為build文件夾)
historyApiFallback : 開(kāi)發(fā)單頁(yè)面的時(shí)候非常有用,它依賴于H5的 history API,當(dāng)
設(shè)置為true的時(shí)候所有的跳轉(zhuǎn)都指向index.html;
port:可以設(shè)置端口號(hào),不設(shè)置時(shí)候默認(rèn)為 8080
inline : 設(shè)置為true的時(shí)候回自動(dòng)刷新(有的版本需要配合hot : true使用)
webpack-dev-server
訪問(wèn): http://localhost:8080
問(wèn)題:頁(yè)面沒(méi)有熱加載,自動(dòng)刷新,因?yàn)閕ndex的src引入的硬盤中的build文件而不是webpack-dev-server服務(wù)器內(nèi)存中的build
特點(diǎn):
自動(dòng)編譯并刷新界面
不生成編譯后的文件, 直接在內(nèi)存中編譯處理, 并啟動(dòng)服務(wù)器運(yùn)行項(xiàng)目
加載圖片
安裝依賴的loader
</>復(fù)制代碼
npm install url-loader file-loader --save-dev
url-loader比f(wàn)ile-loader功能更加完善是對(duì)file-loader的上層封裝,但二者需配合使用
添加config中l(wèi)oader的配置
</>復(fù)制代碼
{ test: /.(png|jpg)$/, loader: "url-loader?limit=8192" } //如果圖片小于limit就會(huì)進(jìn)行Base64編碼
拷入2張圖片:
小圖: img/logo.png
大圖: img/big.jpg
定義引用圖片的樣式: test.css
</>復(fù)制代碼
#box1{
background-image: url(../img/logo.jpg);
height: 200px;
width: 200px;
}
#box2{
background-image: url(../img/big.jpg);
height: 200px;
width: 200px;
}
在頁(yè)面引用樣式或圖片: index.html
</>復(fù)制代碼
編譯并瀏覽
</>復(fù)制代碼
webpack-dev-server
圖片打包問(wèn)題
</>復(fù)制代碼
1、圖片大于8kb的時(shí)候無(wú)法打包到j(luò)s文件中,
2、index.html引入js的時(shí)候發(fā)現(xiàn)沒(méi)有打包進(jìn)去的圖片路徑不對(duì)
3、解決方法:
* //publicPath : "./js/",//webpack的絕對(duì)路徑,設(shè)置服務(wù)index.html資源的路徑
配置npm script命令
</>復(fù)制代碼
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
}
npm start: 編譯運(yùn)行項(xiàng)目
npm build: 編譯打包
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51012.html
摘要:了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊,返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來(lái), 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...
摘要:了解相關(guān)什么是是一個(gè)模塊打包器。配置文件默認(rèn)是一個(gè)模塊,返回一個(gè)格式的配置信息對(duì)象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息選項(xiàng)中指定。 了解Webpack相關(guān) 什么是webpack Webpack是一個(gè)模塊打包器(bundler)。 在Webpack看來(lái), 前端的所有資源文件(js/css/img/less/...)都會(huì)作為模塊處理 它將根據(jù)模塊的依...
摘要:如使用插件為我們自動(dòng)生成一個(gè)文件。安裝使用生產(chǎn)和開(kāi)發(fā)構(gòu)建分離生產(chǎn)和開(kāi)發(fā)中的構(gòu)建肯定是不同,生產(chǎn)中側(cè)重于一個(gè)更好的開(kāi)發(fā)體驗(yàn),而生產(chǎn)環(huán)境中則需要更多的性能優(yōu)化,更小的。可以指定命令運(yùn)行以來(lái)的配置文件,通過(guò)在中寫(xiě)入是一種不錯(cuò)的方式。 原文地址:https://github.com/huruji/blog/issues/3 入口 單文件入口指定entry鍵值 const config = { ...
摘要:主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代,和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。 主要作用:目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試 在如今前端技術(shù)飛速發(fā)展的時(shí)代,angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue,小生表示可以理解,如果作為中國(guó)的前端猿不知道 vue,...
摘要:主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代,和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。 主要作用:目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試 在如今前端技術(shù)飛速發(fā)展的時(shí)代,angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue,小生表示可以理解,如果作為中國(guó)的前端猿不知道 vue,...
閱讀 840·2019-08-30 15:55
閱讀 1414·2019-08-30 13:55
閱讀 1993·2019-08-29 17:13
閱讀 2847·2019-08-29 15:42
閱讀 1336·2019-08-26 14:04
閱讀 1025·2019-08-26 13:31
閱讀 3276·2019-08-26 11:34
閱讀 837·2019-08-23 18:25
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要