/ 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
配置:
作者:张轩
链接:https://zhuanlan.zhihu.com/p/20367175
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
在package.json里面配置一下运行的命令(npm支持自定义一些命令)
...
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
...
"start": "./node_modules/.bin/webpack-dev-server --port 9080 --content-base ./ --hot --inline"
npm install babel-loader babel-preset-es2015 --save-dev
作者:张轩
链接:https://zhuanlan.zhihu.com/p/20367175
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
"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"
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]'
}]
},
1 var path=require('path'); 2 // var webpack=require('webpack'); 不需要 3 // import HtmlwebpackPlugin from 'html-webpack-plugin'; 错的 4 // var HtmlwebpackPlugin=require('html-webpack-plugin');//这个是对的 5 6 //定义了一些文件夹的路径 7 var ROOT_PATH=path.resolve(__dirname); 8 var APP_PATH=path.resolve(ROOT_PATH);//默认查找根目录下的index.js 9 var BUILD_PATH=path.resolve(ROOT_PATH,'build'); 10 11 module.exports={ 12 //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字 13 //entry:APP_PATH,这里不能再用路径了,而是应当一个具体的文件吧?报错bundle.js:588 Uncaught Error: Cannot find module "E:\current\REACT\fluxChatDemo-test" 14 entry:'./index.js', 15 output:{ 16 path:BUILD_PATH,// __dirname + '/build',应该也行 17 filename:'bundle.js' 18 }, 19 devServer:{ 20 historyApiFallback:true, 21 hot:true, 22 inline:true, 23 progress:true, 24 }, 25 module:{ 26 loaders:[{ 27 test:/\.js?$/, 28 loader:'babel', 29 exclude: /(node_modules|bower_components)/, 30 query: { 31 presets: ['react', 'es2015', 'stage-0'] 32 } 33 },{ 34 test:/\.css$/, 35 loader:'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 36 }] 37 }, 38 plugins:[ 39 /*new HtmlwebpackPlugin({ 40 title:'you can change the title anytime in webpack.config.js' 41 })*/ 42 ] 43 };
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>
恭喜自己,成功了~截张图吧~