[+]文章目录

Webpack 配置 React 开发环境

Webpack 是一个前端资源加载/打包工具,只需要相对简单的配置就可以提供前端工程化需要的各种功能,并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

安装 Webpack:npm install -g webpack

Webpack 使用一个名为 webpack.config.js 的配置文件,要编译 JSX,先安装对应的 loader: npm install jsx-loader --save-dev

假设我们在当前工程目录有一个入口文件 entry.js,React 组件放置在一个 components/ 目录下,组件被 entry.js 引用,要使用 entry.js,我们把这个文件指定输出到 dist/bundle.js,Webpack 配置如下:

module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.jsx$/, loaders: ['jsx?harmony'] }
        ]
    }
}

resolve 指定可以被 require 的文件后缀。比如 Hello.jsx 这样的文件就可以直接用 require(./Hello) 引用。

loaders 指定 jsx-loader 编译后缀名为 .jsx 的文件,建议给含有 JSX 的文件添加 .jsx 后缀,当然你也可以直接使用 .js 后缀, 相应的 test 配置正则要修改匹配就是。

Webpack 内置支持 CommonJS,所以可以直接用 npm 下载安装模块,然后直接 require 使用模块。

  • 安装 React: npm install react --save
  • 使用 React: var React = require('react');

监听编译: webpack -d --watch

更多关于 Webpack 的介绍


« 前一篇