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'
                    }
                ]
            }
        ]
    }
}