Webpack 配置 React 開發環境

whjin發表於2017-07-02
WebReact開發環境

Webpack 配置 React 開發環境

先完成基本的配置項，後面在根據專案的複雜度加入更多的配置內容和技巧

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 了。

監聽編譯: webpack -d --watch

相關文章