yo-cli v2.1.9

yo-cli

webpack配置文件太过杂乱，yo-cli可以用简单语义化的配置构建你的工程。 当然他其实就是一个webpack配置翻译器。 而且目前只是基础版本，很多情况都没有考虑和测试，暂时只是自用。

例子：

yo.config.js

const yo = require('yo-cli');
const path = require('path');

module.exports = yo()
    .entry('./app/app.js')
    .output({
        publicPath: '/'
    })
    .style({
        preLoaders: {
            scss: true
        },
        extract: true
    })
    .js({
        babel: {
            include: path.join(__dirname, '../app')
        }
    })
    .vue()
    .uglify()
    .sourceMap()
    .run();

和一下配置功能是一样的：

const path = require('path');

module.exports = {
    context: path.join(__dirname, ''),
    entry: "./src/app.js",
    output: {
        path: path.join(__dirname, '/dist'),
        publicPath: "/"
    },
    resolve: {
        extensions: [ ".js", ".json", ".vue" ],
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name].css',
            allChunks: true,
        }),
        new webpack.optimize.UglifyJsPlugin({
            parallel: true,
            sourceMap: true,
            uglifyOptions: {
                compress: {
                    warnings: false
                },
                comments: false
            }
        }),
        new OptimizeCSSPlugin({
            cssProcessorOptions: { safe: true, map: { inline: false } }
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: `"production"`
            }
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new FriendlyErrorsPlugin({
            clearConsole: true
        }),
        new webpack.HashedModuleIdsPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    cssSourceMap: true,
                    extractCSS: true
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, '../src')
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ],
                    fallback: 'vue-style-loader'
                })
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ],
                    fallback: 'vue-style-loader'
                })
            }
        ]
    },
    devtool: "source-map"
}