webpack笔记（3）对css进行操作

1.打包CSS文件

npm安装：

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

webpack.config.js下配置

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

在入口文件引入css文件进行测试

import css from './css/xxx.css';

 

 

2.对css进行抽离

npm安装

npm install --save-dev extract-text-webpack-plugin

webpack.config.js下配置

//对css进行抽离
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    module:{
        rules :[
            {
                test : /\.css$/,
                use:extractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use:[
                        'css-loader'
                    ]
                })
            } 
        ]  
    }
    ,plugins:[
        new extractTextWebpackPlugin('./css/[name].css')    //将css抽离至出口文件目录:css/[name].css
    ]
}

 

 

 

3.自动添加后缀

npm安装

npm install --save-dev postcss-loader autoprefixer

根目录下创建postcss.config.js,并配置

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

webpack.config.js下配置

//对css进行抽离
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    module:{
        rules :[
            {
                test : /\.css$/,
                use:extractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use:[
                        'css-loader',
                        'postcss-loader'
                    ]
                })
            } 
        ]  
    }
    ,plugins:[
        new extractTextWebpackPlugin('./css/[name].css')    //将css抽离至出口文件目录:css/[name].css
    ]
}

 

 

4.消除未使用的css

注：使用这个插件必须配合extract-text-webpack-plugin插件

npm安装

npm install --save-dev purifycss-webpack purify-css

webpack.config.js下配置

const glob = require('glob');    //同步检查html模板
const purfyCssPlugin = require('purifycss-webpack');

module.exports = {
    plugins:[
        new purfyCssPlugin({
             paths:glob.sync(path.join(__dirname,'src/*.html'))
        })
        
    ],
}

 

5.打包和分离LESS

npm安装

//安装Less的服务
npm install --save-dev less

//安装Less-loader用来打包使用
npm install --save-dev less-loader

编写一个less文件:style.less

@body-color :#000;
body{
    background-color:@body-color;
}

引入到入口文件entery.js中

import less from './css/style.less'

webpack.config.js下配置

//对css进行抽离
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    module:{
        rules :[
            {
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }]
                })
            }
        ]
    }
    ,plugins:[
        new extractTextWebpackPlugin('./css/[name].css')    //将css抽离至出口文件目录:css/[name].css
    ]
}

 

 

 

6.打包和分离SCSS

npm安装

//sass-loader依赖于node-sass，要先安装node-sass
npm install --save-dev node-sass

//安装Less的服务
npm install --save-dev sass-loader

编写一个scss文件:style.scss

$body-color :#000;
body{
    background-color:$body-color;
}

引入到入口文件entery.js中

import scss from './css/style.scss'

webpack.config.js下配置

//对css进行抽离
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    module:{
        rules :[
            {
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }]
                })
            }
        ]
    }
    ,plugins:[
        new extractTextWebpackPlugin('./css/[name].css')    //将css抽离至出口文件目录:css/[name].css
    ]
}