React 加载器 解说

我们在使用Webpack打包JS的时候，我们要根据我们编写JS的语法来配置相应的加载器。

例如： 我编写了一个 文件  react文件 ，内容如下：

entry.js 

var ProductCategoryRow = React.createClass({
    render: function() {
        return (<tr><th colSpan="2">{this.props.category}</th></tr>);
    }
});

从 entry.js语法可以看出，我们用了 jsx语法所以，我们需要配置 webpack.config.js 来配置jsx的加载器 

浅谈 加载配置器

 module: {
        //加载器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }
    resolve: {
        //查找module的话从这里开始查找
        root: 'E:/github/flux-example/src', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch   //监听变动并自动打包

$ webpack -p    //压缩混淆脚本，这个非常非常重要！

$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

webpack.config.js 内容如下：

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
	resolve: {
        extensions: ['', '.js', '.jsx']
    },
	module: {
        loaders: [
			 { test: /\.js$/, loader: 'jsx-loader?harmony' }
			//{ test: /\.jsx?$/,loader: 'babel',query: { presets: ['react', 'es2015']  } },
			//{test: /\.(css)$/, loader: 'style-loader!css-loader' }
        ]
    }
};

这样，我们就可以 使用 

webpack entry.js bundle 或者直接使用 webpack命令 来打包该JS文件。