20170622-webpack之loader篇

付永剛發(fā)布于2019-08-20 17:27 / 2971人閱讀

摘要：從打包后的文件中提取出特定的內容到一個新的文件中，需要配合使用，由指定提取文件的路徑提取文件，使其變成代碼。在打包過程中會將代碼中資源的原始路徑替換成資源的新路徑在打包文件夾下資源的路徑。

less-loader

處理代碼中引入的less文件，通過對應的less模塊，將less轉變?yōu)閏ss

css-loader

通過css-loader，使得在css中能夠使用@import和url(...)的方式實現(xiàn)require()的功能

style-loader

style-loader將所有計算后的樣式加入頁面中(將樣式表嵌入webpack打包后的JS文件中即css和js會被打包到同一個文件中)

babel-loader

處理jsx文件，結合babel對jsx中的es6語法、jsx語法進行處理轉換

file-loader

{
    test: /.(eot|svg|ttf|woff2?)$/,
    use: ["file-loader?name=assets.fonts/[name].[ext"]
}

在查詢字符串參數(shù)中指定的路徑下生成對應的文件(拷貝過去)

url-loader

對于比較小(url-loader的查詢參數(shù)進行了限制)的圖片，可以將其轉換為base64形式，如果圖片大小超過限制，那么webpack就會使用file-loader去處理文件，并且所有的查詢參數(shù)都會傳遞給file-loader，file-loader會在查詢字符串參數(shù)中指定的路徑生成對應的文件。

extract-loader

Extract text from bundle into a file.從打包后的js文件中提取出特定的內容到一個新的文件中，需要配合file-loader使用，由file-loader指定提取文件的路徑

html-loader

提取html文件，使其變成js代碼。這個loader需要結合extract-loader和file-loader一起使用

{
    test: /.html$/,
    use: [
        "file-loader?name=[name].html",
        "extract-loader",
        "html-loader"
    ]
}

上面的代碼是webpack的一段配置代碼，具體的作用是：首先經(jīng)過html-loader：提取html代碼，生成對應的js代碼;然后經(jīng)過extract-loader：抽取出這部分html代碼；最后經(jīng)過file-loader，在file-loader的查詢字符串參數(shù)指定的位置生成新的html文件。

為什么一個html文件要經(jīng)過上述loader的處理？

在開發(fā)過程中，我們將所有的代碼、資源放在一個路徑下，當打包后，會生成一個打包文件夾，其中包含了打包后的代碼以及所有資源文件(image、fonts)。webpack在打包過程中會將代碼中資源的原始路徑替換成資源的新路徑(在打包文件夾下資源的路徑)。html中如果存在元素，并且使用的本地圖片，在打包后我們希望元素的路徑同樣替換成對應資源的新路徑，因此，需要經(jīng)過上述loader的處理，當然在webpack.config.js文件的entry和output部分，同樣得指定對應的html文件，如下所示

entry: {
    vendor: "./src/vendor/index.js",
    // 將index.jsx和index.html文件打包到一起，在打包過程中webpack會將index.html依次經(jīng)過html-loader、extract-loader、file-loader的處理
    xx: ["./src/xx/index.jsx", "./src/xx/index.html"]
  },
  output: {
    path: path.resolve(__dirname, "public"),
    publicPath: "/"
    filename: "assets/js/[name].js",
    chunkFilename: "assets/js/chunk.[id].js",
  }

..... 省略

{
    test: /.html$/,
    use: [
        "file-loader?name=[name].html",
        "extract-loader",
        "html-loader"
    ]
}

個人理解

webpack在打包項目的過程中，會將一些代碼、資源(css、image、fonts)通過extract-loader、file-loader、ExtractTextPlugin等一些loader和插件打包/復制到新的路徑中去，webpack會將代碼中的舊路徑替換成新路徑。

云服務器 GPU云服務器之基礎篇 Loaders Loader babel-loader

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

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

20170622-webpack之plugin篇

摘要：該插件的作用是為組件分配，通過這個插件會分析使用頻率最多的模塊，并未他們分配最小的，越小表示模塊被找到的速度會更快使用方法用于抽取公共的模塊 extract-text-webpack-plugin extract-text-webpack-plugin主要是為了抽離css樣式,并將樣式打包成css文件 const ExtractTextPlugin = require(extract-...

Dean 2019-08-20 17:27 評論0 收藏0
webpack進階之loader篇

webpack的loaders是一大特色，也是很重要的一部分。這遍博客我將分類講解一些常用的laodershowImg(https://segmentfault.com/img/remote/1460000005742040); 一、loaders之預處理 css-loader 處理css中路徑引用等問題 style-loader 動態(tài)把樣式寫入css sass-loader scss編譯器 ...

qylost 2019-08-19 18:33 評論0 收藏0
webpack進階之插件篇

摘要：基本環(huán)境搭建就不展開講了一插件篇自動補全前綴官方是這樣說的，也就是說它是一個自動檢測兼容性給各個瀏覽器加個內核前綴的插件。上一篇博客講解了webpack環(huán)境的基本，這一篇講解一些更深入的內容和開發(fā)技巧。基本環(huán)境搭建就不展開講了showImg(http://static.xiaomo.info/images/webpack.png); 一、插件篇 1. 自動補全css3前綴 autop...

Tonny 2019-08-19 18:33 評論0 收藏0
前端面試之webpack篇

摘要：面試你一般問你的原理，的原理，你有用那些優(yōu)化措施前端開發(fā)已經(jīng)模塊化，它改進了代碼庫的封裝和結構。這么說負責的是處理源文件的如，一次處理一個文件。小心的運用他們。因為隨著項目的增長，它們會變得很難馴服。還是以前一樣，有些概念面試可能會考，我都用*標記了出來，兩句話就總結清楚其余的地方如果你想了解webpack，就仔細看看，雖然本教程不能讓你webpack玩的很6，但是懂操作流程夠了。面...

cangck_X 2019-08-21 16:47 評論0 收藏0