本人剛開始也不會寫webpack配置，剛開始在網上搜索了了一些，看的也是剛剛理解，所以准備自己寫下來，已作紀念和貢獻給像我一樣不會配置的“童鞋”們！
1、創建webpack配置文件
在項目文件下創建一個webpack.config的js文件。
2、配置文件創建好了，我們就開始正式配置webpack了。
1、我們要安裝nodejs,應為webpack基於nodejs，nodejs可以點擊這里下載；
2、安裝完nodejs之后，我們打開命令窗口，找到你的項目文件，在項目文件webpack.config.js文件所在的目錄下
輸入npm install webpack --save-dev（下載webpack依賴插件到本地項目中），下載完成之后，在你們的項目文件中（與webpack.config.js文件同級目錄下）會自動創建node_modules文件夾，里面裝的就是所有要的本項目要用的依賴插件（當然，現在只有一個webpack插件），我們先用到什么先下載什么插件，如果有需要后面再下載。
說明：下圖為在項目文件下，打開命名窗口，輸入安裝webpack插件
說明：下圖是下載webpack完成時
說明：下圖為項目文件下自動創建的node_modules
3、完成以上步驟之后，我們開始真正的配置webpack了。
/*
*@內容：webpack的配置
*@作者：web前端小白
*@時間：2016/7/4
* */
var webpack = require('webpack');
moudle.exports = {
//配置入口文件，入口文件可以以對象的形式配置，也可以以數組的形式配置,后綴名可以省略
/*
* 對象形式配置入口
* */
//entry:{
// index:'./index' //'./index.js'
//},
/*
* 數組形式配置入口
* */
entry: [
'./index' //'index.js'
],
//輸出文件出口
output: {
/*
輸出路徑，在這我們要手動創建一個文件夾，名字可以自己命名，
輸出的文件路徑是相對於本文件的路徑
* */
path: './dist', //輸出路徑
filename: '[name].bundle.js' //輸出文件名，文件可以自己定義，[name]的意思是與入口文件的文件對應，可以不用[name]，
},
/*
* 標題：加載器（loaders）
* 作用：需要下載不同別的加載器，如css，js，png等等
* */
loaders: [
{test: /\.js?$/, loaders: ['babel-loader']} //babel加載器可以把jsx的語法轉換為js的語法，也可以把es6的語法標准轉換es5的語法標准
/*
* 你可以在這配置別的加載器，寫法是一樣的
* */
],
/*
*
* */
resolve: {
/*
* 別名配置，配置之后，可以在別的js文件中直接使用require('d3')，將導入的文件作為一個模塊導入到你需要的項目中，不用配置別也可會當作模塊導入項目中，只是你要重復寫路徑而已。
* */
alias: {
'd3': 'd3/d3.min.js'
}
}
}
4、以上是配置webpack的代碼，配置完成之后，在你webpack.config.js文件所在的目錄下打開命令窗口（可以借鑒第一步），輸入webpack/webpack -w
（編譯，沒改動一次代碼，要重新再次輸入webpack進行編譯 / 自動編譯，改動代碼並保存之后，可以自動進行編譯），希望對像我一樣的小白有所幫助。
結語：就這樣簡單的webpack配置已經完成了，你可以安心寫你的別的代碼了