###Q1: display: inline-block 布局时, 间距消失了

A1: 在 vue-loader 15版本之前, 是不会删除元素之间空格的(至少会保留1个空格), 但是在 vue-loader 15之后, 如果你不小心这么设置了:

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        compilerOptions: {
            preserveWhitespace: false
        }
    }
}

那么元素之间的空格就不保留了, 如果你需要保留一个空格, 请将preserveWhitespace设置成true, 或者干脆删除

###Q2: ccs 压缩后, z-index 被重写

A2: webpack4 已经不支持用extract-text-webpack-plugin来优化 css, 需要改成optimize-css-assets-webpack-plugin和mini-css-extract-plugin, 如果你直接这么配置:

optimization: {
    // 略
    minimizer: [
        new OptimizeCSSAssetsPlugin({})
    ]
    // 略
},

那么z-index将会被重写, 这时候你需要这么设置:

optimization: {
    minimizer: [
        new OptimizeCSSAssetsPlugin({
            cssProcessorOptions: {
                discardComments: { removeAll: true },
                // 避免 cssnano 重新计算 z-index
                safe: true
            }
        })
    ]
},

###Q3: webpack4 如何生成 manifest.js 和 vendors.js

A3: 在 webpack3 时代, 生成manifest.js和vendors.js文件很简单:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendors',
        minChunks: function(module, count) {
            return (module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)
        }
    }),
    new webpack.optimize.CommonsChunkPlugin({name: 'manifest', chunks: ['vendors']}),
]

然而, 在 webpack4 取消了CommonsChunkPlugin了, 改成optimization.splitChunks后, 一开始真是一脸懵逼
webpack4 下的配置方法是:

optimization: {
    runtimeChunk: {
        name: 'manifest'
    },
    splitChunks: {
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                priority: -20,
                chunks: 'all'
            }
        }
    }
},

恩, 万事俱备, 现在就差一个需要招聘webpack 配置师的公司了...