Webpack React JSX Babel ES6 簡單配置

確保安裝正確的 npm 依賴項（babel 決定將自己拆分為一堆軟體包，與對等依賴項有關）：

npm install webpack webpack-node-externals babel-core babel-loader babel-preset-react babel-preset-latest --save

webpack.config.js：

module.exports = {
    context: __dirname, // sets the relative dot (optional)
    entry: "./index.jsx",
    output: {
        filename: "./index-transpiled.js"
    },
    module: {
        loaders: [{
            test: /\.jsx$/,
            loader: "babel?presets[]=react,presets[]=latest" // avoid .babelrc
        }]
    }, // may need libraryTarget: umd if exporting as a module
    externals: [require("webpack-node-externals")()], // probably not required
    devtool: "inline-source-map"
};

webpack-node-externals 是一個掃描你的 node_modules 的函式，並確保它們不會與你的前端程式碼一起被轉換和繫結，但它確保 bundle 保留對它們的引用。這有助於加快轉換速度，因為你不會重新編碼庫。