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

時間 2019-11-16

標籤開始 webpack 生活 0x011 stylingloader 裝載樣式欄目悠閒生活简体版

原文原文鏈接

0x001 概述

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

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`

安裝依賴html
```
$ cnpm install --save-dev css-loader
```
添加style.cssnode
```
$ vim ./src/style.css
p {
```

}
```

引入style.csswebpack

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

打包並查看結果git

/* 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()來獲得樣式字符串，執行結果github

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

}
```

其餘配置web
- minimize：壓縮cssnpm
更多配置配置，請查閱webpack關於css-loader章節vim

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

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./../dist/index.bundle.js"></script>
</head>
<body>
<p>hello webpack</p>
</body>
</html>

瀏覽器打開./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]
})