从零开始的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]
})

打包并使用浏览器打开./src/index.html，能够看到，自动给咱们添加了前缀。
其余更多配置请查阅webpack关于postcss-loder章节

0x008 资源

源代码

从零开始的webpack生活-0x011：StylingLoader装载样式

0x001 概述

0x002 配置环境

0x003 栗子1-css-loader装载css

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

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

0x006 栗子4-sass-loader装载sass

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

0x008 资源

0x003 栗子1-`css-loader`装载`css`

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

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

0x006 栗子4-`sass-loader`装载sass

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