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

mylxsw 发布于2019-08-21 17:31 / 2222人阅读

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从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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