webpack隨筆紀(jì)要

webpack安裝前提條件:

安裝node.js環(huán)境

webpack安裝過(guò)程:

npm install -g webpack? 安裝webpack到全局環(huán)境中(缺點(diǎn):webpack官方不建議安裝到全局,這樣會(huì)影響項(xiàng)目菇晃,如果之前的項(xiàng)目使用的是webpack低版本,那會(huì)導(dǎo)致低版本使用了安裝在全局環(huán)境中的webpack版本)

webpack安裝到局部環(huán)境(注意:項(xiàng)目目錄名稱不能是webpack關(guān)鍵字)

1.cd 進(jìn)入項(xiàng)目目錄

2.npm init(初始化環(huán)境,默認(rèn)需要填寫一堆基本信息)

3.npm install --save-dev webpack(使用--save-dev是開發(fā)環(huán)境,如果需要使用生產(chǎn)環(huán)境則直接使用--save)

webpack打包項(xiàng)目過(guò)程(以下目錄都要有的目錄)

1.dist(用于生產(chǎn)環(huán)境让腹,也就是打包后的文件目錄)

2.src(用戶開發(fā)環(huán)境蜓斧,也就是書寫的代碼都放在此目錄下)

3.在dist目錄下新建一個(gè)index.html文件并在里面書寫html代碼,同時(shí)在結(jié)尾加上一段<script src="./bundle.js"></script>

4.在src目錄下新建一個(gè)entery.js并寫入document.getElementById("title").innerHTML = "Hello World";? (其中entery.js為入口文件)

5.命令行使用webpack src/entery.js dist/bundle.js? (解析:webpack 要打包的文件? 打包后的目標(biāo)文件睬涧,webpack最新版需要使用webpack -o 要打包的文件? 打包后的目標(biāo)文件)

6.安裝live-server(nmp install -g live-server)

7.運(yùn)行l(wèi)ive-server會(huì)打開瀏覽器進(jìn)行預(yù)覽

△真正項(xiàng)目上不是上面這樣用,上面是簡(jiǎn)單的做一下打包旗唁,下面是在項(xiàng)目中會(huì)用到的方式進(jìn)行打包的過(guò)程

注意:要使用webpack.conf.js配置文件,需要在package.js中的scripts選項(xiàng)加入"build": "webpack --config webpack.conf.js",然后直接使用npm run build即可進(jìn)行打包

1.在項(xiàng)目根目錄下新建webpack.conf.js,該文件里的內(nèi)容:

//引入node的path模塊

const path=require("path");

module.exports={

? ? //入口配置項(xiàng)

? ? entry:{

? ? ? ? //入口文件路徑

? ? ? ? index1:path.join(__dirname, "./src/index1.js"),

? ? ? ? index2:path.join(__dirname, "./src/index2.js"),

? ? },

? ? //出口配置項(xiàng)

? ? output:{

? ? ? ? //輸入的目標(biāo)路徑

? ? ? ? filename: "[name].bundle.js",

? ? ? ? path:path.resolve(__dirname, "dist")

? ? },

? ? //模塊配置項(xiàng)

? ? module:{},

? ? //插件配置項(xiàng)

? ? plugins:[],

? ? //webpack開發(fā)服務(wù)項(xiàng)

? ? devServer:{}

}

△webpack的熱更新

1.在webpack.conf.js的devServer中加入以下參數(shù):

devServer:{

? ? //需要熱更新的目錄路徑

? ? contentBase:path.resolve(__dirname, "dist"),

? ? //熱更新訪問地址

? ? host:"192.168.3.10",

? ? //熱更新端口

? ? port:1717,

? ? //熱更新是否壓縮(服務(wù)器端)

? ? compress:true

}

2.使用熱更新需要環(huán)境中安裝webpack-dev-server服務(wù),如果該服務(wù)需要安裝到當(dāng)前項(xiàng)目中,直接使用nmp install webpack-dev-server --save-dev(開發(fā)環(huán)境,--save安裝到上線環(huán)境),

安裝完成之后,需要在目錄中的package.json中的scripts選項(xiàng)中配置一個(gè)別名

"dev": "webpack-dev-server --config webpack.conf.js"

3.運(yùn)行npm run dev,

如果不這樣配置會(huì)報(bào)錯(cuò)畦浓,說(shuō)找不到入口(完成后,直接訪問http://192.168.3.10:1717即可,就可以完成熱更新操作)

△打包CSS3文件

1.打包c(diǎn)ss文件需要安裝style-loader、css-loader模塊(執(zhí)行npm install style-loader --save-dev检疫、npm install css-loader --save-dev)

2.在入口文件所在目錄中新建css文件夾并在該文件夾中新建樣式文件,然后在入口js文件中使用import css from 路徑(該路徑必須為相對(duì)路徑)

3.在webpack.conf.js文件的modules選項(xiàng)中配置如下參數(shù):

rules:[

? ? ? ? ? ? {

? ? ? ? ? ? ? ? //正則表達(dá)式,匹配對(duì)應(yīng)后綴名的文件

? ? ? ? ? ? ? ? test:/\.css$/,

? ? ? ? ? ? ? ? //使用什么loader模塊進(jìn)行打包

? ? ? ? ? ? ? ? use:['style-loader', 'css-loader']

? ? ? ? ? ? }

? ? ? ? ]

例外兩種寫法:

rules:[

? ? ? ? ? ? {

? ? ? ? ? ? ? ? //正則表達(dá)式,匹配對(duì)應(yīng)后綴名的文件

? ? ? ? ? ? ? ? test:/\.css$/,

? ? ? ? ? ? ? ? //使用什么loader模塊進(jìn)行打包

? ? ? ? ? ? ? ? loader:['style-loader', 'css-loader']

? ? ? ? ? ? }

? ? ? ? ]

rules:[

? ? ? ? ? ? {

? ? ? ? ? ? ? ? //正則表達(dá)式,匹配對(duì)應(yīng)后綴名的文件

? ? ? ? ? ? ? ? test:/\.css$/,

? ? ? ? ? ? ? ? //使用什么loader模塊進(jìn)行打包

? ? ? ? ? ? ? ? loader:[{

? ? ? ? ? ? ? ? ? ? loader:"style-loader"

? ? ? ? ? ? ? ? },{

? ? ? ? ? ? ? ? ? ? loader:"css-loader"

? ? ? ? ? ? ? ? }]

? ? ? ? ? ? }

? ? ? ? ]

△打包壓縮js文件

1.執(zhí)行npm install uglifyjs-webpack-plugin --save-dev進(jìn)行安裝并保存到package.json中

2.在webpack.conf.js頂部中引入:

const uglify = require("uglifyjs-webpack-plugin");

3.plugins中寫上new uglify();

4.執(zhí)行打包指令進(jìn)行打包

△打包html文件

1.執(zhí)行npm install html-webpack-plugin --save-dev

2.在webpack.conf.js中引入const htmlPlugin = require('html-webpack-plugin');

3.將原來(lái)在dist目錄下的index.html剪切到src目錄下并將index.html文件中引入的js文件去掉(因?yàn)榇虬鰜?lái)的文件webpack會(huì)自動(dòng)引入js文件宅粥,無(wú)須我們手動(dòng)添加)

4.在webpack.conf.js中的plugins屬性中輸入如下:

new htmlPlugin({

? ? minify:{

? ? ? ? //去掉html文件中引號(hào)(單引號(hào)、雙引號(hào)都會(huì)去除)

? ? ? ? removeAttrubuteQuotes:true

? ? },

? ? //防止js文件有緩存电谣,所以會(huì)在js文件后加入?hash值(熱更新的時(shí)候hash值會(huì)改變)

? ? hash:true,

? ? //需要打包的html文件

? ? template:"./src/index.html"

});

△CSS文件中的圖片處理

1.執(zhí)行npm install file-loader url-loader --save-dev , (這兩個(gè)是解析圖片用的loader,這兩個(gè)loader只需要引入url-loader即可,以為url-loader里已經(jīng)包含了file-loader,他們之間會(huì)自動(dòng)轉(zhuǎn)換)

2.在webpack.conf.js中module中添加(如果圖片小于limit的大小會(huì)把圖片轉(zhuǎn)成base64的格式打包進(jìn)js中,如果大于limit會(huì)直接把圖片放入dist目錄中,outputPath指的是超出limit大小會(huì)把圖片放到該目錄下,并將該路徑打包到j(luò)s文件中):

module:{

? ? rules:[{

? ? ? ? test:/\.(png|jpg|gif)$/,

? ? ? ? use:[{

? ? ? ? ? ? loader:"url-loader",

? ? ? ? ? ? options:{

? ? ? ? ? ? ? ? limit:500000,

? ? ? ? ? ? ? ? outputPath:'images/'

? ? ? ? ? ? }

? ? ? ? }]

? ? }]

}

3:在src下新建一個(gè)images文件夾,并把背景圖片bg.jpg放入該文件夾中

4:在src/css/style.css文件中設(shè)置一個(gè)背景圖片:

body{

? ? background:url(../images/bg.jpg) no-repeat;

}

5.運(yùn)行l(wèi)ive-server查看結(jié)果

△解決圖片路徑問題

1.運(yùn)行npm install extract-text-webpack-plugin --save-dev

2.定義const extractTextPlugin = require("extract-text-webpack-plugin");

3.在webpack.conf.js定義一個(gè)變量(這里的地址需要定義成devServer上的地址和端口)

var websit = {

? ? publicPath:"http://127.0.0.1:8080"

};

4.在webpack.conf.js中出口文件配置output選項(xiàng)中加入:

publicPath:website.publicPath

4.webpack.conf.js中將module中的值:

rules:[

? ? {

? ? ? ? test:/\.css$/,

? ? ? ? use: extractTextPlugin.extract({

? ? ? ? ? ? fallback: "style-loader",

? ? ? ? ? ? use: "css-loader"

? ? ? ? ? ? })

? ? }

]

5.webpack.conf.js中plugins的值增加(意思就是將抽離出來(lái)的css文件放入dist目錄下的css文件夾中):

new extractTextPlugin("css/style.css")

4.然后打包,會(huì)發(fā)現(xiàn)打包出來(lái)的index.html中的路徑會(huì)變成絕對(duì)路徑

注意:安裝extract-text-webpack-plugin,如果webpack版本小于4.0可以直接使用npm install extract-text-webpack-plugin --save-dev進(jìn)行安裝,

如果是webpack4.0之后的版本需要使用npm install extract-text-webpack-plugin@next --save-dev進(jìn)行安裝即可

△解決html圖片的問題

1.運(yùn)行npm install html-withimg-loader --save-dev

2.在webpack.conf.js中的module加入:

{

? ? test: /\.(htm|html)$/i,

? ? use:[ 'html-withimg-loader']

}

3.在src/index.html加入<img src="./images/bg.js"/>

4.運(yùn)行打包操作,打包完成后會(huì)發(fā)現(xiàn)src的url也會(huì)打進(jìn)去了

注意:此模塊要結(jié)合extract-text-webpack-plugin進(jìn)行使用秽梅,就可以解決圖片的路徑問題

△分離less文件到css文件中

1.運(yùn)行npm install less less-loader --save-dev

2.在src/css目錄下新建style.less文件,寫入:

@bgcolor:red;

#div-title{

? ? width:100px;

? ? height:100px;

? ? background-color:@bgcolor;

}

3.在入口文件(index.js)中引入該less文件:import less from "./css/style.less";

4.在webpack.conf.js中module中將加入:

{

? ? test:/\.(less)$/,

? ? use: extractTextPlugin.extract({

? ? ? ? fallback: "style-loader",

? ? ? ? use: extractTextPlugin.extract({

? ? ? ? ? ? fallback: "style-loader",

? ? ? ? ? ? use: [{

? ? ? ? ? ? ? ? loader:"css-loader"

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? loader:"less-loader"

? ? ? ? ? ? }]

? ? ? ? })

? ? })

}

5.打包測(cè)試

注意:less打包也需要配合extract-text-webpack-plugin進(jìn)行使用與輸出

△分離sass文件到css文件中

sass中分兩種語(yǔ)法:

sass語(yǔ)法:不能帶大括號(hào)、分號(hào)剿牺,不然會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤企垦,如,

#abc

? ? width: 100px

? ? height: 100px

注意:width: 100px中:后必須要有空格否則會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤晒来,這點(diǎn)值得注意

scss語(yǔ)法:跟原來(lái)css寫法一樣

1.運(yùn)行npm install node-sass sass-loader --save-dev

2.在src/css目錄下新建style.scss文件,寫入:

$fontColor:red;

#div-title{

? ? color:$fontColor;

}

3.在入口文件(index.js)中引入該sass文件:import sass from "./css/style.scss";

4.在webpack.conf.js中module中將加入:

{

? ? test:/\.(sass|scss)$/,

? ? use: extractTextPlugin.extract({

? ? ? ? fallback: "style-loader",

? ? ? ? use: extractTextPlugin.extract({

? ? ? ? ? ? fallback: "style-loader",

? ? ? ? ? ? use: [{

? ? ? ? ? ? ? ? loader:"css-loader"

? ? ? ? ? ? },

? ? ? ? ? ? {

? ? ? ? ? ? ? ? loader:"sass-loader"

? ? ? ? ? ? }]

? ? ? ? })

? ? })

}

5.打包測(cè)試

注意:sass打包也需要配合extract-text-webpack-plugin進(jìn)行使用與輸出

△給需要css3屬性加上前綴

1.執(zhí)行npm install postcss-loader autoprefixer --save-dev

2.在項(xiàng)目根目錄下新建名為postcss.config.js文件,并在里面寫入:

module.exports={

? ? plugins:[

? ? ? ? //安裝的插件名稱

? ? ? ? require("autoprefixer")

? ? ]

}

3.在webpack.conf.js的module的rules下.css規(guī)則下加入:

{

? ? loader:"postcss-loader"

}

這種寫法可以在后面加入其它參數(shù)選項(xiàng),還可以使用這種方式:

"postcss-loader"

4.在.css文件中加入存在兼容問題的屬性:

transform: rotate(45deg);

appearance: none;

5.打包測(cè)試

注意:如果打包沒問題钞诡,一般css文件中就會(huì)自動(dòng)給需要加前綴的屬性加上前綴,如:

-webkit-transform: rotate(45deg);

? ? ? ? transform: rotate(45deg);

-webkit-appearance: none;

? ? -moz-appearance: none;

? ? ? ? appearance: none;

△刪除沒用使用過(guò)的css樣式(冗余樣式)

1.執(zhí)行npm install purifycss-webpack purify-css --save-dev(--save-dev等價(jià)于-D)

2.在webpack.conf.js文件中加入:

const glob = require("glob");

const PurifyCSSPlugin = require("purifycss-webpack");

3.在webpack.conf.js的plugins中加入:

new PurifyCSSPlugin({

? ? //通過(guò)這個(gè)插件檢索src下所有html文件沒有使用到的css屬性進(jìn)行刪除

? ? paths:glob.sync(path.join(__dirname, "src/*.html"))

})

4.打包測(cè)試

△使用devtool進(jìn)行調(diào)試

在webpack.conf.js中加入?yún)?shù):

devtool:'cheap-source-map'

具體的參數(shù)值參考https://blog.csdn.net/qq_39963971/article/details/78218970

△引入jquery

方法一(局部引入):

1.執(zhí)行npm install jquery --save-dev

2.在入口文件引入jquery

import $ from 'jquery';

3.使用jquery進(jìn)行常規(guī)操作即可

方法二(全局引入):

1.執(zhí)行npm install jquery --save-dev

2.在webpack.conf.js中引入

const webpack = require('webpack');

3.在webpack.conf.js的plugins中使用:

new webpack.ProvidePlugin({

? ? ? ? $:"jquery"

? ? })

4.使用jquery進(jìn)行常規(guī)操作即可

△使用BannerPlugin聲明版權(quán)信息

1.在webpack.conf.js中引入webpack:

const webpack = require("webpack");

2.在webpack.conf.js中plugins中聲明版權(quán)信息:

new webpack.BannerPlugin('JS版權(quán)所有湃崩,看官方免費(fèi)視頻到j(luò)s.com收看')

△使用ProvidePlugin引入插件

1.執(zhí)行npm install jquery --save-dev

2.webpack.conf.js中entry中加入:

jquery:'jquery'

2.在webpack.conf.js中引入webpack

const webpack = require("webpack");

3.在webpack.conf.js的entry中引用:

jquery:'jquery'

4.在webpack.conf.js的plugins中引入插件:

//(4.0之前版本)

new webpack.optimize.CommonsChunkPlugin({

? ? //name對(duì)應(yīng)入口文件中的名字荧降,我們起的是jQuery,多個(gè)插件用['jquery', 'vue']

? ? name:'jquery',

? ? //把文件打包到哪里,是一個(gè)路徑,多個(gè)插件用filename:"dist/js/[name].js",

? ? filename:"dist/js/jquery.js",

? ? //最小打包的文件模塊數(shù)攒读,這里直接寫2就好

? ? minChunks:2

})

//(4.0版本之后),要與entry和devServer平級(jí)

optimization:{

? ? ? ? splitChunks:{

? ? ? ? ? ? cacheGroups:{

? ? ? ? ? ? ? ? commons:{

? ? ? ? ? ? ? ? ? ? name:'jquery',

? ? ? ? ? ? ? ? ? ? filename:"dist/js/jquery.js",

? ? ? ? ? ? ? ? ? ? minChunks:2

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? //如果抽離多個(gè)類庫(kù)寫在這里

? ? ? ? ? ? }

? ? ? ? }

? ? }

△靜態(tài)資源集中輸出

1.執(zhí)行npm install copy-webpack-plugin --save-dev

2.在webpack.conf.js引入安裝好的插件

const copyWebpackPlugin = require("copy-webpack-plugin");

3.在webpack.conf.js中plugins中引入:

new copyWebpackPlugin([{

? ? //需要打包的目錄

? ? from: __dirname + "/src/public",

? ? //目標(biāo)目錄,使用相對(duì)路徑即可,相對(duì)于打包后的路徑

? ? to: "./public"

}])

4.在項(xiàng)目根目錄下新建public目錄,隨便新建一個(gè)文件,進(jìn)行打包測(cè)試

△引入json文件

1.在src下新建一個(gè)文件名叫config.json,內(nèi)容為:

{

? ? "name":"張三",

? ? "age":24,

? ? "sex":"男"

}

2.在入口文件使用:

var json = require("./config.json");

3.使用alert打印json里的屬性

△啟動(dòng)webpack中的熱更新

1.在webpack.conf.js引入:

const webpack = require("webpack");

2.在webpack.conf.js中的plugins加入:

new webpack.HotModuleReplacementPlugin()

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末朵诫,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子薄扁,更是在濱河造成了極大的恐慌剪返,老刑警劉巖从橘,帶你破解...
    沈念sama閱讀 212,080評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件磁餐,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡霍衫,警方通過(guò)查閱死者的電腦和手機(jī)董栽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門叶眉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)黑竞,“玉大人眨层,你說(shuō)我怎么就攤上這事∶娓纾” “怎么了哎壳?”我有些...
    開封第一講書人閱讀 157,630評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)幢竹。 經(jīng)常有香客問我耳峦,道長(zhǎng)恩静,這世上最難降的妖魔是什么焕毫? 我笑而不...
    開封第一講書人閱讀 56,554評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮驶乾,結(jié)果婚禮上邑飒,老公的妹妹穿的比我還像新娘。我一直安慰自己级乐,他們只是感情好疙咸,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,662評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著风科,像睡著了一般撒轮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上贼穆,一...
    開封第一講書人閱讀 49,856評(píng)論 1 290
  • 那天题山,我揣著相機(jī)與錄音,去河邊找鬼故痊。 笑死顶瞳,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的愕秫。 我是一名探鬼主播慨菱,決...
    沈念sama閱讀 39,014評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼戴甩!你這毒婦竟也來(lái)了符喝?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,752評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤甜孤,失蹤者是張志新(化名)和其女友劉穎洲劣,沒想到半個(gè)月后备蚓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,212評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡囱稽,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,541評(píng)論 2 327
  • 正文 我和宋清朗相戀三年郊尝,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片战惊。...
    茶點(diǎn)故事閱讀 38,687評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡流昏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出吞获,到底是詐尸還是另有隱情况凉,我是刑警寧澤,帶...
    沈念sama閱讀 34,347評(píng)論 4 331
  • 正文 年R本政府宣布各拷,位于F島的核電站刁绒,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏烤黍。R本人自食惡果不足惜知市,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,973評(píng)論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望速蕊。 院中可真熱鬧嫂丙,春花似錦、人聲如沸规哲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,777評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)唉锌。三九已至隅肥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間袄简,已是汗流浹背腥放。 一陣腳步聲響...
    開封第一講書人閱讀 32,006評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留痘番,地道東北人捉片。 一個(gè)月前我還...
    沈念sama閱讀 46,406評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像汞舱,于是被迫代替她去往敵國(guó)和親伍纫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,576評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容