R-1.使用webpack构建工程

        有没有经历过想学习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，优化代码体积以及压缩图片等。 我们在这里会讲些什么呢？看下图

二. 开始构建

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

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

  

  

•         context：绝对路径，解析的入口点，webpack进行各种文件解析的时候就是从这目录的。默认值是当前文件路径，建议设置这个值，这样可以和当前工作目录区分开。

•         entry：整个项目的入口文件，从这个文件开始会找到这个文件中所有依赖的文件以及其他文件中依赖的其他文件。我们设置的是当前工作目录下的src/study/main.js文件为入口文件。

•         output：有入口就有出口，经过webpack处理的文件输出的地方

•                  path：要输出文件的路径，当前工作目录下的public文件夹。

•                  filename：输出文件的名字，我们为了把打包出来的js文件和HTML文件能区分开所以在filename加了一层路径js，文件名称定为bundle.js。

•         module：模块，各种资源加载器都是在这里进行配置。            rules：一组规则，与创建模块时的请求匹配。这些规则可以改变模块的创建方式。也可以将加载器应用于模块，或修改解析器。我们就是要在这里去用们安装的那些依赖包各种解析器。

•                test：匹配规则，找到所有符合这个规则的文件。一般是一个正则表达式！

•                use：指定对符合匹配规则的文件使用何种解析器。他可以是一个对象也可以是个数组，当处理该类型的文件需要用到多个解析器的时候就可以用数组，比如解析.scss文件时。

•                loader：指定的解析器；解析器的名字字符串形式。

•                exclude：指定那些不需要解析器处理的文件。忽略node_modules下的文件。

•         最后我们把模板插件以及处理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编译的源文件。有了它可以在浏览器调试代码时看到源文件。

  

• devServer：实时动态刷新页面，每当你修改了页面代码都会出发刷新，这样不就不用每次都执行一次webpack编译然后自己手动刷新浏览器看结果了。 plugins：所用到的插件都在这里进行初始化，具体插件怎么用，跟webpack一样，去官网查各种配置属性。

• **HTMLwebpackplugin**用来生成一个HTML文件，可以给他指定一个默认的模板，template属性指定使用的模板。它还有很多其他配置属性，点开文档，找到Option有个表格列出了所有的属性和作用。

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是不是也起到作用了：

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

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

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