<menu id="wogig"></menu>

Webpack--loaders

CntChen 發布于2019-08-19 18:09 / 1334人閱讀

摘要：在文件中配置和一樣的語法配置的選項，支持的校驗使用不支持或者規范的插件以為例注意這種寫法這個變量直接插入到里面了相當于在這個文件的開始添加了獻上師傅的文章傻瓜式指南傻瓜式指南

1.總體介紹

不同資源不同loader，否則加載失敗；

//loaders類似modules，exports的一個方法
//默認Webpack只處理javaScript；
//你的資源里有圖片、css、html...如果沒有相應的loader，人家不認識你；

可以通過全名XX-loader或短名xx引用；
loaders可以鏈式寫，用!分離loaders和resource，如針對樣式loader:(style!css!sass)
loaders處理后的資源會用js語法包裹，最終返回js---------Webpack只處理javaScript
注意：loaders鏈式寫的時候，[預]處理工具從右到左應用！！！如下：

require("style!css!less!bootstrap/less/bootstrap.less");

對bootstrap/less/bootstrap.less先進行less解析再css解析再style解析，最終返回js

loaders可以接受查詢參數--------具體處理工具查看對應文檔；

用?引導query string，如url-loader?mimetype=image/png
查詢格式 
    ?key=value&key2=value2 
    或 JSON對象 
    ?{"key":"value","key2":"value2"}.

2. loader用法

1.通過require顯性聲明----------不推薦
    只能處理某一明確的目錄文件；
    require("!style!css!less!bootstrap/less/bootstrap.less");-----只處理bootstrap/less文件下的bootstrap.less
        
2.通過webpack.config.js配置---------推薦
    通過正則表達式來綁定loaders----匹配一類文件
        {
            module: {
                loaders: [
                    { 
                        //匹配.jade結尾的文件；
                        test: /.jade$/, 
                        loader: "jade"，
                        query:{}
                    },
                    { 
                        //匹配.css結尾的文件；
                        test: /.css$/,
                        //鏈式loaders寫法一，從右往左解析
                        loader: "style!css" ，
                        query:{}
                    },
                    { 
                        test: /.css$/,
                        //鏈式loaders寫法一，從右往左解析
                        loaders: ["style", "css"]  ，
                        query:{}
                    },
                    { 
                        test: /.scss$/,
                        //針對sass的解析，有依賴環境，可能是ruby……
                        //在linux中，如果報錯，刪除sass-loader，重新npm init下
                        loaders: ["style", "css","sass"]  ，
                        query:{}
                    },
                ]
            }
        }
        
    3.命令行-------忽略

3. 使用preLoaders和postLoaders

perLoaders顧名思義就是在loaders執行之前處理的，webpack的處理順序是perLoaders - loaders - postLoaders。

module: {
    //在config文件中配置,和loaders一樣的語法
    perLoaders: [
        {
            test: /.jsx?$/,
            include: APP_PATH,
            loader: "jshint-loader"
        }
    ]
},
//配置jshint的選項，支持es6的校驗
jshint: {
  "esnext": true
}

4. 使用imports-loader不支持AMD或者CommonJS規范的插件

//以jquery為例
npm install imports-loader --save-dev
npm install jquery -save

//注意這種寫法 jQuery這個變量直接插入到plugin.js里面了
//相當于在plugin.js這個文件的開始添加了 var jQuery = require("jquery");
import "imports?jQuery=jquery!./plugin.js";

5 獻上師傅的文章

Webpack傻瓜式指南1
Webpack傻瓜式指南2

GPU云服務器云服務器

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

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

webpack學習筆記

摘要：配置完成后就可以使用來打包代碼了。值得注意的是會刪除所有無作用代碼也就是說那些包裹在這些全局變量下的代碼塊都會被刪除這樣就能保證這些代碼不會因發布上線而泄露。默認會從項目的根目錄下引入這些文件。命令使用 npm install webpack -g 作為全局安裝, 在任意目錄使用 npm install webpack --save-dev 作為項目依賴安裝 np...

mylxsw 2019-08-21 10:36 評論0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

摘要：在上面的列表中，是自解釋型的。我們將使用后者。調整文件的內容到這一步，這個應用就具備熱刷新的功能。下一步，更新文件中的到現在為止，如果你在控制臺運行壓縮文件將被創建并且放在路徑下面。這是React和ECMAScript2015系列文章的最后一篇，我們將繼續探索React 和 Webpack的使用。下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） Rea...

Mr_houzi 2019-08-20 17:59 評論0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

摘要：在上面的列表中，是自解釋型的。我們將使用后者。調整文件的內容到這一步，這個應用就具備熱刷新的功能。下一步，更新文件中的到現在為止，如果你在控制臺運行壓縮文件將被創建并且放在路徑下面。這是React和ECMAScript2015系列文章的最后一篇，我們將繼續探索React 和 Webpack的使用。下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） Rea...

yunhao 2019-08-01 17:10 評論0 收藏0
最小白的webpack+react環境搭建

摘要：接下來安裝和，執行命令安裝很順利，沒有遇到任何問題。再總結一下我們遇到的坑初始化時的項目名稱要合規，特別是不能出現中劃線下劃線。另外再增加，這樣刷新的速度會大大加快最終的文件目錄結構為各文件的最終內容本文也同步發表在我的公眾號“我的天空” 從零開始，用最少的配置、最少的代碼、最少的依賴來搭建一個最簡單的webpack+react環境。最近在玩webpack+rea...

番茄西紅柿 2019-04-23 13:28 評論0 收藏0