第一步：
全局安装webpack
npm install webpack -g
第二步：
创建项目，并自动生成package.json文件
npm init
第三步：
安装需要的插件
npm install webpack webpack-dev-server babel-core babel-loader copy-webpack-plugin css-loader style-loader vue-loader vue-style-loader vue-template-compiler --save-dev
webpack (本地webpack)
webpack-dev-server (wabpack搭建本地服务)
babel-core (Babel核心模块，Babel主要用于js超集的编译如, ES6， ES7， TS)
babel-loader (js的loader)
copy-webpack-plugin (拷贝文件插件)
css-loader style-loader (样式解析)
vue-loader (vue的loader)
vue-style-loader (vue文件的样式loader)
vue-template-compiler (vue文件组件的loader)
第四步：
用配置文件来打包，并开启服务
创建webpack.config.js文件
const webpack = require(‘webpack‘); const CopyWebpackPlugin = require(‘copy-webpack-plugin‘); module.exports = { entry: __dirname + ‘/app/main.js‘, //唯一文件入口 output: { path: __dirname + ‘/public/‘, //打包后文件路径 filename: ‘myAll.js‘ //打包后文件名 }, module: { loaders: [ //rules和loaders都可以 { test: /\.js$/, //用于解析ES6 loader: ‘babel-loader‘, exclude: /node_modules/, }, { test: /\.vue$/, //用于解析.vue文件 loader: ‘vue-loader‘, }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader", }), } ] }, devServer: { contentBase: ‘./public‘, //服务开启后加载的文件目录 port: 8081, //本地服务监听端口 historyApiFallback: true, //页面不跳转 inline: true //实时刷新页面 }, plugins: [ //内置插件 new webpack.BannerPlugin(‘版权所有，翻版必究‘), //为文件添加标识 new webpack.optimize.OccurrenceOrderPlugin(), //为组件分配ID new webpack.optimize.UglifyJsPlugin(), //压缩js文件 //外部插件 new CopyWebpackPlugin([ //用于文件复制 { from: ‘src/mock/api.json‘, to: ‘mock‘ }, { context: ‘src/images‘, from: ‘*‘, to: path.join(__dirname, ‘dist‘, ‘images‘) } ]), ] };
第五步：
开启本地服务的配置
//package.json "scripts": { "server": "webpack-dev-server --open --progress" }
命令npm run server 开启
原文：http://www.cnblogs.com/tqt--0812/p/7531337.html