Webpack现在有两个版本，v1和v2。安装节点。这里就不细说了，度娘来告诉你。cmd导航到development文件夹，按照提示生成package.json。npminit安装es6编译插件。$npminstallcss-loaderbabel-loaderbabel-corebabel-preset-es2015--save-dev安装webpack。$npminstallwebpackhtml-webpack-pluginextract-text-webpack-pluginvue-template-compiler--save-dev如果是v2版本，npminstall--save-devextract-text-webpack-plugin@beta安装还需要vue，vuex。$npminstallvuevuex配置webpack.config.js。参考文末代码。运行网页包。$webpack//webpackv1varwebpack=require('webpack');varHtmlWebpackPlugin=require('html-webpack-plugin');varExtractTextPlugin=require('extract-text-webpack-plugin');module.exports={entry:{app:'./app.js',//入口jsvendors:['vue','vuex'//单独提取vue，vuex打包成一个js]},output:{path:'dist',filename:'[name].js'},resolve:{extensions:['','.js','.css','.vue']},module:{loaders:[{test:/\.vue$/,loader:'vue',排除:/node_modules/},{test:/\.js$/,loader:'babel',排除:/node_modules/},{test:/\.css$/,loader:"style!css"},]},vue:{//从vueloaders中提取独立的css文件:{css:ExtractTextPlugin.extract("css")}},babel:{//es6到es5代码预设:['es2015'],plugins:['transform-runtime']//这必须安装babel-plugin-transform-runtime},plugins:[//将css提取到单个文件中newExtractTextPlugin("[name].[contenthash].css"),newwebpack.optimize.CommonsChunkPlugin({name:'vendors',filename:'vendors.js',}),//引用编译后的jsinindex.html,cssnewHtmlWebpackPlugin({filename:'index.html',template:'index.html',inject:true})]};//webpackv2varwebpack=require('webpack');varHtmlWebpackPlugin=require('html-webpack-plugin');varExtractTextPlugin=require复制代码('extract-text-webpack-plugin');module.exports={entry:{app:'./app.js',vendors:['vue','vuex','vue-router']},输出:{path:'dist',filename:'[name].js'},resolve:{//modules:["node_modules"],extensions:['.css','.vue','.js']},模块:{规则es:[{test:/\.vue$/,loader:"vue-loader",选项:{loaders:{"css":ExtractTextPlugin.extract("css-loader")}},exclude:/node_modules/},{test:/\.js$/,loader:"babel-loader",选项:{presets:['es2015'],plugins:['transform-runtime']},exclude:/node_modules/},{test:/\.css$/,use:["style-loader","css-loader"]},]},resolve:{别名:{'vue':'vue/dist/vue.common.js',//'vue-router':path.join(__dirname,'..','src')}},plugins:[//提取css为单文件newExtractTextPlugin({filename:"[name].[contenthash].css",allChunks:true}),newwebpack.optimize.CommonsChunkPlugin({name:'vendors',filename:'vendors.js',}),newHtmlWebpackPlugin({filename:'index.html',template:'index.html',注入：真})]};
