# ht-vue-webpack-plugin

> _# vue-cli-webpack 个人webpack构建基础搭建，用以替代被官方抛弃的vuecli

Latest version **1.1.3** (published 2023-08-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install ht-vue-webpack-plugin
pnpm add ht-vue-webpack-plugin
yarn add ht-vue-webpack-plugin
bun add ht-vue-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-08-30 |
| First published | 2023-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 26 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Author | ht-sauce |
| Maintainers | ht-sauce |

## Links

- npm: https://www.npmjs.com/package/ht-vue-webpack-plugin
- Homepage: https://github.com/ht-sauce/vue-cli-webpack
- npm.io page: https://npm.io/package/ht-vue-webpack-plugin

## Dependencies (26)

- [sass](https://npm.io/package/sass.md) ^1.65.1
- [dotenv](https://npm.io/package/dotenv.md) ^16.3.1
- [express](https://npm.io/package/express.md) ^4.18.2
- [webpack](https://npm.io/package/webpack.md) ^5.88.2
- [ts-loader](https://npm.io/package/ts-loader.md) ^9.4.4
- [css-loader](https://npm.io/package/css-loader.md) ^6.8.1
- [typescript](https://npm.io/package/typescript.md) ^5.1.6
- [vue-loader](https://npm.io/package/vue-loader.md) ^17.2.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.22.10
- [sass-loader](https://npm.io/package/sass-loader.md) ^13.3.2
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^5.1.4
- [babel-loader](https://npm.io/package/babel-loader.md) ^9.1.3
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.3
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.9.0
- [dotenv-webpack](https://npm.io/package/dotenv-webpack.md) ^8.0.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^7.3.3
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.22.10
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.15.1
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^11.0.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.3
- [@vue/babel-plugin-jsx](https://npm.io/package/@vue/babel-plugin-jsx.md) ^1.1.5
- [@vue/babel-preset-jsx](https://npm.io/package/@vue/babel-preset-jsx.md) ^1.4.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.7.6
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.22.5
- [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) ^10.0.0
- [@vue/babel-helper-vue-jsx-merge-props](https://npm.io/package/@vue/babel-helper-vue-jsx-merge-props.md) ^1.4.0

## Recent versions

- 1.1.3 (latest) — 2023-08-30
- 1.1.2 — 2023-08-29
- 1.1.1 — 2023-08-29
- 1.1.0 — 2023-08-29
- 1.0.7 — 2023-08-29
- 1.0.6 — 2023-08-29
- 1.0.5 — 2023-08-28
- 1.0.4 — 2023-08-28
- 1.0.3 — 2023-08-28
- 1.0.2 — 2023-08-28
- 1.0.1 — 2023-08-28
- 1.0.0-rc.2 — 2023-08-21
- 1.0.0-rc.1 — 2023-08-21

## README

_# vue-cli-webpack
个人webpack构建基础搭建，用以替代被官方抛弃的vuecli

不了解的可以访问项目https://github.com/ht-sauce/ht-vue-webpack/tree/main

其中play文件为vue3版本，play-vue2为vue2版本，可以参考

包本身支持情况
- vue2  参考vue2配置改动
- vue2-jsx 默认安装'@babel/preset-env', '@vue/babel-preset-jsx'
- vue3-jsx 默认安装'@babel/preset-env'，'@vue/babel-plugin-jsx'
- sass 会默认安装sass和sass-loader
- less 需要手动安装less和less-loader
- 支持env环境变量配置
## 使用方式和npm
小伙伴也可以查看源代码，自己搭建，这里只是提供一个基础的构建方式，方便大家快速搭建项目
```shell
npm i ht-vue-webpack-plugin -D
```
在项目根目录下创建webpack.config.js
```javascript
const webpackBase = require('ht-vue-webpack-plugin')
// mode是你--mode后面的参数，env是你的环境参数
// 入参可以是一个函数也可以是一个对象
module.exports = webpackBase((mode, env = process.env) => {
  return {
      // 工具包抽离的配置
      extractConfig: {
          // 请看下方默认值
      },
      // 最终通过webpack-merge合并的配置
      webpackMergeConfig: {
          // 参考webpack官方文档
      },
      // 最终webpack配置完成后的回调，会返回最终的webpack配置
      // 可以不定义，定义的话会返回最终的webpack配置
      finalWebpackOptions: (finalConfig) => {
          // 一定要最终进行返回
          return finalConfig
      }
  }
})
```
package.json中添加
```json
{
  "scripts": {
    "dev": "webpack serve --mode development", // 开发环境
    "build": "webpack build --mode production", // 生产环境
    // eslint检测
    "lint": "eslint play --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  }
}
```
webpackBase入参文件参考，以下为默认配置

实际情况请以
[configHandler.js](https://github.com/ht-sauce/ht-vue-webpack/blob/main/plugin/configHandler.js)
为准
```javascript  
/*
 * @param {Object} cliOptions合并配置
 * @param {Object} cliOptions.extractConfig 抽离配置，方便一些简单的配置，比如publicPath的配置，不然webpack的配置太繁琐了
 * @param {Object} cliOptions.webpackMergeConfig 通过webpack-merge合并的配置，会覆盖extractConfig传入的数据
 * */
module.exports = function (cliOptions = { extractConfig: {} }) {
    const baseConfig = {
        /*是否使用vue2
         * 当使用vue2需要手动设置vueJsx和vue-loader15办
         * */
        vue2: false,
        env: './env', // 环境配置地址
        gzip: false, // 是否开启gzip
        port: 8000, // 端口
        publicPath: '/', // 公共路径
        distDir: 'dist', // 输出目录
        publicDir: 'public', // 静态资源目录
        sourceMap: true, // 是否开启 sourceMap
        runtimeCompiler: false, // 是否使用运行时编译器
        // 一些必要的options配置，当无法处理的时候建议通过webpackMergeConfig或者finalWebpackOptions进行最终处理
        options: {
            // 请安装sass,sass-loader
            sass: {
                // additionalData: `
                //     @use "~@/styles/element/index.scss" as *; // 按需加载修改主题色
                //   `,
            },
            // 请安装less,less-loader
            less: {},
            // vue-loader
            vue: {},
            // ts-loader
            ts: {},
            // babel-loader
            babel: {}
        },
    }
    return {
        ...baseConfig,
        ...cliOptions.extractConfig,
    }
}
```
## 区分环境
通过配置文件env指定读取文件所在地址，默认读取根目录下env文件夹下的.env文件

使用 --mode [文件名称] 指定文件下面读取的配置文件后即可使用process.env.[自定义变量]

关于构建和打包，除非使用webpackMergeConfig进行改变webpack内mode变量，否则构建的时候采用区分webpack serve或build方式进行区分构建生产还是运行开发环境

不会再出现vuecli那种会修改到NODE.ENV的情况，同时我这里也没有NODE.ENV
## 核心原理
提供webpack基本配置，通过webpack-merge合并用户配置，最后返回webpack配置
## vue2的使用
安装vue-loader@15.x 版本
```shell
npm i vue-loader@15.x -D
```
配置文件修改
```javascript
const webpackBase = require('ht-vue-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = webpackBase(() => {
    return {
        webpackMergeConfig: {
            plugins: [new VueLoaderPlugin()], // 修改插件
        },
        extractConfig: {
            vue2: true, // 需要开启
            port: 5000,
            gzip: false,
        },
    }
})
```

---
_Source: https://npm.io/package/ht-vue-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._