上手webpack，搭建react开发环境

随着互联网的蓬勃发展，web 应用越来越复杂，一个前端web项目有着一大堆依赖包和复杂的JavaScript代码。然而在 web端，模块化的支持来的很缓慢，CSS很容易发生冲突，JavaScript语法较为松散……存在着种种急需解决的问题，为了简化开发的复杂度，蓬勃发展的前端社区涌现出了很多好的实践方法及工具：各种模块化规范、CSS预处理、CSS后处理器、TypeScript、Grunt / Gulp等构件工具以及webpack、browserify、rollup、parcel等模块打包工具等等。

在前端构建中，代码模块打包几乎就是最重要的一部分，而webpack是模块打包工具中最流行最具代表性的一个。webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换、打包或包裹任何资源。

上手 webpack

本文将通过实例讲解 webpack，最后完成一个 react 开发环境集成babel、eslint、sass。

新建一个 初始化 npm 并安装 webpack

进入 新建三个文件

src/hello.js

src/index.js

index.html

在命令行执行 试试，运行该命令会将资源打包到 目录下的 。 webpack 4.x 可以零配置构建。此时你会看见一个警告：未设置mode，webpack 4.x 提供了mode配置来使用相应的内置优化，有生产模式（production）、开发模式（development）和不设置（none）三种。但是为了更好的使用我们往往需要自己写配置文件。

先来看看 webpack 的常用配置项， 详细参考 https://webpack.docschina.org/configuration/

按照项目，我们从0写个最简单的配置 它的实现的功能就像零配置一样。

启动devServer

现在我们想要看到效果都需要，运行命令打包后再在浏览器中查看，现在我们使用 来免去这些繁琐的步骤。 为我们提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)

修改配置文件，告诉开发服务器(dev server)，在哪里查找文件、在哪个端口启动：

执行 就可以将这个服务起起来，我们将它加到 中去

开发时直接运行 即可，打包则运行

使用 source map

当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置，为了更容易地追踪错误和警告，JavaScript 提供了 source map功能，将编译后的代码映射回原始源代码。当然如果你设置了mode为development，他是默认开启的。

配置Html模板

现在项目的 是手动创建的，如果更改打包后的文件的名称就又要去手动更改一次。我们使用html-webpack-plugin插件来搞定，生成一个自动引用你打包后的JS文件的新

修改配置文件

使用sass

是 提供的最激动人心的功能之一了。通过使用不同的 实现对不同格式的文件的处理。如sass转css，jsx转js。

这一步我们先来配置CSS，为了从 JavaScript 模块中 一个 CSS 文件，你需要在 配置中安装并添加 style-loader和 css-loader。这儿我还用了sass，所以多下载了 与

新建一个 ， 在 中引用

hello.scss

hello.js

执行 在浏览器中打开 就能看见样式生效了

使用autoprefixer 添加CSS3前缀

由于CSS3很多属性还需要添加各个浏览器的前缀，使用postcss的autoprefixer可以帮助我们方便的处理这个问题

新建一个 文件配置下postcss

在webpack配置中添加postcss-loader

分离CSS

在多数情况下打包时都会进行CSS 分离，以便在生产环境中节省加载时间。在4.x以前的版本中，我们使用 extract-text-webpack-plugin 来拆分CSS。在4.x版本中webpack推荐使用 mini-css-extract-plugin 替代。

在配置文件中配置下这个插件

运行 ，webpack会将CSS单独打包出来。

如果重复执行 目录下会有上次打包后的文件，这儿使用 clean-webpack-plugin 这个插件来清理

在配置文件中配置我们的需要清理的文件夹

使用 babel 编译 react

前面说了，我们的目标是搭建react开发环境，现在就配置 babel-loader 来转码 react。

新增一个 文件配置babel

删除 目录下的所有文件，新建一个 、

我们需要修改HtmlWebpackPlugin的配置，在 文件夹中新建 用来作为生成html文件的模板

现在就可以愉快的编写react了。

处理图片字体等资源

前面说过webpack处理各种文件就是配置各种loader，对于图片、字体等资源我们可以使用file-loader来处理

修改webpack的配置文件，让其支持图片文字等资源

使用 ESLint 检查代码

ESLint是一个javascript代码检测工具，它可以用于检查常见的JavaScript代码错误，也可以进行代码风格检查，这样我们就可以根据自己的喜好指定一套ESLint配置，然后应用到所编写的项目上，从而实现辅助编码规范的执行，有效控制项目代码的质量。

在webpack中我们可以使用eslint-loader来检查代码，笔者我比较喜欢JavaScript Standard Style，现在就来配置下

新建 配置eslint规则

在webpack配置中新增eslint-loader

启用HMR

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。我们是讲快速上手搭建react开发环境的，在此就不细说HMR了。我们直接使用 react-hot-loader 这个模块。

在 中添加配置

在 中使用react-hot-loader

现在运行 修改项目代码试试。如果你跟着教程一步一步走到这儿，你会发现修改CSS并不会生效，这是因为，我们用了MiniCssExtractPlugin来拆分CSS文件，在开发环境中我们还是使用style-loader即可，同时开发环境还应该启用 sourceMap 方便调试。

本文先说到这儿，这节我们聊了一个常用loader，插件的使用，开发环境的简单配置等，下一节再讲开发环境与生产环境的区分，并在此基础上做些调整优化。

左手代码右手砖，抛砖引玉

给点个赞，好不好啊