React技術棧——webpack

一直在用fis3，也能完美知足目前業務需求。我廠的scrat也有大量的feature貼合業務線。

最近在看React，要打通React的技術棧，學習Webpack是必不可少的了。

從npm上安裝很簡單：

npm install webpack -g

Webpack特點：

<li>模塊化，支持異步和同步</li>
<li>Loader，把各類文件拆分紅模塊的支持</li>
<li>更機智的編譯</li>
<li>插件系統，提供各色各樣的插件，絕不遜色的其餘打包工具，要什麼價什麼</li>

簡單demo

先上第一個demo：

cats.js

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

app.js

var cats = require('./cats');
console.log('cats')

webpack登場：

webpack ./app.js app.bundle.js

這命令能夠cats.js打包進app.js裏面,最後生成app.bundle.js

利用配置文件來操做webpack

-webpack.config.js

module.exports = {
    entry: './src/app',
    output: {
        path: './bin',
        filename: 'app.bundle'
    }
}

配置完後，在文件夾直接webpack便可

使用loader

loader應該是webpack的預加載工具

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_moudles/,
            loader: 'babel-loader'
        }]
    }
}

使用plugins

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_moudles/,
            loader: 'babel-loader'
        }]
    },
    plugins: [
        new webapck.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                comments: false
            }
        })
    ]
}

CONFIGURATION OBJECT CONTENT

能夠編寫js，不單單是個json對象

entry

基本語法：
{
    context: _dirname + '/app',
    entry: './entry',
    output: {
        path: _dirname + '/dist',
        filename: 'bundle.js'
    }
}

傳入object時
{
    entry: {
        page1: './page1',
        page2: ['./entry1', './entry2']
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[id].bundle.js'
    }
}

output

multiple entries
{
    entry: {
        app: './src/app.js',
        search: './src/search.js'            
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/built'            
    }
}

//outpu: ./built/app.js  ./built/search.js

output.pubicPath

適用於相似CDN匹配需求
可添加hash繞過緩存機制
output: {
    path: '/home/project/cdn/assets/[hash]',
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

Watch

webpack有個很牛逼的地方，熱刷新。

配置好文件後，下面命令能夠監聽文件變化

webpack --watch

在配置文件裏同樣能夠實現：

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        filename: 'bundle.js',
    },
    watch: true
}

在作網頁開發時候，須要用到服務器，webpack提供了webpack-dev-server

安裝很簡單:

npm install webpack-dev-server -g

demo:

webpack-dev-server --host 0.0.0.0 --port 8080 --inline