webpack從入門到精通----（三）css-loader 及 less-loader

第四課

less/css Loader

1. 安裝
   yarn add css-loader style-loader less-loader less -D
2. 在 webpack.config.js 文件中 使用

module: { // 模塊
    rules: [ // 規則  css-loader 主要用於解析 @import 語法的
        // style-loader 他是把 css 插入 head 的標籤中
        // loader的特點 希望單一
        // loader的用法： 字符串 只用一個loader
        // 多個loader 需要 []
        // loader的順序 默認是從右向左(從下到上)執行， -> 先解析 @import 再插入 head 中
        // loader還可以寫成 對象的方式
        {
            test: /\.css$/,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        insert: function insertAtTop(element) { // 之前是insertAt，現在是一個函數或者elementString
                            var parent = document.querySelector('head');
                            var lastInsertedElement =
                                window._lastElementInsertedByStyleLoader;

                            if (!lastInsertedElement) {
                                parent.insertBefore(element, parent.firstChild);
                            } else if (lastInsertedElement.nextSibling) {
                                parent.insertBefore(element, lastInsertedElement.nextSibling);
                            } else {
                                parent.appendChild(element);
                            }
                            window._lastElementInsertedByStyleLoader = element;
                        },
                    }
                },
                'css-loader',
            ]
        },{
            test: /\.less$/,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        insert: function insertAtTop(element) {
                            var parent = document.querySelector('head');
                            // eslint-disable-next-line no-underscore-dangle
                            var lastInsertedElement =
                                window._lastElementInsertedByStyleLoader;

                            if (!lastInsertedElement) {
                                parent.insertBefore(element, parent.firstChild);
                            } else if (lastInsertedElement.nextSibling) {
                                parent.insertBefore(element, lastInsertedElement.nextSibling);
                            } else {
                                parent.appendChild(element);
                            }

                            // eslint-disable-next-line no-underscore-dangle
                            window._lastElementInsertedByStyleLoader = element;
                        },
                    }
                }, // 以 link 標籤的方式插入到指定標籤中
                'css-loader', // 解析 @import
                'less-loader' // less -> css
            ]
        }
    ]
}

最終配置：

// webpack 是node 寫出來的 node的寫法來運行

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devServer: { // 開發服務器的配置
        port: 3000, // 啓動端口
        progress: true, // 滾動條
        contentBase: './build', // 啓動服務的路徑
        compress: true //壓縮
    },
    mode: 'development', // 模式 默認兩種 production(會壓縮js文件) development
    entry: './src/index.js', //入口
    output: { // 出口
        filename: 'bundle.[hash:8].js', // 打包後的文件名 [hash:8] 只顯示8位的hash文件
        path: path.resolve(__dirname, 'build') // 路徑必須是一個絕對路徑
    },
    plugins: [ // 數組 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html', // 打包的模板路徑
            filename: 'index.html', // 打包之後的文件名
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        })
    ],
    module: { // 模塊
        rules: [ // 規則  css-loader 主要用於解析 @import 語法的
            // style-loader 他是把 css 插入 head 的標籤中
            // loader的特點 希望單一
            // loader的用法： 字符串 只用一個loader
            // 多個loader 需要 []
            // loader的順序 默認是從右向左(從下到上)執行， -> 先解析 @import 再插入 head 中
            // loader還可以寫成 對象的方式
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insert: function insertAtTop(element) {
                                var parent = document.querySelector('head');
                                // eslint-disable-next-line no-underscore-dangle
                                var lastInsertedElement =
                                    window._lastElementInsertedByStyleLoader;

                                if (!lastInsertedElement) {
                                    parent.insertBefore(element, parent.firstChild);
                                } else if (lastInsertedElement.nextSibling) {
                                    parent.insertBefore(element, lastInsertedElement.nextSibling);
                                } else {
                                    parent.appendChild(element);
                                }

                                // eslint-disable-next-line no-underscore-dangle
                                window._lastElementInsertedByStyleLoader = element;
                            },
                        }
                    },
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insert: function insertAtTop(element) {
                                var parent = document.querySelector('head');
                                // eslint-disable-next-line no-underscore-dangle
                                var lastInsertedElement =
                                    window._lastElementInsertedByStyleLoader;

                                if (!lastInsertedElement) {
                                    parent.insertBefore(element, parent.firstChild);
                                } else if (lastInsertedElement.nextSibling) {
                                    parent.insertBefore(element, lastInsertedElement.nextSibling);
                                } else {
                                    parent.appendChild(element);
                                }

                                // eslint-disable-next-line no-underscore-dangle
                                window._lastElementInsertedByStyleLoader = element;
                            },
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
}