從零開始的webpack生活-0x011：StylingLoader裝載樣式

mylxsw 發布于2019-08-21 17:31 / 2191人閱讀

0x001 概述

上一章講的是裝載模板，這一章講的是裝載樣式

0x002 配置環境

$ mkdir 0x011-styling-loader
$ cd 0x011-styling-loader
$ npm init -y
$ npm install --save-dev webpack
$ touch ./src/index.js
$ vim webpack.config.js

// ./webpack.config.js
const path = require("path");

module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    }
;

0x003 栗子1-css-loader裝載css

安裝依賴

$ cnpm install --save-dev css-loader

添加style.css

$ vim ./src/style.css
p {

}
```

引入style.css

// ./src/index.js
var style = require("./style.css")
console.log(style.toString())

打包并查看結果

/* 2 */
/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(3)(false);
exports.push([module.i, "p{color:red}", ""]);
/***/ }),
/* 3 */
/***/ (function(module, exports) {
...
module.exports = function(useSourceMap) {
    var list = [];

    // return the list of modules as css string
    list.toString = function toString() {
        return this.map(function (item) {
            var content = cssWithMappingToString(item, useSourceMap);
            if(item[2]) {
                return "@media " + item[2] + "{" + content + "}";
            } else {
                return content;
            }
        }).join("");
    };
    ....

可以看到，生成了兩個新的模塊，模塊2包含我們的style文件中的內容，模塊3導出了一個toString,它的作用是可以將style.css中的內容轉化成字符串來使用，所以我們在index.js中可以使用style.toString()來得到樣式字符串，執行結果

$ node ./dist/index.bundle.js
p {

}
```

其他配置

minimize：壓縮css

更多配置配置，請查閱webpack關于css-loader章節

0x004 栗子2-style-loader配合css-loader插入

安裝依賴

$ cnpm install --save-dev css-loader

修改配置

        {
            test: /.css$/,
            use : [
                {
                    loader : "css-loader",
                    options: {}
                },
                {
                    loader : "css-loader",
                    options: {
                        minimize: true
                    }
                }
            ]
        }

添加index.html

Document

hello webpack

瀏覽器打開./src/index.html,可以看到我們寫的style.css內容已經被插入到head的style標簽中

其他更多配置請查閱webpack關于style-loader章節

0x005 栗子3-添加file-loader獨立出style文件

安裝依賴

$ cnpm install --save-dev file-loader

修改配置

{                           
    loader : "style-loader",
    options: {}             
},                          
{                           
    loader : "file-loader", 
    options: {              
        name:"[name].[ext]" 
    }                       
},

打包并用瀏覽器打開./src/index.html，可以看見，style.css被以文件的形式導出并在head中以外鏈的形式導入

其他更多配置查閱webpack關于style-loader章節

0x006 栗子4-sass-loader裝載sass

安裝依賴

$ npm install sass-loader node-sass webpack --save-dev

修改配置

{                             
    test: /.(scss|css)$/,    
    use : [{                  
        loader: "style-loader"
    }, {                      
        loader: "css-loader"  
    }, {                      
        loader: "sass-loader" 
    }]                        
}

打包并使用瀏覽器打開index.html，可以看到，不管是style.css還是style.scss都被style-loader插入到了head

更多設置查閱關于webpack關于sass-loader章節

0x007 栗子5-postcss-loder搞定兼容性

安裝依賴

$ cnpm install --save-dev postcss-loader precss autoprefixer

添加配置

{                                    
    test: /.(scss|css)$/,           
    use : [                          
        {                            
            loader: "style-loader"   
        },                           
        {                            
            loader: "css-loader"     
        },                           
        {                            
            loader: "postcss-loader" 
        },                           
        {                            
            loader: "sass-loader"    
        }]                           
}

添加postcss配置

$ vim ./postcss.config.js
// ./postcss.config.js
const precss = require("precss");
const autoprefixer = require("autoprefixer");
module.exports = ({ file, options, env }) => ({
    plugins: [precss, autoprefixer]
})

打包并使用瀏覽器打開./src/index.html，可以看到，自動給我們添加了前綴。

其他更多配置請查閱webpack關于postcss-loder章節

0x008 資源

源代碼

云服務器 GPU云服務器從零開始的郵件服務器從零開始 linux從零開始 python從零開始

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

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

從零開始的webpack生活-0x001：webpack初次相逢

摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了 0x002 初始化項目結構 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評論0 收藏0
從零開始的webpack生活-0x012：TranspilingLoader裝載腳本

摘要：概述上一章講的是樣式裝載相關的，這一章見得是腳本加載相關的環境配置栗子加載安裝依賴修改配置添加配置文件使用編寫腳本打包并查看結果可以看到，語法被自動轉化成了更多配置請查閱關于章節栗子加載安裝依賴 0x001 概述上一章講的是樣式裝載相關的loader，這一章見得是腳本加載相關的loader 0x002 環境配置 $ mkdir 0x012-transliling-loader $ c...

Tonny 2019-08-21 17:32 評論0 收藏0
從零開始的webpack生活-0x010：TemplatingLoader裝載模板

摘要：概述上一章講的時候關于文件相關的，這一章講的是模板相關的。環境配置栗子加載安裝依賴包編寫并引入配置低于否則使用打包并查看結果可以看到，被打包成了字符串，并封裝成模塊導出。更多資源，請查閱的倉庫和官網資源源代碼 0x001 概述上一章講的時候關于文件相關的loder，這一章講的是模板相關的loder。 0x002 環境配置 $ mkdir 0x010-templating-loader...

jk_v1 2019-08-21 17:31 評論0 收藏0
從零開始的webpack生活-0x009：FilesLoader裝載文件

摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結尾的文件，都將使用這個來處理命中后使用的加載器查看結果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護和美觀更多配置，可以查閱關于部分。 0x001 概述上一章講的是DLL加速編譯，這一章開始講loader相關的部分，但是關于plugin的部分善未完結，因為即將要講的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 評論0 收藏0
從零開始的webpack生活-0x013：LintingLoader格式校驗

摘要：概述上一章講的是腳本裝載相關的，這一章見得是腳本格式校驗相關的環境配置使用校驗格式這份配置是偷的安裝依賴包修改配置文件添加配置文件編寫測試代碼張三打包輸出張三 0x001 概述上一章講的是腳本裝載相關的loader，這一章見得是腳本格式校驗相關的loader 0x002 環境配置 $ mkdir 0x013-linting-loader $ cd 0x013-linting-load...

ephererid 2019-08-21 17:32 評論0 收藏0