webpack学习笔记（三）style

webpack不能直接解析css，需要解析。

Loading CSS

加载样式需要css-loader和style-loader。 css-loader可以通过@import和url()去查找匹配的文件，类似于es2015的import，将css样式引入到js中。 style-loader通过标签将css样式注入到html中。

安装，

npm install css-loader style-loader --save-dev
复制代码

webpack.plugin.js

...
const loadCSS = (include,exclude)=>({
 module: {
        rules: [
            {
                test:/\.css$/,
                include,
                exclude,
                use:["style-loader", "css-loader"],
            }
        ]
    }
})
...
复制代码

从上面中的代码可以清楚的认识到css-loader和style-loader的用法，loader是将源文件加载然后输出新的文件，而且他们是从右至左加载，可以理解成styeLoader(cssLoader(input))。

less

安装less

npm install  less  --save-dev
复制代码

webpack.plugin.js

...
const loadCSS = (include,exclude)=>({
 module: {
        rules: [
            {
                test:/\.less$/,
                include,
                exclude,
                use:["style-loader", "css-loader", "less-loader"],
            }
        ]
    }
})
...
复制代码

分离css

打包后的代码最好是css与js分离，为了这个目的我们需要新的插件和loader:MiniCssExtractPlugin。 首先安装：

npm install mini-css-extract-plugin --save-dev
复制代码

安装好了过后配置

webpack.plugin.js

...
const extractCSS = ({include,exclude,use = []}) => {
    const plugin = new MiniCssExtractPlugin({
        filename: "[name].css",
    })
    return {
        module:{
            rules: [
                {
                    test: /\.less$/,
                    include,
                    exclude,
                    use: [
                      MiniCssExtractPlugin.loader,
                    ].concat(use),
                }
            ]
        },
        plugins:[plugin]
    }
}

...
复制代码

webpack.config.js

...
// 生产环境
const productionConfig = merge(
    commonConfig,
    extractCSS({use:["css-loader", "less-loader"]})
    )
...
复制代码

这样就可以将css分离出来。

打包去除冗余的CSS

我们需要找一些css库来测试这个功能，在这里我们就使用Pure.css首先安装

npm install purecss --save
复制代码

然后在我们的项目中选择一个元素，然后将其中一个元素的赋予相应的类名，

src/component.js

  export const two =  (text = "Hello dasd") => {
    const element = document.createElement("button");
    element.className = 'pure-button'
    element.innerHTML = text;
  
    return element;
  };
复制代码

这个时候打包后的css会将所有的文件都打包到main.css文件中。这肯定不是我们想要的，我想要的是在只被使用的css打包的main.css中。

使用PurifyCSS

首先安装，

npm install glob purifycss-webpack purify-css --save-dev
复制代码

然后再配置

webpack.prod.js

...
const purifyCSS = ({ paths }) => ({
  plugins: [new PurifyCSSPlugin({ paths })],
});
...
复制代码

然后将工具和之前的配置合并，

webpack.config.js

...
const PATHS = {
    app: path.join(__dirname, "./../src"),
};
...
const productionConfig = merge(
    commonConfig,
    extractCSS({use:["css-loader", "less-loader"]}),
    purifyCSS({
        paths: glob.sync(`${PATHS.app}/**/*.js`, { nodir: true }),
      })
    )
...
复制代码

这样就可以实现将没用的css给过滤掉。

自动补全前缀

为了兼容所有的浏览器，有时候需要对某些css属性进行浏览器的前缀补全。就像chrome和ie之间会有一些差异。我们需要在webpack中进行配置，首先我们需要安装Autoprefixing。

npm install postcss-loader autoprefixer --save-dev
复制代码

设置相关配置 webpack.prod.js

...
const autoprefix = () => ({
    loader: "postcss-loader",
    options: {
      plugins: () => [require("autoprefixer")({
        'browsers': ['> 1%', 'last 2 versions']
    })],
    },
  });
...
复制代码

这儿默认的 { 'browsers': ['> 1%', 'last 2 versions'] }很重要，在测试的过程中，发现这部分必须要要定义。

然后将配置好的loader安排到生产环境中

webpack.config.js

...
const productionConfig = merge(
    commonConfig,
    extractCSS({use:["css-loader",autoprefix(),"less-loader"]}),
    purifyCSS({
        paths: glob.sync(`${PATHS.app}/**/*.js`, { nodir: true }),
      })
    )
...
复制代码

这样就大功告成了。

写到这儿我们做了这么几件事

1、正确的使用了less-loader，css-loader等实现了在开发环境下，正确的解析css和less；

2、学习了如何使用相应的工具将css从js中分离出来；

3、学习了如何使用相应的工具将冗余的css样式去除；

4、学习了如何使用相应的工具补全了css类的前缀以兼容相应的浏览器