css工程化（PostCSS、webpack）

css工程化

目的：让项目更好的运转

• 组织
• 优化
• 构建
• 维护

---

PostCSS

• PostCSS本身只有解析能力
• 其他的属性全依赖于插件
• 目前有200多个插件

PostCSS常用插件

• postcss-import(atImport) 模块合并
• autoprefixier 自动添加前缀
• cssnano 压缩代码
• cssnext 使用新的css特性
• precss 变量、mixin、循环（类似预处理器sass）

---

PostCss 支持的构建工具

• CLI命令行
• webpack postcss-loader
• gulp-postcss
• grunt-postcss
• rollup-postcss

gulp-postcss

gulpfile.js

const gulp = require('gulp');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const atImport = require('postcss-import');

gulp.task('postcss', function () {
    var postcss    = require('gulp-postcss');

    return gulp.src('src/02-plugins-main.css')
        .pipe(postcss([
            atImport,
            autoprefixer({
                browsers:['last 2 versions']
            }),
            // cssnano
        ]))
        .pipe(gulp.dest('build/'));
});

直接使用>gulp postcss构建

---

Webpack

• JS是整个应用的核心入口
• 一切资源均有JS管理依赖
• 一切资源由webpack打包
• 打包依赖各种 *-loader

插件

• css-loader 将css变成js
• style-loader将js样式插入head
• ExtractTextPlugun 将css从JS中提取出来
• css-modules 解决css命名冲突的问题

配置文件结构

const path = require('path');
const HTMLPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const isDev = process.env.NODE_ENV === 'development';

const config = {
    target: 'web',
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    mode:'development',
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.styl/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            sourceMap:true,
                        }
                    },
                    'stylus-loader'
                ]
            },
            {
                test: /\.gif|jpg|jpeg|png|svg$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        name: '[name]-starxder.[ext]'
                    }
                }]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        new HTMLPlugin(),
        new VueLoaderPlugin()
    ]
};

if (isDev) {
    config.devtool = '#cheap-module-eval-source-map';
    config.devServer = {
        port: 8200,
        host: '0.0.0.0',
        overlay: {
            errors: true,
        },
        hot: true,
    };
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
}

module.exports = config;