webpack -- css的loader挖坑

时间 2019-11-11

标签 webpack css loader 栏目 CSS 繁體版

原文原文链接

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来额外配置一些属性：如：css

{
    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也能成，不过仍是照着官方来吧vue

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的，无论如何，先操做一番试试
安装插件node

// 注意这个针对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的插件里面配置一下webpack

// 引入插件
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({})],
}

大体插件配置就是这样，具体选项意思大概以下：ios

assetNameRegExp：一个正则表达式，指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
cssProcessor：用于优化\最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数（接收CSS和选项参数并返回一个Promise）。
cssProcessorOptions：传递给cssProcessor的选项，默认为 {}
cssProcessorPluginOptions：传递给cssProcessor的插件选项，默认为 {}
canPrint：一个布尔值，指示插件是否能够将消息打印到控制台，默认为 true

2、进阶级挖坑

如今基本上不用最基础的css文件，都会使用预处理器，那么针对预处理器，也要配置相应的loadergit

一、sass

首先是安装模块github

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

安装好以后就要开始配置，能够在以前的css配置基础上进行，也能够从新配置一个对象web

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

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`
    }
}