Babel
Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：
下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
使用基于JavaScript进行了拓展的语言，比如React的JSX
Babel的安装与配置
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
我们先来一次性安装这些依赖包
1.// npm一次性安装多个依赖模块，模块之间用空格隔开
2.npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
在webpack中配置Babel的方法如下
1.module.exports = {
2. devtool: 'eval-source-map',
3.
4. entry: __dirname + "/app/main.js",
5. output: {
6. path: __dirname + "/public",
7. filename: "bundle.js"
8. },
9.
10. module: {
11. loaders: [
12. {
13. test: /\.json$/,
14. loader: "json"
15. },
16. {
17. test: /\.js$/,
18. exclude: /node_modules/,
19. loader: 'babel',//在webpack的module部分的loaders里进行配置即可
20. query: {
21. presets: ['es2015','react']
22. }
23. }
24. ]
25. },
26.
27. devServer: {
28. contentBase: "./public",
29. colors: true,
30. historyApiFallback: true,
31. inline: true
32. }
33.}
现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续用上面的例子进行测试，不过这次我们会使用React，记得先安装 React 和 React-DOM
1.npm install --save react react-dom
使用ES6的语法，更新Greeter.js并返回一个React组件
1.//Greeter,js
2.import React, {Component} from 'react'
3.import config from './config.json';
4.
5.class Greeter extends Component{
6. render() {
7. return (
8.
9. {config.greetText}
10.
11. );
12. }
13.}
14.
15.export default Greeter
使用ES6的模块定义和渲染Greeter模块
1.import React from 'react';
2.import {render} from 'react-dom';
3.import Greeter from './Greeter';
4.
5.render(, document.getElementById('root'));
Babel的配置选项
Babel其实可以完全在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 “.babelrc” 的配置文件中。我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：
1.// webpack.config.js
2.module.exports = {
3. devtool: 'eval-source-map',
4.
5. entry: __dirname + "/app/main.js",
6. output: {
7. path: __dirname + "/public",
8. filename: "bundle.js"
9. },
10.
11. module: {
12. loaders: [
13. {
14. test: /\.json$/,
15. loader: "json"
16. },
17. {
18. test: /\.js$/,
19. exclude: /node_modules/,
20. loader: 'babel'
21. }
22. ]
23. },
24.
25. devServer: {...} // Omitted for brevity
26.}
1.//.babelrc
2.{
3. "presets": ["react", "es2015"]
4.}
到目前为止，我们已经知道了，对于模块，Webpack能提供非常强大的处理功能，那那些是模块呢。
一切皆模块
Webpack有一个不可不说的优点，它把所有的文件都可以当做模块处理，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
CSS
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
继续上面的例子
1.//安装
2.npm install --save-dev style-loader css-loader
1.//使用
2.module.exports = {
3. devtool: 'eval-source-map',
4.
5. entry: __dirname + "/app/main.js",
6. output: {
7. path: __dirname + "/build",
8. filename: "bundle.js"
9. },
10.
11. module: {
12. loaders: [
13. {
14. test: /\.json$/,
15. loader: "json"
16. },
17. {
18. test: /\.js$/,
19. exclude: /node_modules/,
20. loader: 'babel'
21. },
22. {
23. test: /\.css$/,
24. loader: 'style!css'//添加对样式表的处理
25. }
26. ]
27. },
28.
29. devServer: {...}
30.}
注：感叹号的作用在于使同一文件能够使用不同类型的loader
接下来，在app文件夹里创建一个名字为”main.css”的文件，对一些元素设置样式
1.html {
2. box-sizing: border-box;
3. -ms-text-size-adjust: 100%;
4. -webkit-text-size-adjust: 100%;
5.}
6.
7.*, *:before, *:after {
8. box-sizing: inherit;
9.}
10.
11.body {
12. margin: 0;
13. font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
14.}
15.
16.h1, h2, h3, h4, h5, h6, p, ul {
17. margin: 0;
18. padding: 0;
19.}
你还记得吗？webpack只有单一的入口，其它的模块需要通过 import, require, url等导入相关位置，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中，如下
1.//main.js
2.import React from 'react';
3.import {render} from 'react-dom';
4.import Greeter from './Greeter';
5.
6.import './main.css';//使用require导入css文件
7.
8.render(, document.getElementById('root'));
通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。
不过这也只是webpack把css当做模块而已，咱们继续看看一个真的CSS模块的实践。
CSS module
在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，且基于优化工具，依赖管理和加载管理可以自动完成。
不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧是巨大且充满了全局类名，这使得维护和修改都非常困难和复杂。
最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下
1.module.exports = {
2. devtool: 'eval-source-map',
3.
4. entry: __dirname + "/app/main.js",
5. output: {...},
6.
7. module: {
8. loaders: [
9. {
10. test: /\.json$/,
11. loader: "json"
12. },
13. {
14. test: /\.js$/,
15. exclude: /node_modules/,
16. loader: 'babel'
17. },
18. {
19. test: /\.css$/,
20. loader: 'style!css?modules'//跟前面相比就在后面加上了?modules
21. }
22. ]
23. },
24.
25. devServer: {...}
26.}
创建一个Greeter.css文件
1..root {
2. background-color: #eee;
3. padding: 10px;
4. border: 3px solid #ccc;
5.}
导入.root到Greeter.js中
1.import React, {Component} from 'react';
2.import config from './config.json';
3.import styles from './Greeter.css';//导入
4.
5.class Greeter extends Component{
6. render() {
7. return (
8. <div className={styles.root}>//添加类名
9. {config.greetText}
10. div>
11. );
12. }
13.}
14.
15.export default Greeter
放心使用把，相同的类名也不会造成不同组件之间的污染。
CSS modules 也是一个很大的主题，有兴趣的话可以去官方文档查看更多消息
CSS预处理器
Sass 和 Less之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，
你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders
Less Loader
Sass Loader
Stylus Loader
不过其实也存在一个CSS的处理平台-PostCSS，它可以帮助你的CSS实现更多的功能，在其CSS官方文档可了解更多相关知识。
举例来说如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。
首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
1.npm install --save-dev postcss-loader autoprefixer
接下来，在webpack配置文件中进行设置，只需要新建一个postcss关键字，并在里面申明依赖的插件，如下，现在你写的css会自动根据Can i use里的数据添加不同前缀了。
1.//webpack配置文件
2.module.exports = {
3. devtool: 'eval-source-map',
4. entry: __dirname + "/app/main.js",
5. output: {...},
6.
7. module: {
8. loaders: [
9. {
10. test: /\.json$/,
11. loader: "json"
12. },
13. {
14. test: /\.js$/,
15. exclude: /node_modules/,
16. loader: 'babel'
17. },
18. {
19. test: /\.css$/,
20. loader: 'style!css?modules!postcss'
21. }
22. ]
23. },
24.
25. postcss: [
26. require('autoprefixer')//调用autoprefixer插件
27. ],
28.
29. devServer: {...}
30.}
到现在，本文已经涉及到处理JS的Babel和处理CSS的PostCSS，它们其实也是两个单独的平台，配合Webpack可以很好的发挥它们的作用。接下来介绍Webpack中另一个非常重要的功能-Plugins
转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » webpack入门详细教程（二）
