React+Webpack构建方案

说明

webpack是一个模块加载器,类似于seajs、requirejs,他能很好的解决模块之间的依赖关系,并可以将多个模块打成一个包,react结合webpack可以编译jsx,页面热加载组件,修改代码无需刷新页面。

前提条件

需要安装nodewebpack

实现目标

  • jsx编译
  • 组件模块打包
  • 组件热加载

安装

安装webpack

npm install -g webpack

参考目录

  • app/
    • app.js
  • build/
    • bundle.js
  • index.html
  • package.json
  • webpack.config.js // 上线配置
  • webpack.dev.config.js // 开发环境配置
  • service.js

生成package.json

npm init

安装package插件依赖

npm installnpm install (插件名称,多个用空格隔开)
基本插件安装:

$ npm install react babel-loader --save-dev

常用插件:

  • jsx-loader: 编译jsx
  • babel-loader: 编译se6和jsx,可以代替jsx-loader
  • webpack
  • react
  • webpack-dev-server
  • react-hot-loader
  • file-loader
  • style-loader
  • css-loader
  • url-loader

–save与–save-dev 的区别

npm install –save 与 npm install –save-dev,一个放在package.json 的dependencies , 一个放在devDependencies里面

webpack.config.js配置说明

module.exports = {
    entry: '', 
    output: {
        path: '', 
        filename: '',
        publicPath: ''
    },
    module: {
        loaders: []
    },
    resolve: {}
};
  • entry:指定打包的入口文件,每有一个键值对,就是一个入口文件
  • output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称,filename里面的[name]会由entry中的键(这里是entry1和entry2)替换
  • resolve:定义了解析模块路径时的配置,常用的就是extensions,可以用来指定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全
  • module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理,而.jsx结尾的文件会先经过jsx-loader处理,然后经过babel-loader处理。当然这些loader也需要通过npm install安装
  • plugins:这里定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取出公用的部分,生成common.js

组件模块打包

配置webpack.config.js

在根目录创建webpack.config.js:

var path = require('path'); 
var webpack = require('webpack');
module.exports = {
    entry: './app/app.js', // 指定入口文件
    output: {
        path: path.join(__dirname, 'build/'), // 打包输出的路径
        filename: 'bundle.js', // 输出名称
        publicPath: '/static/'
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loaders: ['babel']}
        ]

    },
    resolve: {
        // 配置后相关文件名的扩展名可以忽略
        extensions: ['', '.js', '.jsx', '.json', '.coffee']
    },
    plugins: [
        // Webpack压缩代码的时候,React官方提供的代码已经是合并的, 可以通过以下插件优化
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        })
    ]
};
// path: 用于处理目录的对象
// __dirname:获取当前模块文件所在目录的完整绝对路径
// 这里的path.join(__dirname, 'build/')相当于:volumes/qzhou/mac/www/webpack/build

输入webpack命令将app.js编译打包成bundle.js,在index.html引入

<script src="build/bundle.js"></script>

如果制定了另外的配置文件:输入命令webpack —config webpack.custom.config.js执行

webpack相关命令

$ webpack // 最基本的启动webpack方法
$ webpack -w // 提供watch方法,实时进行打包更新
$ webpack -p // 对打包后的文件进行压缩,提供production
$ webpack -d // 提供source map,方便调试。

组件热加载

配置webpack.dev.config.js

在根目录创建webpack.dev.config.js:
需要安装插件:$ npm install react-hot-loader —save-dev

var path = require('path'); 
var webpack = require('webpack');
module.exports = {
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:3000',  // 热加载访问服务地址
        'webpack/hot/only-dev-server',
        './app/app.js'
    ],
    // 编译输出配置
    output: {
        path: path.join(__dirname, 'build/'), 
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/, 
            loaders: ['react-hot', 'babel'], // 用于react代码热加载
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.json', '.coffee']
    },
    plugins: [
        // react代码热加载插件
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

配置server.js

在根目录创建server.js:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.dev.config.js');

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true
}).listen(3000, '127.0.0.1', function (err, result) {
    if (err) {
        console.log(err);
    }
    console.log('server start');
});

index.html引入

<script src="http://127.0.0.1:3000/static/bundle.js"></script>

输入node server.js启动开发服务器,这样修改react组件代码,即可实时同步页面。
为了方便,我们也可以在package.json中加入一节配置:

"scripts": {
  "start": "node ./js/server.js"
}

这样就可以通过npm start命令启动开发服务器。

应用说明

在开发环境中,我们只需要开启npm start即可实时编译、打包,
在转到生成环境,只需要运行webpack -p,即可。