webpack 開發的一點思路--未完待續

npm init

用npm 去初始化一個項目，並把配置信息保存在 package.json文件中

npm init

安裝Webpack

    npm install --save-dev webpack

創建文件

回到之前的空文件夾，並在裏面創建兩個文件夾，app public ，app 文件夾用來存放原始數據，和我們將寫的javascript 模塊，public 文件夾來存放之後供瀏覽器讀取的文件 （包括使用webpack 打包生成的js文件以及一個index.html文件）。接下來我們再創建兩個個文件
index.html public文件夾中

main.js 放在app文件夾中 入口文件

簡單的webpack配置

var webpack = require('webpack');
var path= require('path');

module.exports = {
    //頁面入口文件配置
    entry: {
        index : './app/index.js'
    },
    //入口文件輸出配置
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: '[name].js'
    },
    devServer:{
        historyApiFallback:true,
        inline:true
    },
    module: {
        //加載器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
};

安裝 webpack-dev-server

    npm install webpack-dev-server --save-dev

package.json script

"start": "webpack-dev-server --content-base dist/ --inline

npm install eslint –save-dev

npm install eslint --save-dev
npm install eslint-config-airbnb --save-dev

安裝 eslint 來做爲開發時候的一個代碼的規範
說起來eslint ，那就提一下 airbnb javascript ,　　Airbnb 是一家位於美國舊金山的公司，本文是其內部的 JavaScript編碼規範，寫得比較全面，在 Github 上有 16,686 + Star，3,080 + fork.這裏我放一箇中文版的，方便學習。
https://github.com/yuche/javascript
http://eslint.cn

創建.eslintrc.json的配置文件

{
    "extends": "airbnb/base",
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "rules": {
        // "no-const-assign": "warn",
        // "no-this-before-super": "warn",
        // "no-undef": "warn",
        // "no-unreachable": "warn",
        // "no-unused-vars": "warn",
        // "constructor-super": "warn",
        // "valid-typeof": "warn"
    }
}

未完待續