# webpack-config

**Repository Path**: zu1662/webpack-config

## Basic Information

- **Project Name**: webpack-config
- **Description**: 简单可用的webpack配置
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-01-11
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack-config

## 介绍
简单可用的webpack配置

## 开发阶段 配置
 
### 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能
1. `npm i webpack-dev-server -D` 安装工具到本地开发环境内
2. 由于在项目中安装，无法使用脚本命令直接使用,且需要在本地也要安装`webpack npm i webpack -D`
3. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有放在物理磁盘中；而是，直接托管到了电脑的内存中。所以我们找不到这个 bundle.js
4. 配置：`webpack-dev-server --open --port 3000 --contentBase src --hot`
    表示：`--open`（自动打开浏览器） `--port`（设置端口） `--contentBase`（设置打开路径） `--hot`（热重载，不刷新）

### 使用 html-webpack-plugin 在内存中生成html页面
1. 自动在内存中生成html页面；
2. 自动把内存中打包好的 bundle.js 添加到内存中html页面中引用


### 使用 style-loader css-loader 来进行css文件的处理
1. 安装： `npm i style-loader css-loader -D`
2. 在 webpack.config.js 中新增配置节点， 叫做 module。在它上面有个 rules 属性，存放所有第三方文件的匹配和处理规则
3. loader 中 rules 的调用规则为：数组内 从后向前调用

### .less 文件的处理，依赖 less-loader 模块，其中 less-loader 依赖 less
1. 安装： `npm i less less-loader -D`


### .scss 文件的处理，依赖 node-sass sass-loader 模块
1. 安装： `npm i node-sass sass-loader -D`


### 使用 url-loader 进行 css 文件 中的url地址进行处理. 其中，它 依赖于 file-loader 模块
1. 安装： `npm i url-loader file-loader -D`


### 使用 babel 来处理 ES6、ES7 的新语法. 使用以下两套包进行转化：
1. 安装：`npm i babel-core babel-loader babel-plugin-transform-runtime -D`
2. 安装：`npm i babel-preset-env babel-preset-stage-0 -D`
3. 在 webpack.config.js 中，添加新的匹配规则
4. 在项目的根目录中， 新建一个叫做 .babelrc 的babel配置文件，这个配置文件是json格式,如下：
  ```json
  {
      "presets":["env", "stage-0"],
      "plugins":["transform-runtime"]
  }
  ````

### 使用 vue-loader 进行 .Vue 文件的转换
1. 安装： `npm i vue-loader vue-template-compiler -D`
2. webpack.config.js 配置规则

### 使用 babel-plugin-transform-remove-strict-mode 来去除webpack打包时的 严格模式
1. 安装：`npm i babel-plugin-transform-remove-strict-mode -D`
2. 配置 .babelrc 
```json
    {
        "plugins": ["transform-remove-strict-mode"]
    }
```

---

## 发布阶段 配置

### 使用 clean-webpack-plugin 这个工具，来实现每次发布前，都把[dist]目录下文件删除
1. `npm i clean-webpack-plugin -D` 安装工具到本地开发环境内


### 使用 extract-text-webpack-plugin 插件， 来实现 抽离css文件
1. `npm i extract-text-webpack-plugin -D` 安装


### 使用 optimize-css-assets-webpack-plugin@3.2.0 插件， 来实现 压缩css文件(webpackV3，需使用3.2.0版本)
1. `npm i optimize-css-assets-webpack-plugin@3.2.0 -D` 安装