有没有经历过想学习ES6的最新语法，却苦于没有合适的编程环境，不知道如何做才能让ES6的代码跑起来，别人的Less或者sass写的样式可以很好的加载到页面上，自己写的却明明没有语法错误，怎么也没用。其实这都是他们所需要的依赖没有给到位，那么问题就来了，我怎么知道他要依赖啥？
说两个点：
        1、现在浏览器还不支持ES6语法，所以使用ES6及以上版本都需要进行编译：ES6/7/8-->ES5。
        2、SASS/LESS都是CSS预处理器语言，并不能直接引用到HTML中，只有编译成CSS才可以。

搭建好的工程在文章最下方有GitHub链接。

一. 简要了解webpack

        刚接触前端的都知道webpack是一种非常强大的打包工具，但是，哪里强大？能打森么包？怎么用的？有什么好处？能解决什么问题？好像就直接就这样了。

纳尼？？？

        所以很多人是只听其名不知其意，更不知其用法。先上个链接：webpack中文文档，英文好的可以直接看源文档！可以理解为他是一个打包机，他可以处理各种文件，如less/sass/html/js等，可以打你想要的各种包，也可以结合node.js执行各种脚本来优化项目。它还能做如代码分割和懒加载，打包长缓存，图片转码base64，优化代码体积以及压缩图片等。
我们在这里会讲些什么呢？看下图

思维导图webpack部分

二. 开始构建

先放个目录结构图完整的即整个工程构建后的目录，很简单的。

目录结构图-完整

1.创建一个空工程

        新建一个空文件夹，然后从命令窗口进入该目录下执行命令

npm init

        一路回车即可，我新建的是一个react-study空文件夹，执行这个命令之后会生成一个package.json文件。然后在里面创建src文件夹，在src文件夹下新建一个study文件夹和一个style文件夹，study用来存放js文件，style用来存放样式文件,如CSS或者SCSS等。在创建一个index.html文件，主要用来做模板，使用HTMLwebpackplugin插件时候会用到。同src同级创建一个public文件夹，什么不用放。最后我们在study文件夹下新建一个main.js文件，随便打几个汉字都可以。

2.添加依赖包

我们根据webpack思维导图需要安装以下几个包
(1).首先是我们需要使用webpack，则先安装webpack。

npm install --save-dev webpack

(2).处理CSS，SCSS样式文件需要使用
        css-loader：遍历所有css文件并处理
        style-loader：把样式插入到页面的style标签中
        postcss-loader,autoprefixer：帮CSS自动添加前缀
        sass-loader,node-sass：处理.scss文件，把.scss文件编译成.css文件。这俩必须放在一起，因为sass-loader依赖于node-sass，在sass-loader中的loader.js中有引用node-sass.
进行安装( npm install 命令简写形式 npm i )

npm i --save-dev css-loader style-loader postcss-loader autoprefixer sass-loader node-sass

(3).babel处理ES6语法
        babel-core：babel的核心包，babel编译器本身，主要提供babel编译API。
        ( ps:babel-preset-某某 是babel编译过程中所用到的插件。 )
        babel-preset-env：根据配置的目标环境自动采用需要的babel插件
        babel-preset-stage-0：兼容ES6以及更高版本语法以及工能特性
        babel-loader：转换js文件

npm i --save-dev babel-core babel-preset-env babel-preset-stage-0 babel-loader

(4).安装react相关依赖
        react：使用react所需要的包
        react-dom：使用react-dom需要用的包
        babel-preset-react：babel进行编译时需要的react相关插件
顺便把需要的模板插件HTMLwebpackplugin安装了一起。

npm i --save-dev react react-dom babel-preset-react html-webpack-plugin 

至此我们所需要的所有依赖都安装完成了，现在可以去看看package.json文件，我们所安装的依赖包括版本都已经记录在案了。后面如果用到了其他依赖也是这样安装！

3.编写webpack的配置文件

前面我们简单介绍了webpack就是一个打包器，来处理各种文件，这样理解我们现在要做的就简单多了。官网上说我们可以写一个配置文件名字叫webpack.config.js,注意这个名字是固定的且位置是在工程的最外层，使用webpack命令的时候会自动加载这个文件。

// webpack.config.js内容
const path = require('path');
module.exports = {
context: path.resolve('./src'),
entry: __dirname + '/src/study/main.js',
output: {
    path: __dirname + "/public",
    filename: "js/bundle.js"
},
module: {
    rules: [
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
            },
            exclude: /node_modules/
        },
    ]
},
} 

从最外层看配置属性全部都放在一个对象实例中（放在{}）。这反应了两个信息，
第一：wepack配置就是一个对象，学习webpack就是在学习webpack属性，学习属性那就找文档查清楚我所用的属性是什么作用，是什么类型的值。
第二：既然是对象实例，我按照规则无论写在什么地方，写多少个配置文件都是可行的，只要webpack执行时可以加载到该配置就可以。
        依次介绍上述配置文件中的每一个属性（这里并不主要讲解webpack，但是会告诉你学习它的途径和方法）
先介绍一个比较笨但是我觉得比较有效的方法：看别人写的webpack配置，遇到不懂的字段属性去webpack官方文档去查，建议最好是去源文档看。下面解析过程中举个context的例子，给希望想深入学习webpack的童鞋一个途径。
        打开webpack文档，通过右上方的搜索图标直接搜索属性比如context

webpack文档首页

context

        最后我们把模板插件以及处理css和scss文件的解析器也配置好，最终的webpack.config.js文件如下

var htmlWebpackPlugin = require('html-webpack-plugin');// 引入我们安装的HTML模板插件
const path = require('path');
module.exports = {
context: path.resolve('./src'),
devtool: 'eval-source-map',
entry: __dirname + '/src/study/main.js',
output: {
    path: __dirname + "/public",
    filename: "js/bundle.js"
},
devServer: {
    contentBase: './public',
    historyApiFallback: true,
    inline: true // 实时刷新
},
module: {
    rules: [
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
            },
            exclude: /node_modules/
        },
        {
            test:/\.css$/,
            use:['style-loader','css-loader','postcss-loader','sass-loader']
        },
        {
            test:/\.scss$/,
            use:['style-loader','css-loader','postcss-loader','sass-loader']
        },
    ]
},
plugins:[
    new htmlWebpackPlugin({
        template:'index.html'
    })
]
}

devtool：一个开发辅助工具，加载webpack编译的源文件。有了它可以在浏览器调试代码时看到源文件。

devtool工具作用

4.编写.babelrc文件和.postcssrc.js文件

 // .babelrc 文件内容，stage-0注意一定要放在后面，更好的支持ES6、7属性。
{
"presets":["es2015","react","env","stage-0"]
}

.postcssrc.js文件内容

module.exports = {
plugins:{
    "autoprefixer": {}
}
}

5.在package.json配置webpack命令

配置webpack的命令主要在package.json文件中的script属性中，如下：

"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open",
"dev": "webpack-dev-server --open --config webpack.dev.config.js --mode development"
},

这里的重点在于后面的值，前面的属性名可以随意命名，且可以配置多个。
"webpack-dev-server --open"：使用webpack编译并打开webpack server就是刚才我们配置的DevServer。
"--config":"指定webpack使用哪一个配置文件",
"--mode development":当前运行环境为开发模式
// 下面的是其他打包时的命令属性，可以添加进去试试。

"--progress":"打包过程",
"--display-modules":"打包模块",
"--colors":"打包颜色",
"--display-reason":"打包原因"

注意：dev那个命令配置我们是还没有写webpack.dev.config.js文件的，所以这个先自动忽略。

6.测试一下配置好的工程环境

准备了这么多，终于可以验证一下了。
创建一个test.js文件在study文件夹下，然后main.js修改如下

// test.js文件
import React,{ Component } from 'react';
import '../style/main.scss';// 引入scss
class Test extends Component{
constructor(props){
    super(props);
}

render(){

    return(
        <div>
            <h1>Hello React!</h1>
        </div>
    )
}
}
export default Test;

main.js文件

import React from 'react';
import { render } from 'react-dom';
import Test from './test';// 引入上面的test组件

render(<Test />,document.body);

style文件下创建一个main.scss文件

.mainStyle{
.titleColor{
color: chocolate;
}
}

ok,一切准备就绪。激动人心的时刻到了。
在命令行中执行命令

npm start // 回车

最终效果：

测试效果

        可以去改动test.js文件中的文字，在看浏览器，不用手动刷新，会自动刷新的。同时看看我们的devtool是不是也起到作用了：

mapsource

        万事开头难，到这我们已经把最难得一块搞定了。

        还是得提一下，react是有脚手架的：create-react-app.可以一键生成应用我们上面所配置的东西它都帮你搞定了，有兴趣的可以试试。但还是建议能了解这个构建过程。

本工程的源码地址：点击源码.
注意 看radme.md文件说明。且下一章的ES6小补源码也在这个源码中test.js文件