webpack5 搭建vue3 項目 （二）
-
安裝vue以及vue-loader
yarn add vue@next
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和插件yarn add babel-loader @babel/core @babel/preset-env @babel/polyfill @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import -D
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
yarn add webpack-dev-server html-webpack-plugin -D
修改一下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, 這時候我們安裝一下他。
yarn add @vue/compiler-sfc -D
之所以要安裝它，是因為我們的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地址： https://github.com/ComponentTY/webpack5-vue3
webpack5搭建vue3給個星吧，大佬們，github上面的是已經搭建好的，並正應用於自己公司內部項目中。