webpack--css：自动处理CSS3属性前缀(十)

目录结构

before

after

文件内容

index.css

body{
    background-color: red;
    color: white;
}
#image{
    width: 28px;
    height: 28px;
    background-image: url(../images/aaaa.png);
    transform: rotate(30deg);
    box-shadow: 10px 10px 10px;
}

index.less

@blue :#00aaee;
#jie{
    width: 100px;
    height: 100px;
    transform: rotate(30deg);
    box-shadow: 10px 10px 10px;
    p{
        color: @blue;
    }
}

index.scss

$biao-color:#fff;
#biao{
    $width:100px;
    width: $width;
    height: 100px;
    transform: rotate(30deg);
    box-shadow: 10px 10px 10px;
    p{
        color: $biao-color
    }
}

postcss.config.js

安装依赖

cnpm install --save-dev postcss-loader autoprefixer

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

webpack.config.js

    module: {
        //规则
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    // use: "css-loader"
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    }, {
                        loader: 'less-loader'
                    },'postcss-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    }, {
                        loader: 'sass-loader'
                        },
                        'postcss-loader'],
                    fallback: 'style-loader'
                })
            },
            
        ]
    },

打包，运行

npm run build
npm run server

全部webpack.config.js

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var website = {
    publicPath: "http://192.168.1.9:1717/"
}
module.exports = {
    // 入口 
    entry: {
        entry: './src/entry.js',
    },
    // 出口
    output: {
        //绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: website.publicPath
    },
    // 模块
    module: {
        //规则
        rules: [
            // {
            //     test: /\.css$/,
            //     use: [
            //         {
            //             loader:'style-loader'
            //         }
            //     ]
            // },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    // use: "css-loader"
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
            },
            {
                test: /\.(png|jpg|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 5000,
                        outputPath: 'images/',
                    }
                }]
            }, {
                test: /\.(htm|html)$/i,
                use: ['html-withimg-loader']
            },
            // {
            //     test: /\.less$/,
            //     use: [{
            //         loader: 'style-loader'
            //     }, {
            //         loader: 'css-loader'
            //     }, {
            //         loader: 'less-loader'
            //     }]
            // }
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    }, {
                        loader: 'less-loader'
                    },'postcss-loader'],
                    fallback: 'style-loader'
                })
            },
            // {
            //     test: /\.scss$/,
            //     use: [{
            //         loader:'style-loader'
            //     },{
            //         loader:'css-loader'
            //     },{
            //         loader:'sass-loader'
            //     }]
            // },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    }, {
                        loader: 'sass-loader'
                        },
                        'postcss-loader'],
                    fallback: 'style-loader'
                })
            },
            
        ]
    },
    //插件
    plugins: [
        // new uglify()
        new htmlPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            template: './src/index.html'
        }),
        new ExtractTextPlugin("css/index.css"),
    ],
    //开发服务
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: '192.168.1.9',
        compress: true, //服务端是否启用压缩
        port: 1717
    }
}