今日总结
看来至今还是没有养成github进行交流的习惯，看不少同学都把练手的项目发github了，这是我昨天练手的webpack项目
上午先复习了react的生命周期相关知识，也动手编写了demo，如下：
<script type="text/babel">
var HelloMessage = React.createClass({
getInitialState:function(){
return {
color:'red',
fontSize:'20px'
}},
render: function() {
return <h1 style={this.state}>Hello {this.props.name}</h1>;
},
componentDidMount:function(){
alert('did');
var t=setTimeout(() => {
this.setState({
color:'blue',
fontSize:'50px'
})
}.bind(this), 2000); }
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);</script>
上述代码的作用是，创建了一个HelloMessage组件，并利用getInitialState函数初始化了css样式的state，然后在render之后执行componentDidMount函数，设置计时器2秒后将state设置为另一个样式。
值得注意的是，bind(this) 的用法。因为如果不bind的话，setTimeout底下的this将会指向全局对象，所以要么提前保存this要么bind，这里使用了es6的bind（）方法。
gulp-babel的学习
接下来，老师的带我们学习了webpack和babel的相关知识，内容有点多，光装的依赖就有如下：容我一一道来
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"uglifyjs-webpack-plugin": "^1.2.7",
"url-loader": "^1.0.1",
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"babel-loader": "^7.1.5",
"css-loader": "^1.0.0",
"style-loader": "^0.21.0"
},
首先是gulp-babel的使用,安装好相关依赖后，在gulpfile.js里添加引用:
var babel=require('gulp-babel');
然后新建gulp.task
gulp.task('babel',function()
{
gulp.src('src/*.js').pipe(babel()).pipe(gulp.dest('gulp-dist'));
})
上面代码的意思是，将src文件夹下的所有js文件，调用babel()进行转译，并生成到gulp-dist文件夹下。
值得注意的是，需要在根目录下新建.babelrc文件，并添加如下代码：
{
"presets": [
"env"
]
}
并在package.json里添加如下脚本：
"gulp": "gulp babel"
输入run命令即可看到gulp-dist下生成了编译成es5的JS文件。编译成功。
webpack相关的学习
下午是复习老师上午讲的知识，包括每个依赖的用法和设置。下面演示html-webpack-plugin插件的用处：
HtmlWebpackPlugin简化了HTML文件的创建，以便为您的 webpack bundle 提供服务。这对于被更改文件的文件名中包含每次编译哈希(hash) 的webpack bundle尤其有用。您可以让插件为您生成一个HTML文件，使用lodash templates提供您自己的模板，或使用自己的加载器(loader)。
在webpack.config.js里引用此依赖：
var htmlPlugin=require('html-webpack-plugin');
并设置如下代码：
module.exports={
output:{
path: path.resolve('build'),
filename:'[name],[hash:6].js'
},
entry:
{
vendor:'./src/index.js'
},
plugins:[
new htmlPlugin(
{
title:'demo',
template:'./src/template.html',
filename:'demo.html'
}
)
,
],
其中 output顾名思义是设置输出的各项属性，比如path.filename等。path.resolve是根据你的输入将绝对路径和相对路径互相转化。
‘[name],[hash:6].js’是指将打包生成的js用hash六位命名，便于标识。
接下来的，需要配置loader,以便对生成的js/css/jpg进行转译，我们需要安装，css-loader/style-loader/babel-loader/url-loader，并进行配置。
配置在webpack.config.js如下：
module:
{
rules:[
{
test:/.*\.js/,
exclude:path.resolve('node_modules'),
loader:'babel-loader',
options:
{
presets:
[
'env'
]
}
},
注释：两种方式匹配css和js都是可行的。
exclude:是表明打包时忽略的文件。
下面介绍：插件extract-text-webpack-plugin
该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;
首先我先来介绍下这个插件的安装方法:
npm install extract-text-webpack-plugin --save-dev
在webpack.config.js的配置:
{
test: /\.css$/,
use: extractPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
]
})
},
注：
use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件。
运行npm run build之后，在build目录下生成了目标html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>dess</title>
<link href="index.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="vender,db3ea1.js"></script></body>
</html>
而且可以发现，build目录下也生成了index.css，并且html中自动引用了。命名是在plugins下的方法中
new extractPlugin({
filename:'index.css',
}),
值得注意的是，需要在入口文件index.js中引用style.css（你需要打包的css源文件）
import './style.css'
至此，我们基本实现了由一个入口文件和模板文件，运用各种插件进行打包生成完整的页面到build底下的过程。离早上老师讲的还有一步，就是关于图片的编码，要使用url-loader.
{
test:/.*\.jpg/,
use:[
{
loader:'url-loader',
options:{
limit:8000
}
}
]
}
use是一个数组，里面定义了loader和options对象。
style.css引用了233.jpg如下：
body
{
color:blue;
background-image: url(233.jpg);
}
运行build，成功生成一个全是鱼的界面。
总结
经过今天webpack和gulp-babel的学习,更加深了我对于webpack和gulp区别的理解，果然是之前我看过的教程有个形象的比喻，如果说做项目是盖房子的话，gulp/grunt就是从0开始一步步盖，而webpack则是直接给你个房子的雏形，然后你自己改造。
我认为，webpack的重点在于理解内部复杂的逻辑关系，经常是一环套一环，抓住一点就知全局。比如，我们要理解入口文件的意义，入口文件引用了css、js的方法等，我们在webpack的配置文件里引用
babel/html-webpack-plugin/extract-text-webpack-plugin等插件，去利用入口js打包生成我们最后的目标文件。大体逻辑关系是这样，中间还包含各种小联系。比如loaders有很多种，我们需要设置相应的匹配规则去处理相关文件。
在我看来，这些Loaders都是依托于打包工具才能实现的。所以在配置文件里不需要提前声明。