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

头像
followWinter
    阅读 5 分钟

    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

    1. 安装依赖

      $ cnpm install --save-dev css-loader

    2. 添加style.css

      $ vim ./src/style.css
p {
    }
```

    1. 引入style.css

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

    2. 打包并查看结果

      /* 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 {
    }
```

    1. 其他配置

      • minimize：压缩css

    2. 更多配置配置，请查阅webpack关于css-loader章节

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

    1. 安装依赖

      $ cnpm install --save-dev css-loader

    2. 修改配置

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

    3. 添加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>

    4. 浏览器打开./src/index.html,可以看到我们写的style.css内容已经被插入到head的style标签中

      clipboard.png

    5. 其他更多配置请查阅webpack关于style-loader章节

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

    1. 安装依赖

      $ cnpm install --save-dev file-loader

    2. 修改配置

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

    3. 打包并用浏览器打开./src/index.html，可以看见，style.css被以文件的形式导出并在head中以外链的形式导入
      clipboard.png

    4. 其他更多配置查阅webpack关于style-loader章节

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

    1. 安装依赖

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

    2. 修改配置

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

    3. 打包并使用浏览器打开index.html，可以看到，不管是style.css还是style.scss都被style-loader插入到了head

      clipboard.png

    4. 更多设置查阅关于webpack关于sass-loader章节

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

    1. 安装依赖

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

    1. 添加配置

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

    1. 添加postcss配置

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

    1. 打包并使用浏览器打开./src/index.html，可以看到，自动给我们添加了前缀。

      clipboard.png

    2. 其他更多配置请查阅webpack关于postcss-loder章节

    0x008 资源

    javascriptwebpack
    followWinter
    1.5k 声望82 粉丝

    暂时没有

    « 上一篇
    从零开始的webpack生活-0x010：TemplatingLoader装载模板
    下一篇 »
    从零开始的webpack生活-0x012：TranspilingLoader装载脚本

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    活用 Git 撤销，提升工程质量（文末招聘）

    followWinter阅读 1.6k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新