webpack4 自学笔记四（style-loader）

全部的代码及笔记都可以在我的github上查看，欢迎star：https://github.com/Jasonwang911/webpackStudyInit/tree/master/css

引入--loader

style-loader: 创建一个style标签

style-loader/url: 在html中插入一个link标签(配合file-loader使用),一个很小众的功能，会把每个import的css都处理成一个link标签，造成加载资源的增加，不利于优化

file-loader: 生成一个新的css文件

style-loader/useable: 在style中控制样式插入或者不插入，import了css后可以使用 .use() 或者 .unuse()的方法来控制样式是否插入

css-loader: 允许js来import一个css文件

npm install style-loader css-loader --save-dev

1. 使用style-loader 和 css-loader 在html中添加style标签，并引入import中的样式

var path = require('path')

module.exports = {
    entry: {
        app: './src/app.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

2. style-loader配合file-loader 使用在html中插入link标签并引入js中import的样式,注意：publicPath为指定打包后文件的路径

var path = require('path')

module.exports = {
    mode: 'production',
    entry: {
        app: './src/app.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: '[name].bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader/url'
                    },
                    {
                        loader: 'file-loader'
                    }
                ]
            }
        ]
    }
}

3. 使用style-loader/useable

var path = require('path')

module.exports = {
    mode: 'production',
    entry: {
        app: './src/app.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: '[name].bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader/useable'
                    },
                    {
                        loader: 'css-loader'
                        // loader: 'file-loader'
                    }
                ]
            }
        ]
    }
}

## style-loader 的一些常用配置 options

1. insertAt: 插入位置

2. singleton: 是否只使用一个style标签,会将多个引入混合为一个style标签插入页面

{
    loader: 'style-loader',
    options: {
        singleton: true
    }
}

3. insertInto: 插入到dom

按照文档来写尝试失败：文档地址

[style-loader](https://www.npmjs.com/package/style-loader) 欢迎留言一起研究

4. transform: 可以执行一个js，在loader执行的时候执行，也就是浏览器环境，能拿到浏览器的相关信息

transform.js ：

module.exports = function(css) {
    
    if(window.innerWidth > 400) {
        // css += 'html{background: aqua;}'
        css = css.replace('red', 'aqua')
    }else {
        css = css.replace('aqua', 'red')
    }
    console.log(css);
    return css;
}

webpack配置：

var path = require('path')

module.exports = {
    mode: 'production',
    entry: {
        app: './src/app.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        // publicPath: './dist/',
        filename: '[name].bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true,
                            transform: './src/css/transform.js',
                        }
                    },
                    {
                        loader: 'css-loader'
                        // loader: 'file-loader'
                    }
                ]
            }
        ]
    }
}

webpack4 自学笔记四（style-loader）

猜你喜欢