从0开始一个React/ES6项目-Webpack初探

最近想做一个网站，初步选型为react+koa+mangodb，想把自己从头到尾、从无到有的学习和解决问题的过程做个详细的、系统的记录，方便日后回顾。
由于开发和最终网站中可能有需要用到或者借鉴webpack的地方，本文先从介绍如何应用webpack开始一个项目，中间会有穿插自己尝试过程中的一些疑问和想法，最后简单介绍webpack原理。希望对其他人也能有些微薄的帮助。具体网站和功能会在后续系列文章中介绍。
初写文章，水平有限，竭尽全力地严谨和可靠，欢迎路过的各位提出宝贵意见。

1. webpack是什么

什么是前端打包

说到webpack，就会提到打包，前端打包是指对项目代码进行编译、压缩、混淆、合并、拆分、优化等操作，打包的目的是为了将es6/scss等这些部分浏览器无法处理的语言转换成es5/css这种浏览器可识别的，以及减小网络加载时间，安全性等，尽可能让开发者的精力集中在业务开发过程中。个人理解打包工具是在不改变程序功能逻辑的情况下，对项目代码进行处理和优化。

webpack的作用

这里引用webpack官网自己的定义：

webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.

这段话的大致意思是webpack在处理你的项目时，会从入口文件递归依赖包，最后生成一个被浏览器引用的bundler文件。这里强调的是“依赖”，webpack通常会根据入口文件依次向下，找到每个依赖资源（js/css/png/scss等），并将她们打包在一个文件里，在这个文件里给每个资源编上序号，当然，当项目很大时，webpack也可以设置多个入口来递归。随着es6的推广，以及模块化理念的逐步扩散，webpack这样做的好处很多，可以编译es6/react，可以从bundler文件中抽离公共依赖包，可以按需加载等等。

webpack的优势在哪，和gulp、grunt有什么区别

• webpack是一种模块化的解决方案，每个资源都是一个模块，通过配置可以对模块的统一处理来达到目的，方便高效。
• gulp是基于流的构建工具，资源就像水流一样流过一个个坑，每个坑里可以进行压缩合并编译，以及自定义的构建任务等，最终流出结果。和webpack比是不同的处理模式。
• grunt和gulp类似，不过由于它I/O过程会生成临时文件，效率较低。

2. 如何使用webpack打包react+es6的项目

说了很多，下面就从初始化一个项目开始使用和介绍webpack，体会webpack对模块和资源依赖的管理。
先创建项目，命令行执行：

mkdir jsfiddle
cd jsfiddle
npm init

安装webpack

npm i webpack -g

安装react

npm i react react-dom --save

项目根目录下创建src文件夹，里面创建app.jsx，app.jsx里面写入最常见的react代码：

import React from 'react';
import ReactDOM from 'react-dom';


ReactDOM.render(
  <h1>Hello, world!h1>,
  document.querySelector('#app')
);

目前直接在某个html中引入app.jsx是无效的，因为浏览器不懂解析react和es6代码，因此我们需要将它转换成es5。需要注意的是：

• Chrome和Firefox已经支持部分es6的特性了，可以直接在控制台里尝试。但开发基本上都是用Babel转码成es5的，react也可以通过babel转码。
• 日常es6功能的测试可以在这个网址上试地址

以上都只适用于某个文件或某段代码的转码，当处理项目层面的众多文件时，webpack就可以派出用场了。通过webpack引入babel-loader，让babel将.jsx转码成es5的代码在浏览器中运行。loader是webpack配置文件中处理某一类型文件的插件，这里我们将js和jsx文件用babel-loader处理。

安装babel-loader

阮一峰老师有一篇文章专门介绍babel安装。这里我们直接连同es6/react规则一起安装，babel-loader才能根据presets中的规则转码。“规则”是指babel按照源文件内容的类型进行转码，比如我们要将es6和react转码。

npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

根目录下创建.babelrc文件对babel进行配置，并设置转码规则。

{
  "presets": [ "es2015", "react" ]
}

根目录下创建webpack.config.js，运行webpack时会自动读取它来进行配置。

var path = require('path');
module.exports = {
  entry: './src/app.jsx',
  output: {
    path: path.resolve(__dirname, "dist/js/"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.js|jsx?$/,
        loader: 'babel-loader',
        options: {
          presets: ["es2015" ,"react"]
        }
      }
    ]
  }
}

上面的配置依次是入口entry，输出output, 处理模块和规则module.rules，这里有介绍，运行：

webpack

可以看到新建了dist/js目录，并生成了一个main.js文件，它有160KB，为什么这么大？？？ 因为前面说过会从入口文件(app.jsx)把依赖(react.js)打到一个文件里，也就output中指定的路径和文件。

我们在根目录下创建index.html，创建app元素，引入dist/js/main.js：

<div id="app">div>
<script type="text/javascript" src="./dist/js/main.js">script>

最后，浏览器打开index.html即可看到Hello world!。

3.Question

Q1： 如何打包css ?

如果我们react代码中引入css，

import './index.css';

要打包css怎么办？
对，webpack.config.js中module.rules下添加rule。

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

并且，安装css-loader：

npm i css-loader --save

再构建一次，可以看到main.js中已经有了css的代码。像scss，图片等想要打包都需要webpack.config.js中配置，并安装相应的loader才可，这里有各loader的列表。
注意，每次更改源文件，记得运行webpack打包才有效果。

Q2: 我不想把css打在js中，应该怎么做 ？

需要extract-text-webpack-plugin抽离css 地址，先安装，然后在上方require，记得安装style-loader，下面修改原来的设置。

{
  test: /\.css$/,
  // loader: 'css-loader',
  loader: ExtractTextPlugin.extract({
    fallback: "style-loader",  // use失败时使用
    use: "css-loader"          // 抽离css的loader
}

并且，安装css-loader：

npm i css-loader extract-text-webpack-plugin --save-dev

最后在最外层plugin中添加：

plugins: [
  // 上面需要var ExtractTextPlugin = require('extract-text-webpack-plugin')
  new ExtractTextPlugin("styles.css"),     
]

即可将原来打包在main.js中的css抽离到styles.css中。由于如今css可与js并行加载，以及能够单独缓存，能够优化网络加载时间。

Q3: 项目下有很多页面，有些不能打在一个包里？

多个页面，意味着多个入口文件，多个入口文件可以简单地在entry这个字段里设置属性即可。

entry: {
  entry1: ["./src/app.jsx"],
  entry2: ["./src/app2.jsx"]
},

最后每个入口文件都会打一个自己依赖关系的独立包。但是又有了新的问题，我们发现每个react页面的包都把react放进去了，文件很大，尤其时在做spa的时候，完全没有必要重复加载，因此，就有了下一个问题。

Q4：不同的依赖包里有共同引用的公共库，比如react，能否把公共库打到一个文件里？

当然可以，这个时候就要用到另外一个plugin(插件)，webpack自带的CommonsChunkPlugin。

plugins: [
  new ExtractTextPlugin("[name].css"),
  // 抽离公共库
  // 上面需要require('webpack')
  new webpack.optimize.CommonsChunkPlugin({    
    // 生成的公共库名称，如果为数组则是公共的抽了后放到哪些入口文件中
    name: 'common',    
    minChunks: 2,      // 模块被应用大于等于2次即被抽离
    chunks: ['entry1', 'entry2']  // 从哪些指定的入口文件里抽
  })
]

这样，我们可以看到最终common.js很大，两个入口文件较小，而且入口文件都引用了的react被打到common.js中去了，CommonsChunkPlugin还有几个属性可以用来配置，想详细了解的可以看这里;

Q5: 项目页面很多，而且工具会被应用于各个项目，不可能去手动定义每个入口文件，该怎么办？

可以指定某个文件夹，或者自定义匹配就好了。怎么做？
对我们来说，只要能生成key(文件名):value(路径)的键值对就可以了。这里我们可以使用node-glob，glob可以输入正则匹配来获取文件路径，利用glob我们可以生成该目录下所有文件路径的数组，稍微解析即可生成想要的键值对。

npm i glob --save-dev

// 获取文件夹中文件map名
function getFilesName(path) {
  // 上面需要安装glob(npm i glob)和require('glob');
  // 获取的是[path1, path2]
  var files = glob.sync(path);
  var entries = {};
  var key;
  // 生成{file1: path1, file2: path2}的形式
  files.forEach(function(item, idx) {
    key = item.substring(item.lastIndexOf('/') + 1, item.lastIndexOf('.'));
    entries[key] = item;
  });
  return entries;
}

webpack.config.js的入口文件可以这么写：

entry: getFilesName("./src/**.jsx"),

后面，不论多少入口文件，我们只要写在src最外层就可以当成入口文件，也可以更改entry的配置，也只需要更改入口文件夹名，或者更改匹配字符串即可。
到此，webpack使用入门已经结束，后面随着项目的开始，这里的问题也会逐步扩充。