# web-boilerplate

**Repository Path**: pcu/web-boilerplate

## Basic Information

- **Project Name**: web-boilerplate
- **Description**: web boilerplate for my study.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-08-20
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 搭建 webpack + React 开发环境

随着互联网的不断发展，功能越来越复杂，现在很多网页都已经以及看作是功能丰富的应用，与此同时，为了更加便捷的开发，简化开发的复杂度，提升开发效率，很多开发工具应运而生。

webpack作为一种模块解决方案，主要是将项目作为一个整体，通过一个入口主文件，找到项目的所有依赖文件，使用符合条件的loader处理，然后打包成为浏览器可识别的一个或者多个文件。Webpack的处理速度更快更直接，能打包更多不同类型的文件。

更多webpack信息可以到官网查看：[http://webpack.github.io/](http://webpack.github.io/)

也可直接查看中文文档：[https://www.webpackjs.com/](https://www.webpackjs.com/)

在这个小项目中我们将使用webpack手工配置react开发环境，从而实现更好的自由度，也是为了了解webpack的同时学习react基础。当然你也可以直接使用[create-react-app](https://www.npmjs.com/package/create-react-app)的方式直接配置。

## 初始化npm开发环境并学习如何安装插件

### 初始化npm开发环境
可以到node官网进行下载直接安装：[https://nodejs.org/en/download/](https://nodejs.org/en/download/)

安装完成以后npm也一起安装安装，可以使用命令 `node -v` 和 `npm -v` 检查是否已经安装完成。

如果需要进行版本升级，安装n工具，更多使用方法移至npm主页：[https://www.npmjs.com/package/n](https://www.npmjs.com/package/n)

```shell
# 工具安装
npm install -g n

# 使用或安装最新的官方版本
n latest

# 使用或安装稳定的官方版本
n stable

# 使用或安装最新的LTS正式版本
n lts
```
如果提示权限错误，请使用sudo命令安装。

安装好以后我们使用命令`npm init`即可进行项目初始化。

### 安装插件

#### 全局安装和本地安装
npm的模块安装时分为本地安装（local）和全局安装（global）两种方式。

进行全局安装时，所有的模块都将安装到全局目录中，全局目录可以通过命令` npm config get prefix` 进行查看，通过命令 ` npm config set prefix`进行修改。全局安装可以在任意用户目录中使用相关命令，一次安装，重复使用。安装方式为：

```
npm install -g 模块名
```
如果提示权限错误，请使用sudo命令安装。

而使用本地安装时，模块安装到当前执行命令所在目录。安装方式为：

```
npm install  模块名
```

#### --save 和 --save-dev 的区别

npm install时使用--save和--save-dev参数，可分别将依赖（插件）记录到package.json中的dependencies和devDependencies下面。

dependencies下记录的是项目在运行时必须依赖的插件，常见的例如react jquery等，项目打包好了、上线了，这些也是需要用的，否则程序无法正常执行。

devDependencies下记录的是项目在开发过程中使用的插件，例如我们开发过程中需要使用webpack打包，但是开发完成，上线发布以后不再使用。

## 开始使用webpack

### 安装

为了避免版本问题，推荐使用webpack本地安装：

```
npm install --save-dev webpack webpack-cli webpack-dev-server
```

**为了更好的方便开发以及发布，我们将分离webpack开发环境，一共需要配置以下3个文件：**

1. 开发阶段环境文件：`webpack.dev.js`
2. 产品发布环境文件：`webpack.pro.config.js`
3. 公共配置文件：`webpack.common.js`

## 配置 `webpack.common.js`

在当前文件夹根目录下新建一个名为`webpack.common.js`的文件。

这个文件里主要包括在开发环境和产品发布时的公用设置，避免在其他两个文件中重复设置，这些设置往往通用，这样做更加方便维护。

一开始时可单独配置，到后面再来剥离公共代码。

在本次配置记录中，主要是文件的公共解析，以及html模板文件的使用。

这部分涉及到的点主要是：

### 关于loader

通过使用不同的loader，webpack能调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

在配置loader时，可以包括几下几方面：

* test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
* loader：loader的名称，多个名称中间使用`!`分割开（必须）
* include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
* query：为loaders提供额外的设置选项（可选）

### Babel

使用Babel主要是为了：
1. 使用最新版本JavaScript代码，而不用管浏览器是否支持；
2. 使用框架扩展语言，比如react的jsx。

安装以下依赖：

```
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
```

然后再安装react框架文件：

```
npm install --save react react-dom
```

另外还可以增加对Babel的配置扩展。

接下来便可以配置jsx文件的处理以及使用。

### file-loader和url-loader

使用loader来处理图片以及字体

相关使用可参考：

信息来源：[https://segmentfault.com/a/1190000011487980](https://segmentfault.com/a/1190000011487980)

### 设定 HtmlWebpackPlugin

这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

详细信息可以参考：[https://github.com/jantimon/html-webpack-plugin#configuration](https://github.com/jantimon/html-webpack-plugin#configuration)

[HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)

  1. 安装：

```
npm install --save-dev html-webpack-plugin
```

2. 使用：

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');


plugins: [
  new HtmlWebpackPlugin({
      template: __dirname + "/src/index.tmpl.html"
  })
],
```


## 配置 `webpack.dev.js`

### 入口（entry）

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。

```javascript
  entry: {
    app: './src/index.jsx',
  },
```
在开发环境中可直接设置文件。

>注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

### 出口（output）

通过配置output属性来配置输入文件。

```javascript
output: {
  filename: 'bundle.js'
},
```

> 此时在开发环境中js和css都在bundle.js里面，发布代码时，需要做到分离。

### loader

#### 处理CSS

```
npm install --save-dev style-loader css-loader
```

* css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能
* style-loader将所有的计算后的样式加入页面中

通过添加多个loader进行链式处理。

```javascript
{
test: /\.css$/,
use: [
  'style-loader',
  'css-loader',
]
},
```

为了浏览器的兼容性，引入了autoprefixer插件来自动添加css前缀。

#### 处理scSS

```
npm install --save-dev less sass-loader
```

在配置中添加 less-loader即可使用less编写文件。

#### 热更新

内置的热加载插件：[HotModuleReplacementPlugin](https://webpack.js.org/plugins/hot-module-replacement-plugin/)

使用webpack-dev-server搭配HotModuleReplacementPlugin插件即可进行热更新：

```javascript
// 配置webpack-dev-server
devServer: {
  hot: true,      //  开启热更新
  open: true,     //  自动打开浏览器
  inline: true    //  自动刷新
},
```

同时还需要在plugins中：

```javascript
new webpack.HotModuleReplacementPlugin(),
```

## 配置 webpack.prod.config.js

### 添加发布文件夹，并在文件名中添加哈希值，帮助强缓存

```javascript
output: {
  filename: '[name].[hash:8].js',
  path: path.resolve(__dirname, 'dist')
},
```

### vendor

将第三方依赖单独打包。即将 node_modules 文件夹中的代码打包为 vendor.js,将我们自己写的业务代码打包为 app.js。这样有助于缓存，因为在项目维护过程中，第三方依赖不经常变化，而业务代码会经常变化。



### 分目录

将打包以后的不同类型文件分开存储。

例如图片文件将放在imgs/目录下，可以在loader下直接进行相关参数设置。

### 分离CSS和JS文件

使用[ExtractTextPlugin](https://webpack.js.org/plugins/extract-text-webpack-plugin/)插件从js中分离css，并对输出的文件名，文件路径进行设置。

需要注意的是在webpack4.2版本中使用ExtractTextPlugin无效，需要按照以下方式进行安装：

```
npm install extract-text-webpack-plugin@next --sace-dev
```

此外，如果使用了此插件，使用单一配置文件，webpack无法实现css修改热更新。

### 压缩CSS

直接使用css-loader进行压缩。

## package.json启动命令设置

添加编译模式以及配置文件设置，后，作出以下设置：

```json
"start": "webpack-dev-server --open --config webpack.dev.js --mode development",
"build": "webpack --config webpack.prod.js --mode production"
```