webpack 環境安裝

一、首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm，Webpack 須要Node.js v0.6 以上支持，建議使用最新版 Node.js。

二、安裝Webpack 到全局環境下 ：

npm install webpack -g //（能夠經過命令行 webpack -h 或webpack -v 驗證）

三、將 Webpack 安裝到實際項目的依賴中，這樣就可使用項目本地版本的 Webpack。

npm install webpack --save-dev  //查看 webpack 版本信息 : npm info webpack
 //安裝指定版本的 webpack: npm install webpack@1.12.x --save-dev

四、肯定是否有 package.json，沒有就經過 npm init 建立

五、安裝Loader轉換器（只須要在本地安裝，不需 -g）(Webpack 自己只能處理原生的 JavaScript 模塊，可是 loader 轉換器能夠將各類類型的資源轉換成 JavaScript 模塊。這樣，任何資源均可以成爲 Webpack 能夠處理的模塊。）

//經常使用的轉換插件
npm install css-loader style-loader//轉換CSS 
npm install postcss-loader --save-dev
npm install url-loader  //轉換圖片
npm install expose-loader --save-dev //暴露
npm install babel-loader babel-core 或 npm install jsx-loader  // jsx轉換
npm install less less-loader --save-dev //
npm install babel-preset-es2015  //ECMAScript6語法依賴

六、配置

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    //頁面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件輸出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加載器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 來處理
            { test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader' },
            //.less 轉換loader
            { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //.js 文件使用 jsx-loader 來編譯處理
            { test: /\.jsx$/, loader: 'jsx-loader?harmony' },
            //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
            //ECMAScript6語法依賴
            { test: /\.jsx?$/,
              exclude: /node_modules/, 
              loader: 'babel',
              query: {presets: ['es2015', 'react']
            }
         }
        ]
    },
    //插件項
    plugins: [commonsPlugin],
    //其它解決方案配置(webpack 有一個智能解析器，幾乎能夠處理任何第三方庫，不管它們的模塊形式是 CommonJS、 AMD 仍是普通的 JS 文件。甚至在加載依賴的時候，容許使用動態表達式 require("./js/my.js"),可是這樣過於複雜，咱們能夠經過這個配置項使得後面開發工做更加方便。)
    resolve: {
        //root: 'E:/github/flux-example/src', //絕對路徑
        //自動擴展文件後綴名，意味着咱們require模塊能夠省略不寫後綴名
        extensions: ['', '.js', '.json', '.scss'],
        //模塊別名定義，方便後續直接引用別名，無須多寫長長的地址
        alias: {
            my: './js/my.js', //後續直接 var 標識符 = require('my') 便可 //標識符首字母不強要求大小寫，eg：my 或 My
            api: './api.js'
        }
    }
};

⑴ plugins 是插件項，這裏咱們使用了一個 CommonsChunkPlugin 的插件，它用於提取多個入口文件的公共腳本部分，而後生成一個 common.js 來方便多頁面之間進行復用。

⑵ entry 是頁面入口文件配置，output 是對應輸出項配置（即入口文件最終要生成什麼名字的文件、存放到哪裏）。