/ fluxChatDemo / 系列 ——项目安装坑洼简要

第一部分

1、使用import引入时，路径选错

2、React.Component 注意大写 (极浅的坑都掉，原谅我初级中的初级~还是贴出来吧)

3、不知为何运行起来没有内容，都怪自己不熟就上路，以为以下这些代码是会自动被引入的，其实不然，虽然文件中没有显示的创建这2个文件，但使用webpack的插件能够生成[name].min.js，至于自动在页面中引入js的功能插件，这里是没有的。

<script src="react.min.js"></script>
<script src="index.min.js"></script>

第二部分

1、目标：把两个js文件合并成一个文件；自动快速生成HTML

平时的做法：自己在build文件夹里面手动建一个index.html文件夹，然后再把合并以后的js引用在里面，但是这样有点麻烦。

现在只需要加个插件：html-webpack-plugin

安装：首先npm init创建一个package.json文件(其中的scripts下的start是什么意思还不是特别明白，我先没填)，再安装webpack：npm install webpack

接着就可以安装插件了 npm install html-webpack-plugin --save-dev

配置：

var path=require('path');
// var webpack=require('webpack'); 不需要
// import HtmlwebpackPlugin from 'html-webpack-plugin'; 错的
var HtmlwebpackPlugin=require('html-webpack-plugin');// 这个是对的

//定义了一些文件夹的路径
var ROOT_PATH=path.resolve(__dirname);
var APP_PATH=path.resolve(ROOT_PATH,'app');//将会合并app文件夹下的数个js成为一个

var BUILD_PATH=path.resolve(ROOT_PATH,'build');

module.exports={
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
    entry:APP_PATH,//这个路径根据上面定义文件夹的位置看来是设置在根目录下，所以需要在根目录下创建一个index.js
　　//所指定目录下，进行默认查找index.js。如根目录就找根目录的index.js，
　　//若指定再如app文件夹下，里边创建几个js文件其中一个index.js，则默认在此app目录下找index.js

    output:{
        path:BUILD_PATH,
        filename:'bundle.js'
    },
    plugins:[
        new HtmlwebpackPlugin({
            title:'you can change the title anytime in webpack.config.js'
        })
    ]
};

几个注意事项：

A、头部引入的问题，见代码

B、path.resolve方法是nodejs里的方法。需要引入path模块。CommonJS风格：var path = require('path');

path.resolve([from ...], to) from参数代表源路径，to代表将被解析到绝对路径的字符串

C、entry:默认会找index.js  也可以自己指定是哪个文件名。entry可以直接设置路径地址如entry:{index:'./index.js'}

运行：webpack

D、合并文件中，如果app文件夹下要合并的文件之间，没有关联，没有用module.exports=name;或export default name导出，并且也没有在默认的entry文件中引入(CommonJs风格的require或es6的import方法)，那么就无法合并成功。

验证：在目录下发现自动生成了build文件夹，里边有index.html和bundle.js。具体文件位置路径怎么指定，多加查看并敲打，熟悉了就好。目标达成了，成功生成html，合并js，html引入了js，js被执行了。by the way, 好神奇~！

第三部分

为什么要配置 webpack-dev-server

解释：开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器

安装：npm install webpack-dev-server --save-dev

配置：

module.exports = { .... devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, }, ... }
作者：张轩
链接：https://zhuanlan.zhihu.com/p/20367175
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

至于package.json为何还要修改，回答不上来，先记着吧：

在package.json里面配置一下运行的命令（npm支持自定义一些命令）

...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

此时的命令改为：npm start

http://localhost:8080/ 查看  应该是webpack-dev-server默认的端口为8080，如果要指定别的：

"start": "./node_modules/.bin/webpack-dev-server --port 9080 --content-base ./ --hot --inline"

 

 

 

第四部分 添加ES6的支持

 

安装各种loader：

npm install babel-loader babel-preset-es2015 --save-dev

配置config文件：

... { test: /\.jsx?$/, loader: 'babel', include: APP_PATH, query: { presets: ['es2015'] } }, ...
作者：张轩
链接：https://zhuanlan.zhihu.com/p/20367175
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

es2015这个参数是babel的plugin，可以支持各种最新的es6的特性，具体的情况看这个链接。Babel es2015 plugin http://babeljs.io/docs/plugins/preset-es2015/

 

现在可以改掉CommonJS风格的文件。不过我目前是把app文件下那两个测试文件保留着，在根目录下创建一个index.js，文件里是有关react的且是用es6风格写的，正好用上，看可行不可行。

 

确保使用babel转义，在webpack.config.js中配置好，且安装了这项依赖模块。

 

迫不及待npm start查看结果。

 

使用react所需要的还有：看看哪个没有补上再npm start、、

"babel-core": "^6.6.5",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.3.13",
"classnames": "^2.2.3",
"css-loader": "^0.23.1",
"flux": "^2.1.1",
"keymirror": "^0.1.1",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"

在这些都准备好之后，运行报错：Cannot resolve module 'index.js'

 

http://stackoverflow.com/questions/37506714/module-not-found-error-cannot-resolve-module-module-mongodb-while-bundling-w

这篇文章还没看完，就发现自己module loaders是不是忘写了。。如下：

module:{
    loaders:[{
        test:/\.js?$/,
        loader:'babel',
        exclude: /(node_modules|bower_components)/,
        query: {
            presets: ['react', 'es2015', 'stage-0']
        }
    },{
        test:/\.css$/,
        loader:'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
    }]
},

 

 

第四部分是想，使用es6来写文件，因此安装了如上的依赖，总的来说，要安装各样的依赖、并随后立即把webpack.config.js的配置改一下如loaders、如文件路径指明等。

有个问题是，目前还不知道如何获取htmlwebpackplugin自动生成页面的id，所以，先手动在根目录下设定了一个index.html，并且把new HtmlwebpackPlugin的插件配置删掉。

当前的webpack.config.js修改如下：

 (

webpack的配置，多数是这两篇：

https://zhuanlan.zhihu.com/p/20367175

http://www.infoq.com/cn/articles/react-and-webpack?utm_source=tuicool

及参照 github搜索fluxDemoChat下的webpack.config.js的配置 

而成的

)

 

 var path=require('path');
 // var webpack=require('webpack'); 不需要
 // import HtmlwebpackPlugin from 'html-webpack-plugin'; 错的
 // var HtmlwebpackPlugin=require('html-webpack-plugin');//这个是对的

 //定义了一些文件夹的路径
 var ROOT_PATH=path.resolve(__dirname);
 var APP_PATH=path.resolve(ROOT_PATH);//默认查找根目录下的index.js
 var BUILD_PATH=path.resolve(ROOT_PATH,'build');

 module.exports={
     //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
     //entry:APP_PATH,这里不能再用路径了，而是应当一个具体的文件吧？报错bundle.js:588 Uncaught Error: Cannot find module "E:\current\REACT\fluxChatDemo-test"
     entry:'./index.js',
     output:{
         path:BUILD_PATH,// __dirname + '/build',应该也行
         filename:'bundle.js'
     },
     devServer:{
         historyApiFallback:true,
         hot:true,
         inline:true,
         progress:true,
     },
     module:{
         loaders:[{
             test:/\.js?$/,
             loader:'babel',
             exclude: /(node_modules|bower_components)/,
             query: {
                 presets: ['react', 'es2015', 'stage-0']
             }
         },{
             test:/\.css$/,
             loader:'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
         }]
     },
     plugins:[
         /*new HtmlwebpackPlugin({
             title:'you can change the title anytime in webpack.config.js'
         })*/
     ]
 };

index.js:

import React from 'react';
import ReactDOM from 'react-dom';

import ChatApp from './js/components/ChatApp';

ReactDOM.render(
    <ChatApp name="Nate"/>,
    document.getElementById('react')
);

ChatApp.js

import React from 'react';

class ChatApp extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return (
            <h2>hello {this.props.name}</h2>
        )
    }
}

export default ChatApp;

index.html报错：

bundle.js:8866 Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

原因：

出现此错误的原因是我将webpack生成的js文件放在了head，此时DOM还没有建立完毕，因此出现 not a DOM element 的错误，所以将js文件放在HTML底部就可以了。http://blog.csdn.net/cc7756789w/article/details/52083548

之前练习过的经验是，webpack会生成你所指定的output的文件位置和文件名，只需要引入到index.html就行，但是根目录中肉眼是看不见这个output指定的文件的。因此index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <section id="react"></section>

    <script src="bundle.js"></script>
</body>
</html>

恭喜自己，成功了~截张图吧~

感恩~感谢神~因为我的自学全仰赖祂~智慧属祂。