資訊專欄INFORMATION COLUMN
?webpack ?安裝
命令行輸入
npm?install?webpack
配置文件?webpack.config.js
moudule.exports?=?{
??//Import?入口文件
??entry:?"./entry.js",
??//Output?dir?輸出目錄
??output:?{
????path:?"",//當(dāng)前目錄標(biāo)識(shí)：__dirname
????filename:?""
??}
??//dependency?依賴模塊
??module:?{
????loaders:?[
??????{
????????test:/.css$/,
????????loader:?"style!css"
??????}//規(guī)定某種文件類型的加載模塊
????]
??}
}
?模塊化
//遵循CMD規(guī)范 var?something?=?"something"; module.exports?=?something;?引入模塊
var?st?=?require("something");
console.log(st);//"something"
1.?style.css
body?{
??background:?#f00;
}
2.?CSS模塊引入
require("style!css!./style.css");
3.?安裝style-loader，css-loader
npm?install?style-loader?css-loader
4.?在項(xiàng)目配置中配置.css類型的加載器
//在配置文件的module屬性的loaders數(shù)組中加入一個(gè)配置
{
??test:?/.css$/,
??loader:?"style!css"
}
1.?啟用devtool插件，并用source-map跟蹤模塊
webpack?--devtool?source-map
2.?在配置文件中插入devtool的配置屬性
//在webpack.config.js返回的配置模塊中加入一對(duì)鍵值 devtool:?"source-map"
1.?安裝webpack-dev-server
npm?install?webpack-dev-server
2.?在項(xiàng)目目錄下運(yùn)行
webpack-dev-server
這樣執(zhí)行時(shí)會(huì)默認(rèn)的使用iframe模式，即在服務(wù)器提供的框架內(nèi)進(jìn)行自動(dòng)刷新頁面，需要訪問localhost:8080/webpack-dev-server目錄下的對(duì)應(yīng)網(wǎng)頁，如果要在localhost:8080下執(zhí)行自動(dòng)刷新，應(yīng)當(dāng)使用--inline模式，在命令行輸入
webpack-dev-server?--inline
1.?安裝babel插件
//將babel相關(guān)的模塊都安裝 npm?install?babel-loader?babel-core?babel-preset-es2015?--save-dev
2.?在配置文件中的進(jìn)行配置
//在配置文件中加入一個(gè)新的loader字段
{
??test:?/.js$/,
??loader:?"babel"
}
3.?建立并配置.babelrc文件
//在.babelrc文件中直接輸入
{
??"presets":?["es2015"]
}
PS：這樣配置會(huì)使所有的.js文件進(jìn)行一次轉(zhuǎn)換
這里的圖片壓縮是將超過限制（自定義）的圖片轉(zhuǎn)換成base64編碼的文檔。
1.?需要的插件為url-loader,而該插件依賴于file-loader，如果沒有，二者都需要安裝。
//先安裝file-loader（如果沒有） npm?install?file-loader?--save-dev //安裝url-loader npm?install?url-loader?--save-dev
2.?添加loaders字段
{
??test:?/.(jpg/png/gif)$/,
??loader:?"url-loader?limit=10000"
}//limit為文件大小限制,單位為bit
下載extract-text-webpack-plugin來實(shí)現(xiàn)css文件的打包
1.?下載插件
npm?install?extract-text-webpack-plugin?--save-dev
2.?配置etwp
//在配置文件中新建一個(gè)etwp的實(shí)例
var?etwp?=?new?require("extract-text-webpack-plugin");
//在plugins字段中引入
plugins:?[
??etwp
]
//在loaders字段中加入
{
??test:?/.css$/,
??loader:?etwp.extract("styles.css")//切記是調(diào)用etwp中的extract方法
}
common.js是將各個(gè)頁面中的公共模塊提取出來組成的集合，減少了模塊的重復(fù)調(diào)用
配置方法
//在配置文件中
var?buildCommon?=?new?require("webpack.optimize.CommonsChunkPlugin");
//配置不同的buddle.js輸出
entry:?{
??page1:?"./js/entry.js",
??page2:?"./js/entry2.js"
}
//在plugins字段中加入
plugins:?[
??buildCommon("common.js")
]
webpack官網(wǎng)
webpack中文文檔
原文鏈接
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80816.html
摘要：本身也是運(yùn)行在環(huán)境中的模塊，它通常會(huì)返回一個(gè)函數(shù)。這個(gè)命名規(guī)則和搜索優(yōu)先級(jí)順序在的中定義。那就等下一篇介紹吧，一篇文章有太多內(nèi)容，會(huì)讓人很乏的從入門到放棄四從入門到放棄二從入門到放棄三源代碼 此篇文章僅僅是整理自己接觸webpack的入門過程，可能有很多不正確的地方，希望大家諒解，并指出錯(cuò)誤幫助改進(jìn)。 對(duì)于webpack的介紹和前期對(duì)他的入門使用，我覺得官方（中文網(wǎng)）已經(jīng)介紹的很簡(jiǎn)單了...
摘要：本文適合的讀者現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機(jī)中的，都常見網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)的例子手淘，美柚。 本文適合的讀者??????? 現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機(jī)app中的，都常見h5網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)h5的例子：（手淘，美柚）。這些app中都嵌者數(shù)以百計(jì)，千計(jì)的...
摘要：本文適合的讀者現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機(jī)中的，都常見網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)的例子手淘，美柚。 本文適合的讀者??????? 現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機(jī)app中的，都常見h5網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)h5的例子：（手淘，美柚）。這些app中都嵌者數(shù)以百計(jì)，千計(jì)的...
摘要：本文適合的讀者現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機(jī)中的，都常見網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)的例子手淘，美柚。 本文適合的讀者??????? 現(xiàn)在在手淘，京東，今日頭條，美柚等過億用戶的手機(jī)app中的，都常見h5網(wǎng)頁，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)h5的例子：（手淘，美柚）。這些app中都嵌者數(shù)以百計(jì)，千計(jì)的...
閱讀 2848·2021-10-11 11:08
閱讀 1556·2021-09-30 09:48
閱讀 1116·2021-09-22 15:29
閱讀 1100·2019-08-30 15:54
閱讀 1058·2019-08-29 15:19
閱讀 590·2019-08-29 13:12
閱讀 3233·2019-08-26 13:53
閱讀 1035·2019-08-26 13:28
