# webpack-init

**Repository Path**: Monkey_man/webpack-init

## Basic Information

- **Project Name**: webpack-init
- **Description**: 基于webpack5.x、babel开发的脚手架。适用于React(TS|JS)、Vue(JS)，也可混合开发!
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 0
- **Created**: 2021-04-08
- **Last Updated**: 2022-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webpack, JavaScript

## README

# webpack-init 配置了一个小小的脚手架

基于 webpack5 重新写的一套脚手架,简简单单几步配置即可快速开发

> - 快速配置，即可运行 React|Vue
> - 基于最新的官方文档开发
> - 基于浏览器缓存优化代码打包分割，打包后达到请求资源最少
> - 内置 scss、less....配置

Vue 开箱即用脚手架：[点这<-克隆下来直接开发](https://gitee.com/Monkey_man/vue-template)

React 开箱即用脚手架：[点这<-克隆下来直接开发](https://gitee.com/Monkey_man/react-template)

## 配置：

### 1. `./global.config.js`:全局配置

```javascript
module.exports = {
  // 模式选择vue||react
  // 不能在vue模式下用react相关东西、会报错。反过来也如此
  mode: "vue",

  // 入口文件;相对于根目录
  enter: {
    index: { import: "./src/entry/index.js", templateName: "index.html" },
    // home: { import: "./src/entry/home.js", templateName: 'index.html' }
  },

  /** 第三方依赖(免打包)
   * 文件放在static文件夹下，支持字符串与对象
   * 1.字符串在多入口情况下打包每个入口文件内
   * 2.对象打包到入口为key的文件夹下
   */
  static: [
    // "./static/iconfont/iconfont.css",
    // { index: ["./static/jquery.js", "./static/lodash.js", "./static/lodash.css"] }
  ],

  // 代理(兼容webpack相关所有设置)
  proxy: {
    "/dev": {
      // 默认映射http://localhost:8088/dev
      target: "http://localhost:8088",
      pathRewrite: {
        "^/dev": "",
      },
      // HTTPS
      // secure: false,
    },
  },
};
```

### 2. `./build/webpack.style.js`:引入 scss、less

> 配置前请自行安装 scss|less
>
> scss
>
> ```
> npm i node-sass sass-loader --save-dev
> ```
>
> less
>
> ```
> npm i less less-loader --save-dev
> ```

```javascript
...
const styleRegex = {
  css: /\.css$/i,
  moduleCss: /\.module\.css$/i,
  scss: /\.scss$/i,
  moduleScss: /\.module\.scss$/i,
  sass: /\.sass$/i,
  moduleSass: /\.module\.sass$/i,
  less: /\.less$/i,
  moduleLess: /\.module\.less$/i,
};

....

function getStyle() {
  // 样式组件加载
  return [
    // 默认css
    {
      test: styleRegex.css,
      use: styleLoader(),
    },
    // scss
    {
      test: styleRegex.scss,
      use: styleLoader("scss","sass-loader"),
    }
    // less
    {
      test: styleRegex.less,
      use: styleLoader("scss","less-loader"),
    }
  ];
}
```

# 好了，可以开发了！