第一步：

　　全局安裝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環境