从零开始搭建webpack+react+redux项目

前段时间做了一个react项目，现在总结一下项目搭建的过程。

1. 准备

动手之前，我们首先要想好要用到的技术栈。我的项目使用了webpack4+react 16+redux+react-redux+react-router的技术栈，网络请求使用axios库，为了书写方便，css使用scss预处理器。
然后需要考虑项目打包出来最后的目录结构是什么样。我们希望项目最后打包出来是这个样子的：

结构很清晰，其中react-test是项目名，下面css/images/js三个文件夹分别存放css、图片和js文件，api文件夹存放的是mock的接口数据，index.html是入口页面。
接下来，就让我们朝着这个目标前进吧！

2. 新建项目

新建文件夹命名为react-test，进入文件夹，命令行执行npm init，一路enter下去（也可以选择性的填一些内容），完成之后文件夹里面会出现package.json文件。然后安装项目的依赖包：

• webpack相关：webpack、webpack-cli
• react相关： react、react-dom、redux、react-redux、react-redux、redux-thunk
• 网络请求相关： axios
• babel相关：…
• css相关：postcss-loader、node-sass、sass-loader、css-loader
• 文件相关：url-loader
• webpack插件：clean-webpack-plugin、html-webpack-plugin、mini-css-extract-plugin、copy-webpack-plugin、webpack-css-sprite。

这里省略了一些包，具体见文末链接。
在项目根目录下新建文件和文件夹，项目最终的目录结构为：

其中dist存放打包后的文件，node_modules存放项目引用的包，这两个为自动生成，其他文件及文件夹的作用分别是：

• src：存放项目源码
• webpack：存放webpack的配置项
• .babelrc：babel的配置文件
• postcss.config.js：postcss的配置文件
• webpack.config.js：webpack入口配置文件

3. 配置webpack

在package.json的script中添加四条命令：

"pro": "set NODE_ENV=production&&webpack",
"macpro": "export NODE_ENV=production&&webpack",
"dev": "set NODE_ENV=development&&webpack-dev-server",
"macdev": "export NODE_ENV=development&&webpack-dev-server"

前两句话分别对应Windows和Mac下生产环境打包命令，先将环境设为生产环境，然后运行webpack；后两句对应Windows和Mac下开发环境的打包命令，先将环境设置为开发环境，然后起一个服务器，webpack起服务器在后面会讲到。
这样在命令行中运行npm run dev或者npm run pro就可以运行生产或开发环境下的webpack了。生产环境下webpack会起一个服务器并打开浏览器显示页面；开发环境会生成dist文件夹。
webpack.config.js的内容为：

let entry = require('./webpack/entry.js');
let output = require('./webpack/output.js');
let rules = require('./webpack/rules.js');
let plugins = require('./webpack/plugins.js');
let optimization = require('./webpack/optimization');
let devServer = require('./webpack/devServer.js');

const ENV = process.env.NODE_ENV.split('::');

const projectInfo = {
    dirname: __dirname,
    name: 'reactTest',
    mode: ENV[0]
}

module.exports = {
    mode: projectInfo.mode,