webpack -- css的loader挖坑

1、入門級挖坑

在項目中使用css的第一步，就是要在webpack裏面配置相應的解析loader，由於webpack只能解析js文件，對於.css，.vue，.jsx，.json等這些文件它不會讀，因此咱們要安裝loader來幫助一下
全部loader都是在webpack.config.js文件裏的module.rules數組裏面配置的
Tips
每一個loader都有基本都有兩個配置項：
test：正則表達式校驗
loader/use：loader後面能夠是loader數組，也能夠是loader字符串，推薦使用use
還可使用options來額外配置一些屬性：如：

{
    test: /\.jpg$/,
    use: [
        loader: 'url-loader',
        options: {
            limit: 1024,
            name: '[name].[ext]'
        }
    ]
}

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

安裝完成後，須要在webpack.config.js的plugins裏面配置，不然也沒有效果
注意根據vue官方文檔，style-loader被替換成了vue-style-loader，雖然用style-loader也能成，不過仍是照着官方來吧

plugins: [
    rules: [
        {
            // 正則校驗.css後綴的文件
            test: /\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    sourceMap: true
                }
            ]
        }
    ]
]

css-loader就是用來解析處理css文件的，style-loader不知道，估計應該是用來處理style標籤裏面的css樣式的，（主要 將css 插入到head 的style 標籤中內聯）
cssnano是用來壓縮css文件的，不過看網上說使用webpack，css-loader自帶了，不須要配置，不知道真假，不事後面會提到一個自動插件工具，裏面說有一個cssnano
正常按照官方說法，是經過安裝uglifyjs-webpack-plugin插件能夠實現壓縮，不過翻閱網上資料，也有說要安裝插件來壓縮css的，無論如何，先操做一番試試
安裝插件

// 注意這個針對webpack 4.0及以上
npm install optimize-css-assets-webpack-plugin cssnano --save-dev

// webpack 4.0一下要帶版本號
optimize-css-assets-webpack-plugin@3.2.0

安裝完插件後，須要在webpack.config.js的插件裏面配置一下

// 引入插件
const OptimizeCss = require('optimize-css-assets-webpack-plugin')
const cssnano = require('cssnano')

plugins: [
    new OptimizeCss({
        assetNameRegExp: /\.style\.css$/g,
        cssProcessor: cssnano,
        cssProcessorOptions: { discardComments: { removeAll: true } },
        canPrint: true,
    })
],
optimization: {
    minimizer: [new OptimizeCss({})],
}

大體插件配置就是這樣，具體選項意思大概以下：

assetNameRegExp：一個正則表達式，指示應優化\最小化的資產的名稱。提供的正則表達式針對配置中ExtractTextPlugin實例導出的文件的文件名運行，而不是源CSS文件的文件名。默認爲/\.css$/g
cssProcessor：用於優化\最小化CSS的CSS處理器，默認爲cssnano。這應該是一個跟隨cssnano.process接口的函數（接收CSS和選項參數並返回一個Promise）。
cssProcessorOptions：傳遞給cssProcessor的選項，默認爲 {}
cssProcessorPluginOptions：傳遞給cssProcessor的插件選項，默認爲 {}
canPrint：一個布爾值，指示插件是否能夠將消息打印到控制檯，默認爲 true

2、進階級挖坑

如今基本上不用最基礎的css文件，都會使用預處理器，那麼針對預處理器，也要配置相應的loader

一、sass

首先是安裝模塊

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

安裝好以後就要開始配置，能夠在以前的css配置基礎上進行，也能夠從新配置一個對象

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

sass和scss的區別：sass-loader 會默認處理不基於縮進的 scss 語法。爲了使用基於縮進的 sass 語法，你須要向這個 loader 傳遞選項：

{
    loader: 'sass-loader',
    options: {
        indentedSyntax: true
    }
}

二、less

首先是安裝模塊

npm install less less-loader --save-dev

安裝好以後就要開始配置，能夠在以前的css配置基礎上進行，也能夠從新配置一個對象

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

三、stylus

首先是安裝模塊

npm install stylus stylus-loader --save-dev

安裝好以後就要開始配置，能夠在以前的css配置基礎上進行，也能夠從新配置一個對象

module: {
    rules: [
        {
            test: /\.styl(us)?$/,
            use: [
                'vue-style-loader',
                'css-loader',
                'stylus-loader'
            ]
        }
    ]
}

3、終極挖坑

css中最煩的就是寫兼容了，一個樣式要加前綴寫四五遍，太坑爹了，因此咱們能夠在webpack裏面配置模塊來讓它自動添加前綴
安裝模塊

npm install postcss-loader autoprefixer --save-dev

模塊安裝完成以後，能夠在css裏面配置

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                'vue-style-loader',
                {
                    loader:  'css-loader',
                    options: {
                        importLoader: 1 // 不知道爲何，就跟着寫吧
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true
                    }
                },
                'sass-loader'
            ]
        }
    ]
}

注意這裏，autoprefixer以前vue項目是有一個postcss.config.js文件，在這裏面配置
可是按照這個配置，彷佛並無看見在哪裏引用這個js文件，後面看網上是在optios裏面配置一個config
postcss.config.js

// const autoprefixer = require('autoprefixer')
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

調用：

{
    loader: 'postcss-loader',
    options: {
        config: {
            path: 'postcss.config.js'
        }
    }
}

可是其實也能夠在postcss-loader裏面配置

{
    loader: 'postcss-loader',
    options: {
        sourceMap: true,
        plugins: [
            require('autoprefixer')
        ],
    }
}

看網上有說：這個配置main.js裏面引入的css找不到，須要配置下面兩個，能夠試試：

{
    test: /\.(sc|c)ss$/,
    exclude:/node_modules/, // 配置node_module裏面的css
    include:'/src/', // 配置src裏面的css
}

注意配置完上面的東西，還須要在package.json裏面或者postcss.config.js裏面配置支持的瀏覽器，不然可能只會添加-webkit-css
postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {
            browsers: ['last 7 iOS versions', 'last 3 versions', '> 1%']
        }
    }
}

webpack.config.js
添加一個browserslist數組

module.exports = {
    "browserslist": [
        "defaults",
        "not ie < 11",
        "last 2 versions",
        "> 1%",
        "IOS 7",
        "last 3 IOS versions"
    ]
}

好了，到這裏基本上算是結束，上面代碼沒有是實操過，不知道結果如何，下面是postcss拓展
postcss-cli腳手架
這個腳手架裏面包含了不少插件，有興趣能夠看一下gitHub網址

autoprefixer是PostCSS最著名的一款插件，就不過多介紹了，相信同窗們都使用過。 
postcss-cssnext (內置autoprefixer) 容許你使用將來的css語法，如css4（能夠理解爲css中的Babel） 
postcss-sprites 自動製做雪碧圖，不用手動拼接啦，哈哈哈 
cssnano 壓縮css代碼(若是你是用webpack的話，css-loader集成了cssnano，你不須要再次引入) 
postcss-hash-classname 把轉換後的css文件名附上哈希值 
pixrem 將rem轉換爲px 
postcss-px-to-viewport 將px轉換爲vh和vw（推薦做爲移動端的計量單位，而不是rem） 
postcss-pxtorem 將px轉換爲rem

安裝腳手架

npm install postcss-cli --save-dev

具體如何使用之後再說，關於上面的css配置這樣配置完成後，css是加載在js文件裏面的，全部須要分離出來成爲一個單獨的css文件，具體是使用extract-text-webpack-plugin插件實現分離
插件具體用法不說了，分離以後上面的css配置須要改動一下，這個配置是在生產環境下設置，開發環境不須要

{
    test: /\.(sc|c)ss$/,
    use: ExtractTextWebpackPlugin.extract({
        fallback: 'vue-style-loader',
        use: [
            'css-loader',
           {
                loader: 'postcss-loader',
                options: {
                      sourceMap: true,
                }
          },
          'sass-loader'
        ]
    })
}

在插件裏面輸出css配置

plugins: [
    new ExtractTextWebpackPlugin(
        'styles.[contenthash:8].css'
    )
]

一個騷操做
能夠在配置loader的時候，在options中經過data來配置全局公共變量，這個變量能夠是字符串，也能夠一個公共文件，這個是不要引入的

{
    test: /\.scss$/,
    options: {
        data: `$color: red;`
    }
}

// 或者這樣
{
    test: /\.scss$/,
    options: {
        data: `global.css`
    }
}