Webpack 4.X 從入門(mén)到精通 - module（四）

harryhappy 發(fā)布于2019-08-23 11:02 / 929人閱讀

摘要：這就需要把文件多帶帶拎出來(lái)，那需要一個(gè)插件來(lái)配合才能完成版本需要以上，低版本請(qǐng)使用使用步驟安裝在里引入模塊寫(xiě)入陳學(xué)輝文件目錄會(huì)放入里寫(xiě)入代替執(zhí)行命令后可以看到目錄里已經(jīng)多了一個(gè)文件夾，這個(gè)文件夾里放了一個(gè)文件。

概念

在webpack中任何一個(gè)東西都稱(chēng)為模塊，js就不用說(shuō)了。一個(gè)css文件，一張圖片、一個(gè)less文件都是一個(gè)模塊，都能用導(dǎo)入模塊的語(yǔ)法（commonjs的require，ES6的import）導(dǎo)入進(jìn)來(lái)。webpack自身只能讀懂js類(lèi)型的文件，其它的都不認(rèn)識(shí)。但是webpack卻能編譯打包其它類(lèi)型的文件，像ES6、JSX、less、typeScript等，甚至css、images也是Ok的，而想要編譯打包這些文件就需要借助loader

loader就像是一個(gè)翻譯員，瀏覽器不是不認(rèn)識(shí)這些東西么?那好交給loader來(lái)辦，它能把這些東西都翻譯成瀏覽器認(rèn)識(shí)的語(yǔ)言。loader描述了webpack如何處理非js模塊，而這些模塊想要打包loader必不可少，所以它在webpack里顯得異常重要。loader跟插件一樣都是模塊，想要用它需要先安裝它，使用的時(shí)候把它放在module.rules參數(shù)里，rules翻譯過(guò)來(lái)的意思就是規(guī)則，所以也可以認(rèn)為loader就是一個(gè)用來(lái)處理不同文件的規(guī)則

文件目錄

這節(jié)課需要用到圖片跟樣式，所以我要按傳統(tǒng)的目錄結(jié)構(gòu)來(lái)創(chuàng)建目錄，目錄如下
結(jié)構(gòu)目錄

處理CSS 所需loader

style-loader   //把處理完的css放到style標(biāo)簽里
css-loader     //處理css

安裝

npm i style-loader css-loader -D

index.css文件內(nèi)容如下：

#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    background: green;
}

index.js文件內(nèi)容如下：

import "../css/index.css";    //兩個(gè)點(diǎn)是找上級(jí)目錄

通過(guò)前面的課程大家要明白，webpack的入口文件是index.js，如果要處理其它類(lèi)型的文件，就需要在入口文件里把其它類(lèi)型的文件導(dǎo)入進(jìn)來(lái)，而在webpack中所有文件都是模塊，所以可以使用require或者import導(dǎo)入其它文件

package.json文件內(nèi)容如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

webpack.package.json文件內(nèi)容如下：

const path=require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");

module.exports={
    entry:{
        index:"./src/js/index.js",
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"陳學(xué)輝",
            template:"./src/template.html",
            filename:"index.html",
        })
    ],
    devServer:{
        host:"localhost",
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/.css$/,  //以點(diǎn)開(kāi)始css結(jié)尾的文件
                use:["style-loader","css-loader"]   //順序不能搞錯(cuò)
            }
        ]
    },
}

執(zhí)行命令npm run dev后就可以看到效果

說(shuō)明


rules里的數(shù)據(jù)類(lèi)型為對(duì)象，每一個(gè)loader都是一個(gè)對(duì)象

test表示loader要處理什么類(lèi)型的文件，這里用了一個(gè)正則去匹配文件類(lèi)型

use表示要使用哪個(gè)loader，它的值是個(gè)數(shù)組，loader的使用順序是從后往前

這個(gè)loader的意思為，在入口文件里找到.css類(lèi)型的文件，先拿css-loader去處理成瀏覽器認(rèn)識(shí)的css，再拿style-loader把處理后的css放在頁(yè)面的style標(biāo)簽里

css-loader其它配置：https://www.webpackjs.com/loa...
style-loader其它配置：https://www.webpackjs.com/loa...

多帶帶提取CSS

執(zhí)行命令npm run build后，在dist目錄里只有兩個(gè)文件，一個(gè)index.bundle.js一個(gè)index.html文件，并沒(méi)有css文件，同時(shí)打開(kāi)index.html源碼后也沒(méi)有發(fā)現(xiàn)有css的內(nèi)容。這是因?yàn)?b>style-loader的作用，它把css一同打包到了js文件里，js文件在能過(guò)DOM動(dòng)態(tài)創(chuàng)建style標(biāo)簽并添加到頁(yè)面里。所以css的內(nèi)容已經(jīng)放到了index.bundle.js里。

這種形式只有當(dāng)文件內(nèi)容不多的時(shí)候可以使用，如果CSS的內(nèi)容以及JS的內(nèi)容非常的多，把兩塊都打包到一個(gè)文件里就會(huì)增加文件的體積，用戶打開(kāi)頁(yè)面的時(shí)候下載速度會(huì)受影響，同減肥影響用戶體驗(yàn)。這就需要把CSS文件多帶帶拎出來(lái)，那需要一個(gè)插件來(lái)配合loader才能完成

mini-css-extract-plugin

webpack版本需要4.3以上，低版本請(qǐng)使用extract-text-webpack-plugin
使用步驟：
1、安裝

npm i mini-css-extract-plugin -D

2、在webpack.config.js里引入模塊

const MiniCssExtractPlugin=require("mini-css-extract-plugin");

3、寫(xiě)入plugins

plugins:[
    new HtmlWebpackPlugin({
        title:"陳學(xué)輝",
        template:"./src/template.html",
        filename:"index.html",
    }),
    new MiniCssExtractPlugin({
        filename:"css/index.css"    //文件目錄會(huì)放入output.path里
    }),
]

4、寫(xiě)入loader

module:{
    rules:[
        {
            test:/.css$/,
            use:[MiniCssExtractPlugin.loader,"css-loader"]  //代替style-loader
        }
    ]
}

執(zhí)行命令npm run build后可以看到dist目錄里已經(jīng)多了一個(gè)css文件夾，這個(gè)文件夾里放了一個(gè)index.css文件。打開(kāi)index.html源碼看到css文件已經(jīng)通過(guò)link標(biāo)簽引入，這些功能都是mini-css-extract-plugin所做的

mini-css-extract-plugin其它配置：https://github.com/webpack-co...

處理圖片 所需loader

file-loader   //解析地址
url-loader    //把圖片地址解析成base64

安裝

npm i file-loader url-loader -D

index.css文件內(nèi)容如下：

#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    /*background: green;*/
    
    background: url(../images/img_01.jpg);  //背景改成了圖片
}

index.js文件內(nèi)容如下：

import "../css/index.css";    //兩個(gè)點(diǎn)是找上級(jí)目錄

webpack.package.json文件內(nèi)容如下：

const path=require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");

module.exports={
    entry:{
        index:"./src/js/index.js",
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"陳學(xué)輝",
            template:"./src/template.html",
            filename:"index.html",
        })
    ],
    devServer:{
        host:"localhost",
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/.css$/,  //以點(diǎn)開(kāi)始css結(jié)尾的文件
                use:[
                    //這是一個(gè)loader，如果loader需要給參數(shù)，就寫(xiě)成對(duì)象的形式
                    {
                        loader:MiniCssExtractPlugin.loader, //loader是哪個(gè)
                        options:{   //所有的配置參數(shù)都要放在這個(gè)對(duì)象里面
                            publicPath:"../"    //這個(gè)表示在css文件里但凡用到地址的地方在其前面加個(gè)目錄"../"，這個(gè)是為了能找到圖片
                        }
                    },
                    "css-loader"    //這個(gè)loader沒(méi)有其它選項(xiàng)就直接寫(xiě)
                ]
            },
            {
                test:/.(jpg|png|gif)$/,    //找到三種格式中的任意一種
                use:["file-loader"]
            }
        ]
    },
}

執(zhí)行命令npm run dev后就可以看到效果

說(shuō)明


loader既可以寫(xiě)成字符串的形式，也可以寫(xiě)成對(duì)象的形式。如果這個(gè)loader需要給一些配置，那就需要寫(xiě)成對(duì)象的形式，所有的配置放到options里
這里一定要注意第一個(gè)loader的use屬性，它里面放的是一個(gè)個(gè)loader，每個(gè)loader的值既可以是對(duì)象形式，又可以是字符串形式

file-loader其它配置：https://www.webpackjs.com/loa...

在HTML文件中使用圖片

index.js文件內(nèi)容如下：

import "../css/index.css";

import img1 from "../images/img_01.jpg";
import img2 from "../images/img_02.jpg";

const loadImg=img=>{
    const newImg=new Image();
    newImg.onload=()=>document.body.appendChild(newImg);
    newImg.src=img;
};

loadImg(img1);
loadImg(img2);

webpack.package.json文件內(nèi)容如下：

const path=require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");
const MiniCssExtractPlugin=require("mini-css-extract-plugin");

module.exports={
    entry:{
        index:"./src/js/index.js",
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"陳學(xué)輝",
            template:"./src/template.html",
            filename:"index.html",
        }),
        new MiniCssExtractPlugin({
            filename:"css/index.css"
        }),
    ],
    devServer:{
        host:"localhost",
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:"../"
                        }
                    },
                    "css-loader"
                ]
            },
            {
                test:/.(jpg|png|gif)$/,
                //use:["file-loader"]
                use:[
                    {
                        loader:"url-loader",    //把圖片轉(zhuǎn)成base64
                        options:{
                            limit:50*1024,    //小于50k就會(huì)轉(zhuǎn)成base64
                            outputPath: "images"
                        }
                    }
                ]
                
                //use:"url-loader?limit=50000&outputPath=images"    //loader的另一種寫(xiě)法，與get請(qǐng)求方式相同
            }
        ]
    },
}

執(zhí)行命令npm run dev后就可以看到效果

說(shuō)明


url-loader的作用是把圖片轉(zhuǎn)成base64，它同樣可以給配置參數(shù)

limit的作用是小于這個(gè)值就會(huì)轉(zhuǎn)base64

只用了url-loader，并沒(méi)有用file-loader，說(shuō)明url-loader里已經(jīng)包含了file-loader的功能

loader還可以寫(xiě)成地址的形式，與get的請(qǐng)求方式相同

url-loader其它配置：https://www.webpackjs.com/loa...

資料下載：https://pan.baidu.com/s/1tgNt...

下一篇：Webpack 4.X 從入門(mén)到精通 - loader（五）

云服務(wù)器 GPU云服務(wù)器前端從入門(mén)到精通云計(jì)算從入門(mén)到精通 html從入門(mén)到精通 python從入門(mén)到精通

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96925.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

harryhappy

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 1565·2023-04-26 01:36
atoi函數(shù)模擬實(shí)現(xiàn)和解決單身狗問(wèn)題（C語(yǔ)言實(shí)現(xiàn)）

閱讀 2730·2021-10-08 10:05
Friendhosting四五折促銷(xiāo),VPS半年付7.5歐元起

閱讀 2784·2021-08-05 09:57
HTML5 活動(dòng)宣傳頁(yè)「My Flyme 獨(dú)家記憶」開(kāi)發(fā)實(shí)踐總結(jié)

閱讀 1544·2019-08-30 15:52
git最最最最...常用命令

閱讀 1200·2019-08-30 14:12
總結(jié)：清除浮動(dòng)的方法

閱讀 1320·2019-08-30 11:17
重新定義BFC

閱讀 3110·2019-08-29 13:07
關(guān)于Node.js的__dirname，__filename，process.cwd()，./文件路

閱讀 2429·2019-08-29 12:35

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Webpack 4.X 從入門(mén)到精通 - module（四）

相關(guān)文章

Webpack 4.X 從入門(mén)到精通 - devServer與mode（三）

Webpack 4.X 從入門(mén)到精通 - loader（五）

Webpack 4.X 從入門(mén)到精通 - 第三方庫(kù)（六）

Webpack入門(mén)到精通（1）

Webpack入門(mén)到精通（1）

發(fā)表評(píng)論

0條評(píng)論

harryhappy

男|高級(jí)講師

TA的文章

tensorflow

atoi函數(shù)模擬實(shí)現(xiàn)和解決單身狗問(wèn)題（C語(yǔ)言實(shí)現(xiàn)）

Friendhosting四五折促銷(xiāo),VPS半年付7.5歐元起

HTML5 活動(dòng)宣傳頁(yè)「My Flyme 獨(dú)家記憶」開(kāi)發(fā)實(shí)踐總結(jié)

git最最最最...常用命令

總結(jié)：清除浮動(dòng)的方法

重新定義BFC

關(guān)于Node.js的dirname，filename，process.cwd()，./文件路

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Webpack 4.X 從入門(mén)到精通 - module（四）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！