webpack学习

webpack简单点来说就就是一个配置文件，所有的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块

• entry 入口文件 让webpack用哪个文件作为项目的入口
• output 出口 让webpack把处理完成的文件放在哪里
• module 模块 要用什么不同的模块来处理各种类型的文件

如果需要添加样式, 怎么引入样式?

将样式模块化.

• 安装相应的 loader:

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

　　css-loader 处理 css 文件中的 url() 表达式.

　　style-loader 将 css 代码插入页面中的 style 标签中.

• 在 webpack.config.js 中配置新的 loader.

{
 test: /\.css$/,
 loader: 'style!css'
}

• 新建一个 css 文件 NewsHeader.css

.newsHeader {
 align-items: center;
 background: #ff6600;
}

.newsHeader-logo {
 border: 1px solid white;
 height: 18px;
}

• 然后在 NewsHeader.js 中引入它

import './NewsHeader.css';

 

Babel 

Babel是一个 JavaScript 编译器，让我们可以使用下一代 JavaScript 语法编写代码，目前来说，也就是ES6

 

参考资料：

　　http://www.tgf21.com/2016/07/10/React:%E6%89%8B%E6%8A%8A%E6%89%8B%E6%90%AD%E5%BB%BAReact%E5%A4%A7%E5%9E%8B%E5%BA%94%E7%94%A8/

　　http://www.68kejian.com/app/detail.html?id=76&&c=442