使用webpack4从零构建React + React-router + Redux + Scss/Css开发环境

  前言  

    最近这几年，前端变化非常大，各种新框架应接不暇，从最开始几个html,css,js文件就搞定了前端，到现在前端的模块化，工程化，旨在构建出易于维护的前端系统。目前为止，前端三大框架Vue/React/Angular(Vue官网:https://cn.vuejs.org/index.html,

React官网:https://reactjs.org/,Angular官网:https://angularjs.org/)，身为一个前端开发人员，不了解这些框架，感觉都out了。个人比较喜欢React，主要是jsx语法很灵活，以及其强大的生态系统，但React的资料国内非常的少，关于使用webpack4构建React开发环境就更少了，本文章将带来读者使用webpack4(目前是最新的，webpack官网:https://webpack.js.org/)从零构建一个React + React-router + Redux + Scss/Css的开发环境，如果是刚入门weboack4的读者，也不要紧，本文尽量使用最浅显易懂的方式告诉你webpack是干什么的，以及如何写webpack配置文件，对于React-router,Redux其实也不是什么高大上的东西，文章后面都会详细介绍。

     在构建过程中，会介绍基本的loader如处理jsx/js的babel-loader(babel的具体内容请查看官网:https://babeljs.io/)，处理css/scss(Scss的内容请查看官网:https://sass-lang.com/)的css-loader和scss-loader，以及处理静态资源文件(png/jpg/gif)的url-loader，以及做css兼容处理的postcss-loader(postcss的内容请查看官网:https://postcss.org/)，然后会介绍一些插件，比如并行压缩代码插件，css压缩插件，以及肯会使用happypack来加速打包。

     文章可能比较长，请一定要耐心看，一步一步跟着做，我会把每一步的webpack配置文件都发出来，保证每一个webpack配置文件都是能用的，当自己亲手搭建完一个React开发环境，自己也会有成就感，本项目已经放github欢迎下载:https://github.com/sundial-dreams/ReactRedux/tree/master（不介意的话，给个star也行）。

  

文章目录

---

yarn安装

webpack4介绍

项目目录结构

项目搭建

使用babel-loader处理js/jsx文件

使用css-loader以及sass-loader处理css/scss文件

使用webpackDevServer

使用postcss

使用url-loader处理资源文件(图片等)

使用webpack插件

优化部分

使用happlypack优化打包速度（webpack4已经不需要它了）

别名配置

React,React-router,Redux的介绍和使用

 

yarn安装   

     使用webpack4构建的过程中，可能涉及到很多包的安装，强烈建议使用yarn来安装包(用npm安装包也是一样的)，yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载，跟npm相比，快的不是一点点(并行下载)，而且会缓存下载过的包，所以下载过的包，都无需重新下载。

     首先设置npm镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

     使用npm安装yarn(当然设置了npm镜像的话，安装速度也不算太慢)

npm install -g yarn

     安装完 yarn 后同理也要设置镜像源

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

yarn的使用也很简单

     初始化一个新项目

yarn init

#等价于npm init 不过他生成的是package.json和yarn.lock的文件

      添加依赖包

yarn add [package]
yarn add [package] --dev 添加到devDependencies 等价于npm install [package] --save-dev
yarn add [package] --peer 添加到peerDependencies
yarn add [package] --optional 添加到optionalDependencies

     升级依赖包

yarn upgrade [package] 

#upgrade这个单词是升级的意思

     移除依赖包

yarn remove [package]

     安装项目的全部依赖

yarn 或者 yarn install

webpack介绍

     这里我简单介绍一下webpack，3个月前，我也不知道webpack是什么鬼，不过随着自己对前端认识越来越深，现在看来webpack真是个无所不能的打包工具，不仅使前端有了模块化，工程化的概念，而且在前后端分离方面也有很大的贡献。简单来说webpack可以让前端代码可以向后端那样模块化，通过import 或 require方式可以导入模块，export 或 exports可以导出模块(分别对应es6和nodejs的模块系统)，像后端一样，所有的导入肯定有一个入口点，这就类似于后端的主模块一样(想想主模块一定会把所有依赖的模块给导进来)，webpack就是从这个入口点出发开始打包，一直找通过import等方式导入的模块，打包到一起，最后输出html+css+js+png等静态文件。

这是官网给的图，其实也很好理解，从入口(左上角)一直找依赖(import 进来的东西)，最后把它们一起打包输出成js+css+jpg+png，因为什么文件都可以通过import来导入，所以就必须得对每一种文件进行处理，import 了 css文件就必须得对css文件进行处理，故就要用css-loader 其他文件也是一样的，说到这里，想信对webpack也能有一定的理解了吧 ,如果没有理解，可以试着跟着下面慢慢做，写着写着就理解了。

目录结构 

接下来我们可以开始我们的构建了项目了，首先来看我们最终的目录结构长什么样

目录结构如下

 

ReactTest

               |___ dist  打包目录

               |___ assets 静态，公共资源目录

               |___  public 静态，公共资源目录

                            |___ index.html 入口

               |___ src 

                            |___ components 组件目录

                                               |___ Button 组件Button

                                                                  |___ button.jsx 组件文件

                                                                  |___ button.scss 样式文件 或者是button.css

                            |___ pages 页面目录

                                                |___ Index 首页

                                                                  |___ index.jsx 首页

                                                                  |___ index.scss 样式文件

                            |___ reduxs 存储redux状态，action，reducer目录

                                                |___ actions 存放redux action目录

                                                                   |___ action.js

                                                |___ reducer 存放redux reducer目录

                                                                   |___ reduce.js

                            |___ router 路由目录

                                                 |___ router.js

                            |___ index.jsx 入口

               |___ .babelrc babel配置文件

               |___ postcss.config.js postcss配置文件

               |___ webpack.common.config.js webpack公共配置文件

               |___ webpack.config.js webpack配置文件 打包时使用

               |___ webpack.dev.config.js webpack配置文件 开发时使用

                  

 

项目搭建

    先建个项目目录ReactTest(名随便起)，然后在当前项目下打开终端输入命令yarn init初始化项目，然后一路回车，最后应该会在项目目录下出现package.json文件，新建src文件夹，dist文件夹，public文件夹

然后安装webpack

yarn add webpack --dev

在项目目录下新建webpack.config.js，src下新建index.jsx，public下新建index.html其中index.jsx和index.html为入口

//webpack.config.js
const {resolve,join} = require("path");
const paths = {
  src: resolve(__dirname, "src"),
  dist: resolve(__dirname, "dist")，
  public: resolve(__dirname,"public")
};
module.exports = {
  entry: [
      join(paths.public,"index.html"),
      join(paths.src,"index.jsx")
  ],
  output: {
    path: paths.dist,
    filename: "[name].js"
  }
};

现在webpack还不能跑，jsx和html文件没有处理，首先处理jsx文件，我