ht-vue-webpack-plugin正式发布，解决vueCli停止更新，自建webpack构建环境

这次更新主要是带来vue2版本的解决方案

关于往期内容请看

既然vuecli停止开发更新，那就自建webpack支持vue3构建环境，支持sass，ts，jsx，5年前端还不会webpack配置吗

解决的问题，可以给大家带来一些webpack工程上的疑难解决

1、webpack构建结束提示ip地址和输出编译进度

编译进度我没有太深的处理比较简单

javascript 复制代码

    new webpack.ProgressPlugin({
            handler(percentage, message, ...args) {
              console.info((percentage * 100).toFixed(2) + '%', message, ...args)
            },
          }),

构建结束提示ip是非常重要的处理，否则影响开发调试

通过自建一个webpack简陋插件实现

javascript 复制代码

// PrintLog.js，打印日志

const { getIp } = require('../util/os')
// 一个 JavaScript 类
module.exports = class PrintLog {
  apply(compiler) {
    compiler.hooks.done.tap('PrintLog', (stats) => {
      if (stats.hasErrors()) {
        return
      }
      const IPv4 = getIp().IPv4

      const port = stats.compilation.options?.devServer?.port
      // 延迟输出，让提示信息在最后输出
      setTimeout(() => {
        console.log('服务地址')
        console.log(`本地：http://localhost:${port}/`)
        console.log(`IPV4：http://${IPv4}:${port}/`)
      })
    })
  }
}

2、关于css-unicode乱码的问题解决了

配置部分改为

javascript 复制代码

       {
              test: /\.s[ac]ss$/i,
              use: [
                // 需要注意loader加载顺序
                // 'style-loader', // 顺序1，把css插入到head标签中
                MiniCssExtractPlugin.loader, // 顺序1，把css提取到单独的文件中
                'css-loader',
                'postcss-loader', // 顺序最后
                // 将 Sass 编译成 CSS
                {
                  // 配置方式参考：https://juejin.cn/post/7251158799317860407
                  // 解决sass打包el-icon乱码
                  loader: 'sass-loader',
                  options: {
                    implementation: require('sass'),
                    sassOptions: {
                      outputStyle: 'expanded',
                    },
                  },
                },
              ],
            },

3、关于vue2的支持

我本身并没有打算做成命令方式处理，所以不会像vueCli一样有命令行操作，偷个懒（其实是不会，没研究）

手动安装

json 复制代码

 "vue-loader": "^15.10.2"

webpack.config.js文件改动

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,
    },
  }
})

4、ht-vue-webpack，git部分代码增加play-vue2示例

这样大家可以方便快捷的参考项目进行创建

关于示例代码错误部分husky，lint-staged部分也修正了，现在会正常执行

5、解决vue2加载组件时候el-table表格渲染空白问题

这个问题也是神坑，vue3是不需要这样处理的。我参考了vuecli，一起处理了算了

对配置参数增加是否编译器的处理，同样参考vueCli

java 复制代码

        resolve: {
          extensions: ['.js', '.ts', '.tsx', '.jsx', '.vue'],
          alias: {
            '@': resolvePath('./src'),
            // runtimeCompiler, 是否使用包含运行时编译器的 Vue 构建版本
            // 同时解决el-table渲染不出来的问题
            vue$: vueEsm(extractConfig.vue2, extractConfig.runtimeCompiler),
          },
        },

function vueEsm(isVue2 = false, runtimeCompiler = false) {
  if (isVue2) {
    return runtimeCompiler ? 'vue/dist/vue.esm.js' : 'vue/dist/vue.runtime.esm.js'
  } else {
    return runtimeCompiler ? 'vue/dist/vue.esm-bundler.js' : 'vue/dist/vue.runtime.esm-bundler.js'
  }
}
module.exports = {
  vueEsm,
}