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: ['','.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文件。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!