記一個簡單的webpack.config.js

module.exports = {
    entry: './basic/app.js',
    output: {
        path: './assets/',
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [{
            //babel-loader加載器，將es6轉es5
            test: /\.js$/,
            loader: 'babel'
        }, {
            //style-loader,css-loader加載器，當調用bundle.js
            //時動態生成sytle標籤，插入html中的head
            test: /\.css$/,
            loader: 'style!css'
        }]
    }
};

package.json 中的安裝依賴

"devDependencies": {
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "css-loader": "^0.25.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2"
  }

安裝過程的坑

cnpm install webpack --save-dev
cnpm install babel-loader --save-dev
cnpm install css-loader --save-dev
cnpm install style-loader --save-dev

運行webpack 出現錯誤，後來查了babel-loader須要安裝babel-preset-es2015包依賴

cnpm install babel-preset-es2015 --save-dev