国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Webpack 4.X 從入門到精通 - module（四）

harryhappy / 919人閱讀

摘要：這就需要把文件多帶帶拎出來，那需要一個插件來配合才能完成版本需要以上，低版本請使用使用步驟安裝在里引入模塊寫入陳學輝文件目錄會放入里寫入代替執行命令后可以看到目錄里已經多了一個文件夾，這個文件夾里放了一個文件。

概念

在webpack中任何一個東西都稱為模塊，js就不用說了。一個css文件，一張圖片、一個less文件都是一個模塊，都能用導入模塊的語法（commonjs的require，ES6的import）導入進來。webpack自身只能讀懂js類型的文件，其它的都不認識。但是webpack卻能編譯打包其它類型的文件，像ES6、JSX、less、typeScript等，甚至css、images也是Ok的，而想要編譯打包這些文件就需要借助loader

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

文件目錄

這節課需要用到圖片跟樣式，所以我要按傳統的目錄結構來創建目錄，目錄如下
結構目錄

處理CSS 所需loader 
style-loader   //把處理完的css放到style標簽里
css-loader     //處理css
安裝 
npm i style-loader css-loader -D
index.css文件內容如下： 
#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    background: green;
}
index.js文件內容如下： 
import "../css/index.css";    //兩個點是找上級目錄

通過前面的課程大家要明白，webpack的入口文件是index.js，如果要處理其它類型的文件，就需要在入口文件里把其它類型的文件導入進來，而在webpack中所有文件都是模塊，所以可以使用require或者import導入其它文件

package.json文件內容如下： 
{
  "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文件內容如下： 
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:"陳學輝",
            template:"./src/template.html",
            filename:"index.html",
        })
    ],
    devServer:{
        host:"localhost",
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/.css$/,  //以點開始css結尾的文件
                use:["style-loader","css-loader"]   //順序不能搞錯
            }
        ]
    },
}

執行命令npm run dev后就可以看到效果

說明




rules里的數據類型為對象，每一個loader都是一個對象



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



use表示要使用哪個loader，它的值是個數組，loader的使用順序是從后往前



這個loader的意思為，在入口文件里找到.css類型的文件，先拿css-loader去處理成瀏覽器認識的css，再拿style-loader把處理后的css放在頁面的style標簽里

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

多帶帶提取CSS

執行命令npm run build后，在dist目錄里只有兩個文件，一個index.bundle.js一個index.html文件，并沒有css文件，同時打開index.html源碼后也沒有發現有css的內容。這是因為style-loader的作用，它把css一同打包到了js文件里，js文件在能過DOM動態創建style標簽并添加到頁面里。所以css的內容已經放到了index.bundle.js里。

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

mini-css-extract-plugin

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

npm i mini-css-extract-plugin -D

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

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

3、寫入plugins

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

4、寫入loader

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

執行命令npm run build后可以看到dist目錄里已經多了一個css文件夾，這個文件夾里放了一個index.css文件。打開index.html源碼看到css文件已經通過link標簽引入，這些功能都是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文件內容如下： 
#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    /*background: green;*/
    
    background: url(../images/img_01.jpg);  //背景改成了圖片
}
index.js文件內容如下： 
import "../css/index.css";    //兩個點是找上級目錄
webpack.package.json文件內容如下： 
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:"陳學輝",
            template:"./src/template.html",
            filename:"index.html",
        })
    ],
    devServer:{
        host:"localhost",
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/.css$/,  //以點開始css結尾的文件
                use:[
                    //這是一個loader，如果loader需要給參數，就寫成對象的形式
                    {
                        loader:MiniCssExtractPlugin.loader, //loader是哪個
                        options:{   //所有的配置參數都要放在這個對象里面
                            publicPath:"../"    //這個表示在css文件里但凡用到地址的地方在其前面加個目錄"../"，這個是為了能找到圖片
                        }
                    },
                    "css-loader"    //這個loader沒有其它選項就直接寫
                ]
            },
            {
                test:/.(jpg|png|gif)$/,    //找到三種格式中的任意一種
                use:["file-loader"]
            }
        ]
    },
}

執行命令npm run dev后就可以看到效果

說明




loader既可以寫成字符串的形式，也可以寫成對象的形式。如果這個loader需要給一些配置，那就需要寫成對象的形式，所有的配置放到options里


這里一定要注意第一個loader的use屬性，它里面放的是一個個loader，每個loader的值既可以是對象形式，又可以是字符串形式

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

在HTML文件中使用圖片

index.js文件內容如下：

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文件內容如下： 
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:"陳學輝",
            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",    //把圖片轉成base64
                        options:{
                            limit:50*1024,    //小于50k就會轉成base64
                            outputPath: "images"
                        }
                    }
                ]
                
                //use:"url-loader?limit=50000&outputPath=images"    //loader的另一種寫法，與get請求方式相同
            }
        ]
    },
}

執行命令npm run dev后就可以看到效果

說明




url-loader的作用是把圖片轉成base64，它同樣可以給配置參數



limit的作用是小于這個值就會轉base64



只用了url-loader，并沒有用file-loader，說明url-loader里已經包含了file-loader的功能



loader還可以寫成地址的形式，與get的請求方式相同


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

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

下一篇：Webpack 4.X 從入門到精通 - loader（五）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96925.html

相關文章

  • Webpack 4.X 從入門到精通 - devServer與mode（三）

    摘要：同時它還提供了自動刷新熱更新等功能，使開發變得非常方便。的到來減少了很多的配置，它內置了很多的功能。 上一篇文章里詳細介紹了一下插件的用法，這一篇文章接著豐富module.exports里的屬性。如今的前端發展已經非常迅速了，伴隨而來的是開發模式的轉變。現在已經不再是寫個靜態頁面并放在瀏覽器里打開預覽一下了。在實際的開發中會經常需要使用http服務器，比如之前的ajax，想要看到效果就...

    王偉廷 評論0 收藏0

  • Webpack 4.X 從入門到精通 - loader（五）

    摘要：處理與的語法大部分已經被各在瀏覽器所支持，當然除了萬惡的，但是部分新增很遺憾并不被瀏覽器所支持比如內置對象新增的一些方法和對象等。但是在這里卻不需要，是因為的里已經把內容添上了，就不需要創建文件了源碼下載下一篇從入門到精通第三方庫六 通過上一篇文章相信大家已經明白了loader的概念。那這篇文章繼續介紹一些常用loader，并展現它的強大之處 處理less less與sass的功能都一...

    Me_Kun 評論0 收藏0

  • Webpack 4.X 從入門到精通 - 第三方庫（六）

    摘要：在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的。使用第三方庫在入口文件當中直接導入安裝目錄結構如圖內容如下內容如下陳學輝內容如下這是自帶的內容如下內容如下引入后打開頁面會看到最后一個標簽有了一個綠色的背景。 在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的jquery。借助它們能提高開發效率，但是如何在webpack中使用呢。這篇文章介紹兩個東西，如何使用第三方庫以及...

    dunizb 評論0 收藏0

  • Webpack入門到精通（1）

    前言 什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。webpack 有哪些功能(代碼轉換 文件優化 代碼分割 模塊合并 自...

    wangbinke 評論0 收藏0

  • Webpack入門到精通（1）

    前言 什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉換 文件優化 代碼分割 模塊合并 ...

    SunZhaopeng 評論0 收藏0

發表評論

0條評論

harryhappy

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<