Webpack 配置 React 開發(fā)環(huán)境

Webpack 是一個前端資源加載/打包工具，只需要相對簡單的配置就可以提供前端工程化需要的各種功能，并且如果有需要它還可以被整合到其他比如 Grunt / Gulp 的工作流。

安裝 Webpack：npm install -g webpack

Webpack 使用一個名為 webpack.config.js 的配置文件，要編譯 JSX，先安裝對應的 loader: npm install babel-loader --save-dev

假設我們在當前工程目錄有一個入口文件 entry.js，React 組件放置在一個 components/ 目錄下，組件被 entry.js 引用，要使用 entry.js，我們把這個文件指定輸出到 dist/bundle.js，Webpack 配置如下：

var path = require('path');

module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.js|jsx$/, loaders: ['babel'] }
        ]
    }
}

resolve 指定可以被 import 的文件后綴。比如 Hello.jsx 這樣的文件就可以直接用 import Hello from 'Hello' 引用。

loaders 指定 babel-loader 編譯后綴名為 .js 或者 .jsx 的文件，這樣你就可以在這兩種類型的文件中自由使用 JSX 和 ES6 了。

監(jiān)聽編譯: webpack -d --watch

更多關(guān)于 Webpack 的介紹

• webpack-howto