搭建用webpack开发react项目的脚手架

一，新建项目

新建一个项目目录，目录结构如下所示：

js/
--/component
--app.js
css/
--base.css
index.html
webpack.config.js

各个文件夹及文件作用：

• index.html 项目主页
• webpack.config.js webpack配置文件
• css/base.css 项目的基础样式文件，例如css reset之类的
• css/ 项目的公共样式目录
• js/app.js 项目入口文件
• js/component/ react组件目录

二，配置webpack

配置入口文件

编辑webpack.config.js文件

module.exports = {
  entry:'./js/app.js', //将app.js作为入口文件
  output:{
    path:__dirname,
    filename:'bundle.js' //将bundle.js作为最终打包后引用的文件
  }
}
复制代码

配置loader

然后为配置文件添加loader，因为我们是搭建react的开发环境，所以需要使用babel-loader对代码进行编码。 同时，还可以选用css-loader和style-loader，css-loader能将css文件进行打包，style-loader能将打包好的css文件添加到DOM中去。 配置如下：

module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015'] //babel转码规则，对react和es2015代码进行转码
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
复制代码

配置插件

项目中我们可以使用webpack的内置插件UglifyJsPlugin来对打包之后的文件进行压缩，按webpack的配置插件方式来添加如下代码：

plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
复制代码

整个完整的webpack.config.js文件内容如下所示;

var webpack = require('webpack');
module.exports = {
    entry: './js/app.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
}
复制代码

配置转码规则文件

另外，需要在项目根目录中添加.babelrc文件，对转码规则进行指定。在项目根目录中打开命令行，输入以下命令：

type nul>.babelrc
复制代码

创建之后打开.babelrc文件，写入如下配置：

{
  "presets":[
    "es2015",
    "react"
  ]
}
复制代码

三，安装项目依赖

将webpack配置完成之后就要开始安装项目使用的各个配置文件。

1. 初始化项目

npm init
复制代码

2. 本地安装webpack

npm install webpack --save-dev
复制代码

3. 本地安装react

npm install react react-dom --save-dev
复制代码

4. 本地安装loader

npm install babel-loader css-loader style-loader --save-dev
复制代码

5. 安装转码规则

npm install babel-preset-es2015 babel-preset-react --save-dev
复制代码

四，运行项目

按以上内容配置好之后就可以开始进行react开发了。 写好代码之后，需要使用webpack进行打包，每次修改代码之后需要在根目录命令行中输入webpack命令，这个过程很繁琐。可以使用下面的命令对项目进行修改监控：

webpack --watch
复制代码

这样每次修改完成之后webpack就会对项目进行重新打包。 也可以在package.json文件中配置如下命令：

"scripts": {
    "watch": "webpack --watch"
  }
复制代码

配置好之后，就能在项目启动之后在根目录打开命令行，输入npm watch进行项目打包监控了。

五，总结

使用webpack进行react开发，需要按以下步骤进行配置：

(1) 新建项目目录，按功能创建好各文件夹和文件
(2) 在根目录中打开新创建的webpack.config.js文件,分别配置好项目出入口文件、项目中需要使用的loader（打包jsx和css文件）、需要选用的plugin（这里用内置插件UglifyJsPlugin示例）
(3) 安装好项目需要使用的各个依赖文件
(4) 代码编写
(5) 运行项目