webpack5搭建vue3(二)

webpack5 搭建vue3 项目（二）

安装vue以及vue-loader

yarn add vue-loader@next thread-loader -D

配置webpack.config.js

  const VueLoaderPlugin = require('vue-loader/dist/plugin').default // 需要加default， 详情可查看源码
  module.exports = {
    entry: {
      main: 'main.js'
    },
    output: {
       path: 'dist',
       filename: '[name].js',
  	 publicPath： '/'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            'thread-loader', // 因为bable-loader比较耗时， 我们使用thread-loader来开启多线程，加快速度
            'babel-loader'
          ]
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    }
  }

配置babel相关安装babel相关loader和插件

babel.config.js

  module.exports = {
    presets: [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "entry",
          module: false,
          corejs: 3
        }
      ]
    ],
    plugins: [
      ["@babel/plugin-syntax-dynamic-import"]
    ]
  }

我们添加一下webpack-dev-server吧，以便于我们运行，还需要安装一下html-webpack-plugin

修改一下webpack.config.js

  const webpack = require("webpack")
  const path = require('path')
  const VueLoaderPlugin = require('vue-loader/dist/plugin').default // 需要加default， 详情可查看源码
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const resolve = (filePath) => {
  	return path.resolve(__dirname, filePath)
  }
  module.exports = {
    entry: {
      main: resolve('src/main.js')
    },
    output: {
       path: resolve('dist'),
       filename: '[name].js',
  	 publicPath： '/'
    },
    devServer: {
      host: '0.0.0.0',
      port: 8088,
      hot: true, // 配合 Hmr使用
      historyApiFallback: true, // 设置这个原因是，当我们的vue路由设置为history模式时，如果我们当前页面位于localhost:8088/abc,这时候去刷新页面就会报错404.设置这个就是为了解决这个问题。
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            'thread-loader', // 因为bable-loader比较耗时， 我们使用thread-loader来开启多线程，加快速度
            'babel-loader'
          ]
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    },
    plugins: [
       new VueLoaderPlugin(),
       new HtmlWebpackPlugin({
  	 	template: resolve('index.html'),
  		filename: 'index.html',
  		title: 'webpack5搭建vue3',
  		// icon: '', // 选择一个自己喜欢的icon添加在这吧。
  		inject: true
  	 }),
       new webpack.HotModuleReplacementPlugin()
    ]
  }

我们还需要加一个index.html的页面, 在根目录下吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

然后我们更改一下根目录下的package.json文件的scripts脚本

 {
    "scripts": {
        "dev": "webpack-dev-server --config webpack.config.js --inline --progress"
     }
  }

这样我们就能在命令行中使用 yarn dev 来运行我们的项目了接下来我们在src目录下新建一个App.vue文件

  <template>
  	我是Vue项目啊 {{username}}
  </template>
  <script>
  	import {ref} from 'vue'
  	export default {
  		setup () {
  			let username = ref('helloworld')
  			return {
  				username
  			}
  		}
  	}
  </script>

现在我们打开src目录下的main.js文件

  import {createApp} from 'vue'
  import App from './App.vue'
  const app = createApp()
  app.mount('#app')

这时候我们到根目录下按住shift 加鼠标右键，选择在此处打开命令窗口，输入 yarn dev,敲回车,等待项目启动，这时候不出意外应该会报错。报错信息应该是这样子的。

sealing module hashing(node:8616) UnhandledPromiseRejectionWarning: TypeErro
r [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an insta
nce of Buffer, TypedArray, or DataView. Received undefined
  at Hash.update (internal/crypto/hash.js:82:11)
  at BulkUpdateDecorator.update (E:\studywebfront\Webpack\webpack5_vue3\node_m
odules\webpack\lib\util\createHash.js:51:14)
  at NormalModule.updateHash (E:\studywebfront\Webpack\webpack5_vue3\node_modu
les\webpack\lib\NormalModule.js:1191:8)
  at Compilation._createModuleHash (E:\studywebfront\Webpack\webpack5_vue3\nod
e_modules\webpack\lib\Compilation.js:3097:10)
  at Compilation.createModuleHashes (E:\studywebfront\Webpack\webpack5_vue3\no
de_modules\webpack\lib\Compilation.js:3069:10)
  at E:\studywebfront\Webpack\webpack5_vue3\node_modules\webpack\lib\Compilati
on.js:2346:11
....

这是因为缺少@vue/compiler-sfc, 这时候我们安装一下他。

之所以要安装它，是因为我们的vue-loader现在依赖于他，我们可以发现之前的vue-template-compiler 这个模板编译器不用了，也就是被@vue/compiler-sfc 替代了。安装完毕我们再次运行 yarn dev ，等待项目启动，我们在浏览器输入localhost:8088, 就可以看到我们的页面了。

后面肯定还会遇到问题(比如webpack5的热更新，设置了不生效，我们需要在webpack配置中把target的值改为'web')，如果大家遇到问题，请抛出来我们一起解决。多谢各位乐于分享的兄弟们。

这里分享一下我遇到的问题

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- E:\studywebfront\Webpack\webpack5_vue3\node_modules\webpack-dev-server\bin\web
pack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (E:\studywebfront\Webpack\webpack5_vue3\node_modules\w
ebpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js
:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'E:\\studywebfront\\Webpack\\webpack5_vue3\\node_modules\\webpack-dev-server
\\bin\\webpack-dev-server.js'
  ]

遇到这个问题，将webpack-cli 换成低版本即可 webpack-cli@3.3.12

github地址： github.com/ComponentTY… webpack5搭建vue3给个星吧，大佬们，github上面的是已经搭建好的，并正应用于自己公司内部项目中。