webpack-react

react+webpack+es6

安装webpack

1.先将npm的源改为淘宝，使用如下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.接下来安装引用包的方法为

cnmp install [name] -g  //全局安装
cnpm install [name] //本地安装，即是只安装到当前目录的环境

3.建立webpack的配置文件
1.webpack.config.js

//_dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
module.exports = {
    /*
        使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项
    */
    devtool:"eval-source-map",
    entry:__dirname+"/src/pages/app.js",//唯一的入口文件，
    //输出目录
    output:{
        path:__dirname+"/build",
        filename:"bundle.js"
    },

    module:{
        //loader加载器
        loaders:[
            {
                test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
                exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
                loader: 'babel-loader'//loader的名称（必须）
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!postcss-loader!less-loader',
            }, 
            {
                test: /\.css/,
                loader: 'style-loader!css-loader',
            }, 
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192',
            }

        ]
    },

    //webpack-dev-server
    devServer:
    {
        /*默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）*/
        contentBase:'./build',

        /*在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html*/
        historyApiFallback:true,

        //源文件改变时自动刷新页面
        inline:true,
        port:8088,
    }
};

引入各种依赖

$ npm i webpack webpack-dev-server --save-dev
$ npm i react react-dom react-router redux react-redux redux-thunk --save

由于依赖大量使用了es6语法 ，所以需要解析es6，引入解释es6的包

// 首先需要安装 babel 
$ npm i babel-core --save-dev
// 安装插件 
$ npm i babel-preset-es2015 babel-preset-react --save-dev
// 安装 loader
$ npm i babel-loader --save-dev

3.建立主入口文件
app.js

import React from 'react';
import ReactDom from 'react-dom';
import Component from '../component/Component.jsx';

ReactDom.render(
    <Component/>,document.getElementById('content')
);

component.js

import React from 'react';
import './index.css';
class Component extends React.Component
{
    render()
    {
        return (
            <div className="content-color">hello chens shi tao</div>
        )
    }
}

export default Component;

最后建议一个index.html引用生产的bundle.js即可

在package.json中修改script 改成

  "scripts": {
    "start":"webpack",
    "dev":"webpack-dev-server"
  },

然后执行命令
npm run dev 便可在浏览器内输入地址预览