从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使用入门已经结束,后面随着项目的开始,这里的问题也会逐步扩充。

你可能感兴趣的:(Javascript)