上面的代码中，我们覆盖了 webpack.config.js 配置文件的 config.plugins 项，并且添加了 config.vue 项，补血药知道为什么，就是这么用的，如果一定要知道为什么也可以，这需要你多去了解vue以及vue-loader的工作原理.
然后修改 package.json 文件中的 script 项为如下：
"scripts": { "build": "webpack --display-modules --display-chunks --config build/webpack.prod.conf.js", "dev": "node ./build/dev-server.js" },
我们使用 webpack.prod.conf.js 为配置去构建，接下来执行：
npm run build
查看你的输出内容，如下图，css文件未提取出来了：
另外我们还可以添加如下插件在我们的 webpack.prod.conf.js 文件中，作为生产环境使用：
config.plugins = [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), // 压缩代码 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin(), // 提取css为单文件 new ExtractTextPlugin("../[name].[contenthash].css"), new HtmlWebpackPlugin({ filename: '../index.html', template: path.resolve(__dirname, '../app/index/index.html'), inject: true }) ];
大家可以搜索这些插件，了解他的作用，这篇文章要介绍的太多，所以我一一讲解了。
到这里实际上搭建的已经差不多了，唯一要做的就是完善，比如公共模块的提取，如何加载图片，对于第一个问题，如何提取公共模块，我们可以使用 CommonsChunkPlugin 插件，在 webpack.prod.conf.js 文件中添加如下插件：
new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js', }),
然后在 webpack.config.js 文件中配置入口文件：
entry: { index: path.resolve(__dirname, '../app/index/index.js'), vendors: [ 'Vue' ] },
上面代码的意思是，我们把Vue.js当做公共模块单独打包，你可以在这个数组中增加其他模块，一起作为公共模块打包成一个文件，我们执行构建命令，然后查看输出，如下图，成功提取：
对于加载图片的问题，我们知道，webpack的哲学是一切皆是模块，然后通过相应的loader去加载，所以加载图片，我们就需要使用到 url-loader，在webpack.config.js 文件中添加一个loader配置：
loaders: [ // 使用vue-loader 加载 .vue 结尾的文件 { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel?presets=es2015', exclude: /node_modules/ }, // 加载图片 { test: /\.(png|jpg|gif|svg)$/, loader: 'url', query: { limit: 10000, name: '[name].[ext]?[hash:7]' } } ]