第一步：
全局安装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 开启
构建webpack环境
原文地址：http://www.cnblogs.com/tqt--0812/p/7531337.html