# webpack-demos

**Repository Path**: qiuxchao/webpack-demos

## Basic Information

- **Project Name**: webpack-demos
- **Description**: 关于 webpack 的一些 demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-20
- **Last Updated**: 2022-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### webpack 部分配置

**Es6 转 Es5**：

- 依赖模块：_babel-loader_、_@babel/core_、_@babel/preset-env_
- 项目根目录创建 _.babelrc_ 文件，写入：

```javascript
{
    "presets": ["@babel/preset-env"]
}
```

- loader 配置：`{ test: /\.js$/, use: ['babel-loader'] }`
- loader 如果配置成下面这样，则不需要创建 .babelrc 文件

```javascript
{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['es5']
        }
    }
}

```

**TypeScript**:

- 依赖模块：_typescript_、_ts-loader_
- 初始化 _tsconfig.js 文件_：`tsp —init`
- loader 配置：`{ test: /\.ts$/, use: ['ts-loader'] }`

**Html**：

- 依赖模块：_html-webpack-plugin_
- plugins 配置：`[ new HtmlWebpackPlugin({ inject: 'body' }) ]`

**Less**:

- 依赖模块：_style-loader_、_css-loader_、_less-loader_、_less_
- loader 配置：`{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }`

**Sass**:

- 依赖模块：_style-loader_、_css-loader_、_sass-loader_、_node-sass_
- loader 配置：`{ test: /\.less$/, use: ['style-loader', 'css-loader', 'sass-loader'] }`