npm install babel-loader babel-core babel-preset-env webpack --save-dev

npm install babel-preset-es2015 babel-preset-react babel-preset-stage-3 --save-dev

module.exports = {...module:{    
    rules:[...
   {
        test:/\.jsx$/,
        exclude:/(node_modules|bower_components)/,//排除XXX类型文件
        use:{
            loader:'babel-loader'           
        }
    }
]
}...}

{
  "presets": ["es2015","react"]}

npm install url-loader file-loader --save-dev

module.exports = {...
    {   //配置辅助loader,处理图片  
        test:/\.(png|jpg|gif)$/,
        loader:'url-loader',
        options:{limit:8192,name:"images/[name].[ext]"}
    },
    { //处理图片外的其他文件类型
        test:/\.(appcache|svg|eot|ttf|woff|woff2|mp3|pdf)(\?|$)/,
        include:path.resolve(__dirname,'src'),
        loader:'file-loader?name=[name].[ext]' 
    }...}

npm install eslint eslint-loader --save-dev

指令：
cd 进入项目文件夹根路径，敲./node_modules/.bin/eslint --init  

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single? What line endings do you use? Windows
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON

{    "env": {        "browser": true,        "commonjs": true,        "es6": true,        "node": true
    },    "extends": "plugin:react/recommended",    "parserOptions": {        "ecmaVersion": 8,//ECMAScript syntax 最新版本
        "ecmaFeatures": {            "impliedStrict": true,            "experimentalObjectRestSpread": true,            "jsx": true
        },        "sourceType": "module"
    },    "plugins": [        "react"
    ],    "rules": {        "semi": [            "error",            "always"
        ],              
        "no-debugger": "error",//不允许用debugger这个关键字
        "no-dupe-args": "error",//不允许函数参数同名
        "no-caller": "error",//不允许用callee等，es6严格模式不支持
        "no-unmodified-loop-condition": "error",        "no-with": "error",//不允许用with来声明
        "no-catch-shadow": "error"
    }
}

module: {
        rules: [        ...{
        test:/\.js$/,
        enforce:'pre',
       loader:'eslint-loader',
       include:path.resolve(__dirname,'src')
    }...]
}

webpack.config.js 代码：
module.exports = {   ...
 plugins:[
 ..  
new webpack.optimize.UglifyJsPlugin(
{output: { 
    comments:false,//删除代码中所有注释
},
compress:{
 warnings:false,
}
})
]...}

module.exports = {...devtool:'eval-soure-map'...}

安装指令：npm install happypack --save-dev

var os = require('os');//os.cpus().Length 一般会取不到值，这里直接size:4,而不是size:os.cpus().lengthvar Happypack = require('happypack');var happypackThreadPool = Happypack.ThreadPool({size:4});//size:os.cpus().Lengt根据电脑的idle，配置当前最大的线程数量module.config.js 下面的配置module.exports = {
...module:{    rules:[
 {        test:/\.js$/,    
        include:path.resolve(__dirname),        loader:'happypack/loader?id=happybabel'

    }
]
}plugins:[new Happypack({    id:"happybabel",    loaders:['babel-loader'],    threadPool:happypackThreadPool,    cache:true,    verbose:true}),
]
}

//webpack.dll.config.js 的内容：const webpack = require('webpack');const path = require("path");const fs=require('fs');const vendors = [  'react' //这里添加第三方库文件

];module.exports = {  entry: {    vendor: vendors,
  },  output: {    path: path.join(__dirname+'/build'),    filename: '[name].[chunkhash].js',    library: '[name]_[chunkhash]',
  },  plugins: [    new webpack.DllPlugin({      path: path.join(__dirname+"/build"+'/manifest.json'),      name: '[name]_[chunkhash]',      context: __dirname,
    }),
  ],
};//console.log(path.join(__dirname+"/build"));

webpack --config webpack.dll.config.js -p

 moule.exports = { ...
 plugins:[  ...
 new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./build/manifest.json'),
    }),    ...]
....
}

npm install react react-dom --save

require('./css/css');require('./less/less.less');require('./scss/scss.scss');var app=document.createElement("p");
app.innerHTML=&#39;<h1>Hello World!</h1>&#39;;document.body.insertBefore(app,document.body.childNodes[0]);

import React from 'react';
import ReactDOM from 'react-dom';class FirstComponent extends React.Component{
    render(){      return(
          <p>             this is React code from Components.          
          </p>
      );  
    }
}
var p=document.createElement("p");p.setAttribute("id","root");
document.body.insertBefore(p,document.body.childNodes[1]);
ReactDOM.render(<FirstComponent/>,document.getElementById(&#39;root&#39;));

npm install react-router-dom --save

import React from 'react';import ReactDOM from 'react-dom';import {NavLink,Route,BrowserRouter,HashRouter as Router, Swith,Redirect} from 'react-router-dom';import RouteConfig from '../Config/Route.jsx';var p=document.createElement("p");
p.setAttribute("id","root");document.body.insertBefore(p,document.body.childNodes[1]);
ReactDOM.render(
    <Router>
        {RouteConfig}
    </Router>
    ,document.getElementById(&#39;root&#39;));

import React from 'react';
import ReactDOM from 'react-dom';
import {NavLink,Route,BrowserRouter as Router,HashRouter,Switch,Redirect}  from 'react-router-dom';

import MainComponent from '../component/Main.jsx';//引进组件import Topic from '../component/Topic.jsx';//引进组件const routes =[
    {
        path:'/',
        exact:true,
        component: MainComponent
    },
    {
        path:'/topic',
        exact:false,
        component:Topic
    },
];const RouteConfig = (
    <Switch>
    {
      routes.map((route,index)=>(
                  <Route
                   key ={index}
                   path={route.path}
                   exact={route.exact}
                   component={route.component}                
                  />
                ))
    }
    </Switch>
);
export default RouteConfig;

import React from 'react';import ReactDOM from 'react-dom';import {NavLink as Link} from 'react-router-dom';class MainComponent extends React.Component{
    render(){      return(
          <p>
             <h1>mainText</h1>    

             <Link to="/topic">jumpe to Topic</Link>         
          </p>
      );  
    }
}

export default MainComponent;

import React from 'react';import ReactDOM from 'react-dom';import {NavLink as Link} from 'react-router-dom';class Topic extends React.Component{
    render(){      return(
          <p>
              <h1>topicText:</h1>         
              <Link to="/">jumpe to Main</Link>         
          </p>
      );  
    }
}

export default Topic;

 npm install redux react-redux react-router-redux redux-thunk --save

const vendors = [  'react',  "react-dom",  "react-router-dom",  "redux",  "react-redux",  "react-router-redux",  "redux-thunk"];

import {createStore,combineReducers,applyMiddleware} from 'redux';
import RootReducer from '../Reducer/index.jsx';//引入reduceimport ReduxThunk from 'redux-thunk';//中间件var store = createStore(    //自动生成store的函数
    RootReducer, //reduce,修改state状态的函数集合
    applyMiddleware(ReduxThunk) //中间件);

export default store;

const actions = {

 changeText:function(num){
     console.log("调用actions");      switch(num){      case 1:      return {type:'AlterMain',payload:"mainContainer had been changed"};      case 2:       return {type:'AlterTopic',payload:"topicContainer had been changed"};       default:       return action;

   }
},

};
export default actions;

import {combineReducers} from 'redux';import {routerReducer} from 'react-router-redux';const defaultState = {//设定state的默认值
   mainText:"mainContainer",
   topicText:"topicContainer"};const reducer = (state = defaultState, action) => {     
    switch (action.type) {//通过action的返回值来选择更新哪个state的状态
        case 'AlterMain':            return  Object.assign({},state,{ mainText:action.payload});        case 'AlterTopic':            return  Object.assign({},state,{ topicText:action.payload});        default:            return state;
    }
};const RootReducer = combineReducers({//可以定义多个reducer，然后通过combineReducers来合并
    routing:routerReducer,//redux和router处理函数
    app:reducer      //app 需要与组件里面上传的state一致});
export default RootReducer;

if (typeof Object.assign != 'function') {    // Must be writable: true, enumerable: false, configurable: true
    Object.defineProperty(Object, "assign", {
      value: function assign(target, varArgs) { // .length of function is 2        'use strict';        if (target == null) { // TypeError if undefined or null
          throw new TypeError('Cannot convert undefined or null to object');
        }        var to = Object(target);        for (var index = 1; index < arguments.length; index++) {          var nextSource = arguments[index];          if (nextSource != null) { // Skip over if undefined or null
            for (var nextKey in nextSource) {              // Avoid bugs when hasOwnProperty is shadowed
              if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
                to[nextKey] = nextSource[nextKey];
              }
            }
          }
        }        return to;
      },
      writable: true,
      configurable: true
    });
  }

import React from 'react';import ReactDOM from 'react-dom';import {NavLink as Link} from 'react-router-dom';import {connect} from 'react-redux';import P from 'prop-types';import actions from '../src/action/action.jsx';//引入actions//mapstoreStateToProps 这里指定Main控件需要上传的stateconst mapStoreStateToProps = (state) =>(
    {
         mainText:state.app.mainText, //mainText是变量，值对应的state.app.mainText的存储空间，其中app与reducers里面定义的一致。

    }
);//mapDispatchToProps 这里上传处理state函数，即action里面定义的函数const mapDispatchToProps = (dispatch,ownProps)=> ({
   fn:{
       changeText:(num)=> dispatch(actions.changeText(num))
   }
});//这样state一致上传到store，需要取值用props取就okclass MainComponent extends React.Component{
    render(){      return(
          <p>
             <h1>mainText:{this.props.mainText}</h1>        
             <button onClick={()=>this.props.fn.changeText(1)}>修改mainText的值</button>

             <Link to="/topic">jumpe to Topic</Link>         
          </p>
      );  
    }
}//最后调用connect函数，把组件和store连接起来export default connect(mapStoreStateToProps,mapDispatchToProps)(MainComponent);

import React from 'react';import ReactDOM from 'react-dom';import {NavLink,Route,BrowserRouter,HashRouter as Router, Swith,Redirect} from 'react-router-dom';import RouteConfig from '../src/Config/Route.jsx';import {Provider} from 'react-redux';import store from '../src/Config/Store.jsx';var p=document.createElement("p");
p.setAttribute("id","root");document.body.insertBefore(p,document.body.childNodes[0]);

ReactDOM.render(
    <Provider store={store}> //Provider 并指定store的文件
        <Router>
            {RouteConfig}
        </Router>
    </Provider>
    ,document.getElementById(&#39;root&#39;));

import React from 'react';import ReactDOM from 'react-dom';import {NavLink as Link} from 'react-router-dom';import {connect} from 'react-redux';import actions from '../src/action/action.jsx';const mapStoreStateToProps = (state) =>(
    {         topicText:state.app.topicText,

    }
)const mapDispatchToProps = (dispatch,ownProps)=> ({   fn:{       changeText:(num)=> dispatch(actions.changeText(num))
   }
});class Topic extends React.Component{
    render(){      return(
          <p>
              <h1>topicText:{this.props.topicText}</h1>
              <button onClick={()=>this.props.fn.changeText(2)}>修改topicText的值</button>       
              <Link to="/">jumpe to Main</Link>         
          </p>
      );  
    }
}export default connect(mapStoreStateToProps,mapDispatchToProps)(Topic);

下面是系统相关的提示：
name：reactwebpack +回车键 ，reactwebpack是我这个项目的名字
version：1.0.0+回车键description:（项目描述信息），这里按回车键直接跳过
entry point:(入口文件)按回车键跳过。入口文件会在下面讲的webpack.config.js 里面陪置
test command: 跳过就好，会面会重新配置这个指令内容。这里先跳过
git repository:(git 库的链接地址)。这里不涉及到git库，直接跳过keywords:（关键字），直接跳过先
author：（作者），可以输入自己的英文名+回车键license:(ISC 开源许可证号，与git相关) 这里跳过
Is this ok？（yes） 比对下内容，如果没错，直接输入y+回车键

   reactwebpack        #项目文件夹
         build         #正式打包用的文件夹（也有人用dist命名），用于生产环境
         node_modules  #npm 指令会自动生成
         src           #用于存放源文件
          app.js       #在src下面建一个app.js
          index.html   #在src下面建一个index.html
        package.json       #webpack 包的项目文件
        webpack.config.js   #webpack包的配置文件
        README.md           # 项目说明文档

var path=require('path');module.exports = {entry:'./src/app.js', //入口文件配置为app.js文件。若入口文件为index.js,这里可以直接写成'./src'//入口文件很多的话，可以写成下面的格式：
/*entry:{    pageOne: './src/pageOne/index.js',    pageTwo: './src/pageTwo/index.js',    pageThree: './src/pageThree/index.js'}
*/output: {    filename:'bundle.js',//js合并后的输出的文件，命名为bundle.js    path:path.resolve(__dirname,'build'),//指令的意思是：把合并的js文件，放到根目录build文件夹下面    //publicPath:'',生成文件的公共路径，‘/work/reactweb/dist’ 生产环境下所有的文件路径将会添加这个公共路径
}//多个入口的输出文件格式
/*output: {    filename:'[name].js',//name相当于变量，等同于pageOne/pageTwo/pageThree    path:path.resolve(__dirname,'build'),//}
*/
}

var app=document.createElement("p");
app.innerHTML=&#39;<h1> Hello World!</h1>&#39;;document.body.appendChild(app);

<!DOCTYPE html><html lang="en">
    <head>
        <title>reactwebpack</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script src="../build/bundle.js"></script>
    </body></html>

Hash: bba9fbe70c8f6bbe2cd1Version: webpack 3.3.0Time: 47ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.58 kB       0  [emitted]  main
   [0] ./src/app.js 111 bytes {0} [built]

Hello World!

npm install html-webpack-plugin --save-dev

 var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = {
...//前面的对象后面需要添加逗号隔开plugins:[new HtmlwebpackPlugin({    title:'reactwebpack'
   /* 全部都是可选项    title:"reactwebpack",   配置html 的title    filename: , html文件的名字，默认是index    template:'', 模板文件路径    inject:true|'body'|'head'|'false', 设置为 true|'body':js文件引入的位置为body的结束标签之前    favicon:'',  设置html的icon图标    minify:{}|false, 暂时不理解这个参数的使用    hash:true|false,  将添加唯一的webpack编译hash到所有包含的脚本和css文件    cache:true|false, 默认为true，仅仅在文件修改之后才会发布    showErrors:true|false, 默认为true，错误信息写入HTML页面中    chunks: 允许添加某些块（比如unit test）    chunksSortMode: 允许控制块在添加到页面之前的排序方式    excludeChunks: 允许跳过模型块，比如单元测试块
  */
})
],
}

npm install webpack-dev-server --save-dev

    在package.json文件里面配置，快捷指令。
    “scripts":{
     "start":"webpack-dev-server --inline --hot" 
}
 指令的意思：在PoweShell窗口下敲npm start 等效于npm webpack-dev-server -- inline --hot

var webpack=require('webpack');//用于服务器的配置

module.exports ={...devServer:{
    //contentBase: path.join(__dirname,"dist"),//用于静态文件的目录，不设置默认为当前根目录
   // contentBase:[path.join(__dirname,'public'),path.join(__dirname,'assets')],//支持多路径
   // publicPath:"/assets", 服务器地址:http://localhost:8080 ,output file:http://localhost:8080/assets/bundle.js
    //compress:true,//gzip压缩
    //headers:{"X-Custom-Foo":"bar"},
    hot:true,//是否启用热更新
    port:8080,
    historyApiFallback:true,//html5接口,设置为true，所有路径均转到index.html
    inline:true,//是否实时刷新，即代码有更改，自动刷新浏览器 
    stats:{colors:true},//显示bundle文件信息，不同类型的信息用不同的颜色显示
    /*
    proxy:{     //服务器代理配置        "/api":{  //相对路径已/api打头，将会触发代理
            target:"http://localhost:3000", //代理地址
            pathRewrite:{"^/api":""}, //路径替换
            secure:false //跨域
        }
    }
    */
},...}

  在package.json文件里面配置，快捷指令,指定对应的配置文件。  "scripts": {   "start":"node server.js" 
  },

server.js 的配置：var webpack = require('webpack');//引入webpack模块var webpackDevServer = require('webpack-dev-server');//引入服务器模块var config = require('./webpack.config');//引入webpack配置文件var server = new webpackDevServer(webpack(config),{    //contentBase: path.join(__dirname,"dist"),//用于静态文件的目录，不设置默认为当前根目录
   // contentBase:[path.join(__dirname,'public'),path.join(__dirname,'assets')],//支持多路径
   // publicPath:"/assets", 服务器地址:http://localhost:8080 ,output file:http://localhost:8080/assets/bundle.js
    //compress:true,//gzip压缩
    //headers:{"X-Custom-Foo":"bar"},
    hot:true,//是否启用热更新   
    historyApiFallback:true,//html5接口,设置为true，所有路径均转到index.html
    inline:true,//是否实时刷新，即代码有更改，自动刷新浏览器 
    stats:{colors:true},//显示bundle文件信息，不同类型的信息用不同的颜色显示
    /*
    proxy:{     //服务器代理配置
        "/api":{  //相对路径已/api打头，将会触发代理
            target:"http://localhost:3000", //代理地址
            pathRewrite:{"^/api":""}, //路径替换
            secure:false //跨域
        }
    }
    */});//将其他路由，全部返回index.htmlserver.app.get('*',function(req,res){
    res.sendFile(__dirname+'/build/index.html');
});
server.listen(8080,function(){
 console.log('正常打开8080端口')
});

module.exports = {
    entry: {
 app:[ 
              'webpack-dev-server/client?http://localhost:8080',  // 热更新监听此地址                                                     
               'webpack/hot/dev-server',  // 启用热更新
              path.resolve(__dirname, 'src', 'app')  
        ]        
    },...plugins:[...new webpack.HotModuleReplacementPlugin(),//热更新配套插件...]
}

 npm install css-loader style-loader --save-dev
 npm install url-loader file-loader --save-dev

module.exports ={...module:{
    rules:[{
        test:/\.css$/,
        use:['style-loader','css-loader'],

    },
    {   //配置辅助loader
        test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader:'url-loader',
        options:{limit:8091}
    }
]
},...resolve:{
    extensions:['.js','jsx','less','.css','.scss']//后缀名自动补全
}
}

src
    css
        css.css
    img        7.png

p{    background:url('../img/7.png') no-repeat 211px 0px ;  

}

require('./css/css');

npm install extract-text-webpack-plugin --save-dev

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {...module:{
    rules:[{
        test:/\.css$/,
        use:ExtractTextPlugin.extract({    //使用ExtractTextPlugin 插件
            fallback:"style-loader",
            use:"css-loader"
        }),

    },{   //配置辅助loader
        test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader:'url-loader',
        options:{limit:8091}
    }

]
},...plugins:[...new ExtractTextplugin("styles.css"),    //插件声明
]，...}

npm install sass-loader node-sass webpack --save-dev
 npm install less-loader less --save-dev
 npm i -D postcss-loader

less.less:
@color:#f938ab;p{    color:@color;
}

scss.scss:$font-stack:Helvetica,sans-serif;$primary-color:#333;
p{
    font:100% $font-stack;
    border:1px solid $primary-color;
}

module.exports = {    plugins:{ 
    'autoprefixer': {},   
    }
}

module.exports ={...module:{
    rules:[
        {
        test:/\.css$/,        
        use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
            fallback:"style-loader",//用于开发环境
            use:["css-loader","postcss-loader"]
        }),
    },{   //配置辅助loader
        test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader:'url-loader',
        options:{limit:8091}
    },
      {
        test:/\.less$/,        
        use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
            fallback:"style-loader",//用于开发环境
            use:["css-loader","postcss-loader","less-loader"]
        }),
    },
       {
        test:/\.scss$/,        
        use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
            fallback:"style-loader",//用于开发环境
            use:["css-loader","postcss-loader","sass-loader"]
        }),
    }
]
},...}