搭建 webpack、react 开发环境（二）

时间 2019-11-07

原文原文链接

配置处理样式文件

到目前为止，整个工程的配置已经差很少了，对于 React 更多相关的配置将在后面继续介绍，如今咱们先来对目前的工程进行优化。css

前面咱们学习了搭建 webpack、react 开发的基础环境，但它实现的功能还远远不够，对于 webpack 的配置和 react 工程相关的基本依赖尚未实现，因此接下来咱们会继续完成这些工做。html

首先对于开发 web 应用天然少不了要写一些样式文件来使得页面变得更加美观，如今为了提升开发的效率，一般会使用一些 CSS 的扩展语言来书写样式，如 Less、SCss 等。这里我将会安装和配置对 Less 语法的支持。前端

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增长了变量、Mixin、函数等特性。Less 能够运行在 Node 或浏览器端。node

要在项目中使用它首先咱们须要安装一些相关的依赖，首先咱们要使用 Less，天然须要先对它进行安装，以后对于 Less 咱们须要将它编译为 CSS，因此须要安装 less-loader，而后须要将 CSS 转换为 CommonJS，因此须要安装 css-loader，最后须要从 JavaScript 字符串中建立 style 节点，因此须要安装 style-loader，因此最后咱们须要安装以下依赖：react

$ yarn add less less-loader css-loader style-loader --dev

依赖安装完成以后，还须要在配置文件中对其进行配置：webpack

// webpack.base.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: 'style-loader' // creates style nodes from JS strings
            }, {
                loader: 'css-loader' // translates CSS into CommonJS
            }, {
                loader: 'less-loader' // compiles Less to CSS
            }]
        }]
    }
};

配置处理图片文件

前端项目中除了 html、css、js，另外也须要处理一些图片文件，webpack 打包图片文件是经过 file-loader、url-loader 来处理的。es6

url-loader 能够将指定大小及如下的图片文件转成 base64 写入 JavaScript 中，避免额外请求图片资源，若是超过指定大小再使用 file-loader 打包图片文件。web

如今咱们先来安装相关的依赖：json

$ yarn add url-loader file-loader --dev

安装完成以后咱们须要对其进行配置：bootstrap

// webpack.base.config.js
module.exports = {
    module: {
        rules: [{
            test: /\.(jpg|png|gif|svg|jpeg|woff|woff2|eot|ttf|otf|ico)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 1024,  // 指定上面所说的指定大小的标准，超过以后将会交给 file-loader 处理
                    // 配置 file-loader 的可选项
                    name: 'images/[name].[ext]'
                }
            }]
        }]
    }
}

配置支持 ESlint 语法检测

周所周知，JavaScript 是一个动态的弱类型语言，在开发中比较容易出错，致使出错的缘由千奇百怪，有可能只是一时疏忽，致使拼写错误，有多是手抖加了个符号等等，而要找出这些错误每每会花费大量的时间，为了不相似这样的事情但不只是如此，咱们须要一个工具来协助咱们的开发。

ESlint 是使用 Node.js 编写的，其致力于提供一个插件化的 JavaScript 代码检测工具，咱们能够默认使用它的规则，也能够自定义检测规则，如今咱们就来安装和使用它。

首先使用 ESlint 须要安装 eslint和eslint-loader，另外因为项目中须要使用到 ES2015 的语言规范，所以须要安装 babel-eslint，将会在 .eslintrc.js 中使用它，它们的安装方式与前面相同：

$ yarn add eslint eslint-loader babel-eslint --dev

因为 React 使用了一些特定的 ESLint 没法识别的 JSX 语法，因此咱们还须要安装 eslint-plugin-react来支持 React 中特定的 JSX 语法。

$ yarn add eslint-plugin-react --dev

而后咱们如今先在公共的 webpack 配置文件中进行配置：

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
                "babel-loader",
                "eslint-loader",
            ],
        }, ],
    },
    // ...
}

由于以前咱们已经对 JavaScript 文件进行了配置，因此对比起来，咱们只须要在对 JavaScript 文件处理的 use 属性按照上面改成数组便可，loader 会至下而上的执行。

对于 ESlint的更多配置，咱们既能够在 webpack 配置文件中指定检测规则，也能够遵循最佳实践在一个专门的文件中指定检测规则。为了保证公共配置文件的整洁和可读性，咱们尽可能采用后面的方式。

如今咱们去项目的的根目录下建立两个文件：.eslintignore 和 .eslintrc.js，前者指定了不须要检查的文件或目录，后者制定了 ESLint 的详细配置信息，如今就来简单的完成这两项工做。

// .eslintignore
/config

一般来设置这些规则是一个麻烦的事情，并且并不能保证本身设计的合理性，好在若是咱们不想每次都指定这些规则，如今已经有不少符合最佳实践的规则。其中之一就是 Airbnb Style Guide，此外 Airbnb 还开源了他们本身的 ESlint 配置。

接下来来实现使用 Airbnb 的 ESLint 配置，首先仍是先安装相关的依赖项：

# eslint-config-airbnb: 配置一些 eslint rules 的规范
# eslint-plugin-import：使用 import 的时候的一些 rules 规范
# eslint-plugin-jsx-a11y：jsx 的一些 rules 规范
$ yarn add eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y --dev

对它们的使用，咱们须要在 .eslintrc.js 文件中写入对应的字段，结合前面的讲解，如今来对 ESlint 进行配置：

//- .eslintrc.js
module.exports = {
    // 解析器用于解析代码
    parser: 'babel-eslint',
    // 使用的扩展库
    extends: ['airbnb'],
    // 环境，能够设置环来作区别判断
    env: {
        browser: true,
        node: true,
        es6: true,
        commonjs: true
    },
    // 第三方插件
    plugins: [
        'react',
        'jsx-a11y'
    ],
    // 解析器配置
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        }
    },
    // 规则配置
    rules: {
        // enable additional rules
        'no-console': 2 // 禁止使用consol
    }
}

如今每次咱们进行编译时，ESlint 就会对指定的代码进行检查，不符合规范时将会在 console 中报错。

若是项目使用了 Git，咱们还能够经过使用 pre-commit 钩子在每次提交前检测代码，若是检测失败则禁止提交。

首先咱们须要安装

$ yarn add pre-commit --dev

而后在 package.json 文件中的 script 字段中配置 eslint-commit 命令：

"scripts": {
    "eslint-commit": "eslint --ext .js src"
}

最后在 package.json 中配置在提交前 pre-commit 须要运行的命令：

"pre-commit": [
    "eslint-commit"
]

完成以后，在每次提交以前，都会运行 eslint-commit 命令进行检测，若是检测到有违反代码规则的状况，则会致使提交失败。

优化 webpack 配置

减小打包的时候重复代码。
Babel 对诸如 _extend 之类的常见函数使用很是小的助手。默认状况下，这将被添加到每一个须要它的文件中，因此会产生许多重复代码。

正由于上面的缺陷，因此咱们须要 Babel 运行时做为一个单独的模块以免重复，要实现这个功能咱们须要使用到 babel-plugin-transform-runtime，另外同时还须要依赖 babel-runtime，因此接下来就对它们进行安装：
```
$ yarn add @babel/plugin-transform-runtime @babel/runtime --dev
```
而后在 .babelrc 文件中进行配置：
```
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-transform-runtime"]
}
```

自动加 CSS3 前缀。

由于并非全部的浏览器对 CSS3 的支持都那么好，因此须要针对一些浏览器添加相应的前缀，而在全部的地方本身添加会显得麻烦，有时还会忘记致使样式错乱，因此咱们可让 webpack 来自动完成。

想要 webpack 帮忙自动加上“-webkit-”之类的 CSS 前缀，咱们须要用到 postcss-loader 和它的插件 autoprefixer：

$ yarn add postcss-loader autoprefixer --dev

而后在公共配置文件指定使用：

module.exports = {
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: 'style-loader' // creates style nodes from JS strings
            }, {
                loader: 'css-loader' // translates CSS into CommonJS
            }, {
                loader: 'postcss-loader', // Automatically add browser prefix
            }, {
                loader: 'less-loader' // compiles Less to CSS
            }]
        }, ]
    }
}

最后在项目的根目录下添加 .postcssrc.js 文件对其进行配置：

module.exports = { 
    plugins: { 
        'autoprefixer': {browsers: 'last 5 version'} 
    } 
}

分离 CSS 并消除冗余的 css代码。

咱们知道 webpack 的理念就是把全部的东西都打包到 JavaScript 文件中，包括 CSS、图片等等，这样能够减小http请求，但劣势也很明显，随着项目愈来愈大，JavaScript 文件会愈来愈大，同时为了对项目进行更好的管理，咱们就须要对 CSS 文件进行分离。

首先咱们须要安装 mini-css-extract-plugin：

$ yarn add mini-css-extract-plugin --dev

而后在生产配置文件中进行配置，咱们在这里先不设置，放在下面一块儿进行配置。

另外平时咱们去开发一些项目的时候，会引入一些框架：好比 bootstrap，引入相关框架后，文件会变得很大，而其中的代码咱们实际用到的却不多，因此这时候咱们须要想办法优化这些代码，把这些冗余代码去掉。

在 webpack 中咱们可使用 purifycss-webpack 达到该目的，首先咱们须要安装相关依赖：

$ yarn add purifycss-webpack glob purify-css --dev

而后在生产模式下的配置文件中引入 purifycss-webpack 并在 plugins 中做出相应，连同下面须要的设置，最后生产模式下的配置文件以下所示：

const path = require('path');
// 引入公共配置
const webpackBaseConfig = require('./webpack.base.config');
// 合并配置的插件
const webpackMerge = require('webpack-merge');
// 用于分离 CSS
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 删除冗余 CSS
const glob = require('glob');
const PurifyCssWebpack = require('purifycss-webpack');

module.exports = webpackMerge(webpackBaseConfig, {
    // 指定模式
    mode: 'production',
    // 加载器
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: MiniCssExtractPlugin.loader // creates style nodes from JS strings
            }, {
                loader: 'css-loader' // translates CSS into CommonJS
            }, {
                loader: 'postcss-loader', // Automatically add browser prefix
            }, {
                loader: 'less-loader' // compiles Less to CSS
            }]
        }]
    },
    // 插件配置
    plugins: [
        new PurifyCssWebpack({
            paths: glob.sync(path.join(__dirname, '../*.html'))
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "css/[name].css",
            // chunkFilename: "[id].css"
        })
    ]
});

好了，到这里本篇就算结束啦，这里更多的是介绍了 webpack 方面的一些配置和插件的使用，以及一些能够优化的地方，若是你想要知道最初的搭建步骤，你能够点击搭建 webpack、react 开发环境（一）来继续查看。若是你须要查看 React 相关插件和库的安装能够点击搭建 webpack、react 开发环境（三）来继续查看。