配置webpack
第一步: 配置 npm install -g webpack
第二步: 設定全域性（在你的專案目錄裡面按住shift+滑鼠右鍵開啟命令視窗） npm --save-dev webpack

第三步：建立資料夾app 裡面放main.js work.js檔案
建立資料夾public 裡面放index.html檔案
第四步：在main.js裡面引入require('./work.js'); //入口檔案
work.js裡面就是你要寫的專案檔案
第五步：在index.html裡面引入webpack檔案 (<script type="text/javascript" src="./webpack.js "></script>)

webpack app/main.js  public/webpack.js

public/webpack.js就是生成的壓縮檔案
webpack 是個命令 app/main.js意思是到這個資料夾裡面 public/webpack.js就是把main.js的檔案通過webpack生成到public資料夾下面的webpack.js裡面
簡便的編譯
在專案資料夾下面新建一個webpack.config.js檔案（一定是這個名字）,
在裡面輸入你要生成的檔案

module.exports ={
    //入口檔案的檔案（檔案是app資料夾裡面的main.js）
 

    entry:__dirname+"/app/main.js",
    output:{
        // 打包後放置的位置(在public資料夾裡面生成webpack打包檔案)
        path:__dirname+"/public",
        // 打包後我們的檔案
        filename:'webpack.js'
    }
}

生成包
在此檔案視窗輸入webpack就可以生成

用法
在index.html檔案裡面引入

    <script type="text/javascript" src="./webpack.js "></script
 
>

第二中配置全域性
在package.json裡面

"start":"webpack",

標準建立打包流程

1：新建webpack.config.js
2: 在package.json的script裡面
 "scripts": {
    "start":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

  可以輸入npm start就可以生成

var webpack = require("webpack");
//var Html = require("html-webpack-plugin");
module.exports ={
    //入口檔案的檔案
    entry:__dirname+"/app/main.js",
    output:{
        // 打包後放置的位置
        path:__dirname+"/public",
        // 打包後我們的檔案
        filename:'webpack.js'
    },
    //配置json css
    module:{
        loaders:[
            {
                test:'/\.json$/',
                loader:'json-loader'
            },
            {
                test:'/\.css$/',
                loader:'style!css!postcss'
            },
            {
                test:'/\.js$/',
                loader:'babel-loader',
                exclude:/node_modules/,//遮蔽這裡面的js檔案
                query:{
                    presets:["es2015"]
                }
            }

        ]
    },
    plugins:[
            new webpack.BannerPlugin("諸葛蒼穹"),
            // new Html({
            //  template:__dirname + '/app/index.html'
            // })
    ],
    //postcss:[autoprefixer({browsers:['last 2 versions']})]
    devServer:{
        contentBase:'./public',//所載入的頁面所在的目錄
        colors:true,
        inline:true, //實時重新整理
        hot:true


    }

}