webpack的簡單配置

　　本人剛開始也不會寫webpack配置，剛開始在網上搜索了了一些，看的也是剛剛理解，因此準備本身寫下來，已做記念和貢獻給像我同樣不會配置的「童鞋」們！

一、建立webpack配置文件

　　在項目文件下建立一個webpack.config的js文件。

　　

二、配置文件建立好了，咱們就開始正式配置webpack了。

　　一、咱們要安裝nodejs,應爲webpack基於nodejs，nodejs能夠點擊這裏下載；

　　二、安裝完nodejs以後，咱們打開命令窗口，找到你的項目文件，在項目文件webpack.config.js文件所在的目錄下

　　　　輸入npm install webpack --save-dev（下載webpack依賴插件到本地項目中），下載完成以後，在大家的項目文件中（與webpack.config.js文件同級目錄下）會自動建立node_modules文件夾，裏面裝的就是全部要的本項目要用的依賴插件（固然，如今只有一個webpack插件），咱們先用到什麼先下載什麼插件，若是有須要後面再下載。

 

　　說明：下圖爲在項目文件下，打開命名窗口，輸入安裝webpack插件

　　

　　說明：下圖是下載webpack完成時

 

　　

 

　　說明：下圖爲項目文件下自動建立的node_modules

 　　

 

　　三、完成以上步驟以後，咱們開始真正的配置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'
        }
    }　　
}

四、以上是配置webpack的代碼，配置完成以後，在你webpack.config.js文件所在的目錄下打開命令窗口（能夠借鑑第一步），輸入webpack/webpack -w

 （編譯，沒改動一次代碼，要從新再次輸入webpack進行編譯 / 自動編譯，改動代碼並保存以後，能夠自動進行編譯），但願對像我同樣的小白有所幫助。

 

結語：就這樣簡單的webpack配置已經完成了，你能夠安心寫你的別的代碼了