webpack 4.x

1. 安裝

webpack是基于node所以首先要安裝node環(huán)境和npm

安裝webpack 4 需要 安裝webpack 和webpack-cli
全局安裝 :

npm install webpack -g
npm install webpack-cli -g

局部安裝:

npm install webpack -S
npm install webpack-cli -S

同時局部安裝:

npm install webpack webpack-cli -S

安裝完成后可以運行 webpack -v 查看webpack 版本
運行項目需要全局安裝 webpack 然后在項目跟目錄內(nèi)局部 安裝

二墩蔓、webpack 打包

1、首先我們創(chuàng)建個 demo1文件夾作文項目目錄 然后在demo1里創(chuàng)建 src 文件夾
默認(rèn)出口entry : src/index.js
默認(rèn)出口output : dist/main.js
2、局部安裝webpack

npm install webpack wabpack-cli -S

3待侵、初始化項目生成package.json 執(zhí)行以下命令

npm init

4知市、在src 目錄下創(chuàng)建一個 index.js 表示默認(rèn)的入口文件放航,此時的目錄結(jié)構(gòu)如下


image.png

5语淘、在index.js 寫入

alert("webpack")

6妇汗、啟動命令行栅炒,進(jìn)入項目目錄 運行webpack命令進(jìn)行打包

image.png

執(zhí)行完成出現(xiàn)以下內(nèi)容表示成功掂摔,同時項目根目錄多出dist目錄
image.png

此時的項目目錄結(jié)構(gòu) mian.js 就是打包后的文件

image.png

此時我們新建 index.html 并引入 mian.js

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

打開html將彈出 webpack

webpack配置

在根目錄新建 webpack.cofig.js

var path = require('path');
module.exports = {
    mode: 'development', //模式
    //入口
    entry: './src/index.js',
    //入口
    output: {   
        path: path.resolve(__dirname, 'dist'),  //出口路徑
        filename: 'main.js' //打包好的文件名
    },
    //模塊:例如解讀css,圖片赢赊,html的轉(zhuǎn)換壓縮
    module:{},
    //插件
    plugins:[],
    //本地服務(wù)器
    devServer:{}
};

webpack-dev-server 本地服務(wù)器

安裝 webpack-dev-server

npm install webpack-dev-server -S

修改package.json文件 在scripts 對象下添加以下屬性

"scripts": {
  //運行 npm run dev 啟動服務(wù)器 --自動打開瀏覽器 --并且實時刷新
  "dev": "webpack-dev-server --open --inline"
},

配置webpack.config.js devServer對象最簡單的devServer配置項只有四個


//本地服務(wù)器
devServer:{
  //服務(wù)器的路徑乙漓,相當(dāng)于phpStudy的www目錄
  contentBase:'./',
  //服務(wù)器ip地址,不指定該選項默認(rèn)就是localhost
  host:'localhost',
  //端口释移,不指定自動生成叭披,默認(rèn)8080
  port:8080,
  //實時刷新
  inline:true
}

執(zhí)行 npm run dev 將自動打開瀏覽器

npm run dev

loader

webpack 自身只理解 JavaScript,所以要打包非js文件如html、css玩讳、圖片等需要使用loader涩蜘,可以吧loader看做是轉(zhuǎn)換器

  • css 打包
    讓webpack識別 css 需要用到 css-loaderstyle-loader
    首先我們先不安裝 css-loader和style-loader嚼贡,在src目錄下新建 css目錄并創(chuàng)建 style.css
body{
    background-color: red;
}

在入口文件index.js中引入

import css from './css/style.css'

打包會報錯,大致意思是你缺少對應(yīng)loader來識別下面的樣式


image.png

然后安裝 css-loader 和 style-loader

npm install css-loader style-loader -S

配置 webpack.config.js

//模塊:例如解讀css同诫,圖片粤策,html的轉(zhuǎn)換壓縮
  module:{
    rules: [
        {
          test:/\.css$/,
          use:[
            {loader:'style-loader'},
            {loader:'css-loader'}
          ]
        }
    ]
  }

然后打包就成功了


image.png
css 圖片處理

我們在css里給body一個背景圖

body{
    background-color: red;
    background-image: url(../image/img2.png);
}

然后打包,會報錯误窖,依然是缺少解析圖片的loader叮盘,file-loaderurl-loader

image.png

解釋下:
file-loader:解決引用路徑的問題,拿background樣式用url引入背景圖來說霹俺,我們都知道熊户,webpack最終會將各個模塊打包成一個文件,因此我們樣式中的url路徑是相對入口html頁面的吭服,而不是相對于原始css文件所在的路徑的嚷堡。這就會導(dǎo)致圖片引入失敗。這個問題是用file-loader解決的艇棕,file-loader可以解析項目中的url引入(不僅限于css)蝌戒,根據(jù)我們的配置,將圖片拷貝到相應(yīng)的路徑沼琉,再根據(jù)我們的配置北苟,修改打包后文件引用路徑,使之指向正確的文件打瘪。

url-loader:如果圖片較多友鼻,會發(fā)很多http請求,會降低頁面性能闺骚。這個問題可以通過url-loader解決彩扔。url-loader會將引入的圖片編碼,生成dataURl僻爽。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符虫碉。再把這串字符打包到文件中,最終只需要引入這個文件就能訪問圖片了胸梆。當(dāng)然敦捧,如果圖片較大,編碼會消耗性能碰镜。因此url-loader提供了一個limit參數(shù)兢卵,小于limit字節(jié)的文件會被轉(zhuǎn)為DataURl,大于limit的還會使用file-loader進(jìn)行copy绪颖。

安裝url-loader和file-loader

npm install url-loader file-loader -S

配置 webpack.config.js

{
    test: /\.(png|jpg|gif|jpeg)/,
    use: [{
        loader: 'url-loader',
        options:
        {
            limit: 100000 //小于100kb 轉(zhuǎn)base64
        }
    }]
}

注意:只需配置 url-loader 即可秽荤,因為url-loader封裝了file-loader,

插件

html-webpack-plugin (用于模板生成html,自動引入output文件)

該插件會自動生成html入口文件并自動引入 出口 文件
安裝

npm install html-webpack-plugin -S

配置 webpack.config.js
1王滤、導(dǎo)入插件

var HtmlWebpackPlugin = require('html-webpack-plugin')

2贺嫂、實例化插件

//插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html',//本地模板文件的位置
            minify:{
              removeAttributeQuotes:true,//去除引號
              removeComments:true,//去除注釋
              removeEmptyAttributes:true,//去除空屬性
              collapseWhitespace:true//去除空格
            }
        })
    ]
image.png

我們將html 的引用 出口文件 的script標(biāo)簽刪掉在打包

<html>
<head>
    <title></title>
</head>
<body>
    <div class="warp"></div>
</body>
</html>

此時dist目錄會多出一個index.html 文件,并且此時已自動引入了出口文件雁乡,并進(jìn)行了代碼壓縮第喳、去除多余引號、去除注釋踱稍、去除空屬性曲饱、去除空格一系列操作

<!DOCTYPE html><html><head><title></title></head><body><div class=warp></div><script type=text/javascript src=main.js></script></body></html>

注意:如果不配置template 那么生成的index.html將沒有 內(nèi)容(<div class="warp"></div>)僅僅只是

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type=text/javascript src=main.js></script>
</body>
</html>
html的img

我們在index.html中引用一個圖片打包后路徑是不對的,這時就需要 html-withimg-loader珠月,來解決引用圖片路徑不對問題扩淀,
安裝 html-withimg-loader

npm install html-withimg-loader -S

配置webapck.config.js loader

{
    test: /\.html$/,
    use: [{
        loader: 'html-withimg-loader'
    }]
}

最后打包html圖片路徑問題已解決

加載字體

那么,像字體這樣的其他資源如何處理呢啤挎?file-loader 和 url-loader 可以接收并加載任何文件驻谆,然后將其輸出到構(gòu)建目錄。這就是說庆聘,我們可以將它們用于任何類型的文件胜臊,包括字體

  • 下載奧森圖標(biāo) 放入 src目錄下


    image.png
  • 入口文件 index.js中引入 font-awesome.css
import './css/font-awesome.css';

index.html里 添加個圖標(biāo)

<i class='fa fa-shield'></i>
  • 打包這時候會報錯,無法識別字體伙判,需要配置loader


    image.png
  • 配置webapck.config.js

{
    test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
    use: [
        'url-loader'
    ]
}

最后打包一切ok象对,

提取css

如果不想 css 打包在js里可以使用插件 extract-text-webpack-plugin

  • 安裝
npm install extract-text-webpack-plugin@next -S

注意 webpack4.x要加 @naxt

  • 入口文件index.js導(dǎo)入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin')
  • 配置webapck.config.js
  1. 初始化插件 傳入一個參數(shù) 打包后的css文件名
//插件
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html', //本地模板文件的位置
            minify: {
                removeAttributeQuotes: true, //去除引號
                removeComments: true, //去除注釋
                removeEmptyAttributes: true, //去除空屬性
                collapseWhitespace: true //去除空格
            }
        }),
        new ExtractTextPlugin("css/[name].css"),
    ]
  1. 重新配置 css-loader 和 style-loader
{
    test: /\.css$/,
    use: ExtractTextPlugin.extract(
    {
        fallback: "style-loader",
        use: [
        {
            loader: 'css-loader',
            options:
            {
                minimize: true,  //啟用壓縮
            }
        }],
        publicPath: "../" //解決打包后 背景圖片路徑不對問題
    })
}

ES6語法裝換 babel
核心:
babel-core
功能:
babel-loader
babel-preset-env
babel-preset-react

  • 下載
npm install babel-core babel-loader babel-preset-env babel-preset-react -S

babel配置有兩種方式
v1:配置webpack.config.js

{
    test: /(\.jsx|\.js)$/,
    use:
    {
        loader: "babel-loader",
        options:
        {
            presets: ["env", 'react']
        }
    },
  //不需要轉(zhuǎn)換的目錄
    exclude: /node_modules/
}

v2:根目錄新建.babelrc文件

{
    "presets":['env','react']
}

同時 webapck.conifg.js去除對應(yīng)代碼

{
    test: /(\.jsx|\.js)$/,
    use:
    {
        loader: "babel-loader",
    },
  //不需要轉(zhuǎn)換的目錄
    exclude: /node_modules/
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市宴抚,隨后出現(xiàn)的幾起案子勒魔,更是在濱河造成了極大的恐慌,老刑警劉巖菇曲,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件冠绢,死亡現(xiàn)場離奇詭異,居然都是意外死亡羊娃,警方通過查閱死者的電腦和手機(jī)唐全,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蕊玷,“玉大人,你說我怎么就攤上這事弥雹±В” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵剪勿,是天一觀的道長贸诚。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么酱固? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任械念,我火速辦了婚禮,結(jié)果婚禮上运悲,老公的妹妹穿的比我還像新娘龄减。我一直安慰自己,他們只是感情好班眯,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布希停。 她就那樣靜靜地躺著,像睡著了一般署隘。 火紅的嫁衣襯著肌膚如雪宠能。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天磁餐,我揣著相機(jī)與錄音违崇,去河邊找鬼。 笑死诊霹,一個胖子當(dāng)著我的面吹牛羞延,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播畅哑,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼肴楷,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了荠呐?” 一聲冷哼從身側(cè)響起赛蔫,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎泥张,沒想到半個月后呵恢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡媚创,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年渗钉,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钞钙。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡鳄橘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出芒炼,到底是詐尸還是另有隱情瘫怜,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布本刽,位于F島的核電站鲸湃,受9級特大地震影響赠涮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜暗挑,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一笋除、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧炸裆,春花似錦垃它、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至听系,卻和暖如春贝奇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背靠胜。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工掉瞳, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人浪漠。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓陕习,卻偏偏與公主長得像,于是被迫代替她去往敵國和親址愿。 傳聞我的和親對象是個殘疾皇子该镣,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355

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