上手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,插件的使用,开发环境的简单配置等,下一节再讲开发环境与生产环境的区分,并在此基础上做些调整优化。

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

给点个赞,好不好啊

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180719B003FW00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券