直接上代碼
根據webpack官網教程安裝了相關的組件
npm install -D babel-loader @babel/core @babel/preset-env webpack
執行完成后,以下黃色標注代碼被安裝完成
package.json
{ "name": "meetwebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.12.10", "@babel/plugin-transform-runtime": "^7.12.10", "@babel/preset-env": "^7.12.11", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "css-loader": "^5.0.1", "file-loader": "^6.2.0", "less": "^4.0.0", "less-loader": "^7.2.0", "style-loader": "^2.0.0", "url-loader": "^4.1.1", "webpack": "^5.11.0", "webpack-cli": "^4.2.0" }, "dependencies": { "babel-core": "^7.0.0-bridge.0", "regenerator-runtime": "^0.13.7", "vue": "^2.6.12" } }
如果你這里之前使用的是babel-core 6.x突然升級版本到@babel/core 7.x可能會由於依舊使用低版本報錯，例如我遇到的報錯代碼為：Requires Babel “^7.0.0-0”, but was loaded with “6.26.3”，你可能會用到以下代碼：
npm i babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime
運行之后會出現上圖標綠的代碼。
然后根據官網文檔在配置文件中進行了如下配置
webpack.config.js
rules: [
// the 'transform-runtime' plugin tells Babel to
// require the runtime instead of inlining it.
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
}
]
main.js
//使用vue開發
import Vue from 'vue'
const app = new Vue({
el:'#app',
data:{
message:'你好'
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
</body>
<script src="../webpack配置vue/dist/main.js"></script>
</html>
此時我打包運行頁面之后發現頁面為空白，並且控制台未報錯，之前設置的其他內容依舊可以輸出，但是vue模板內的內容未輸出到頁面，並且在控制台沒有看到此div的結構。
搜索了一些解決方案后我發現可能是runtime-only無法編譯模板，這里我們需要使用runtime-compiler，使用runtime-only使用的是vue.runtime.js文件，無法編譯模板，所以需要修改成使用runtime-compiler
隨即我嘗試了以下方法
方法1：
在webpack中添加別名配置，從而讓它運行指定的文件
resolve:{
//alias:別名
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
這里要注意一下‘Vue$’不是隨便寫的，它是指你自定義的Vue名字，也就是導入時用的名字，因為Vue導出使用export default所以這里可以自定義名字。‘自定義名字$’是這個意思。特別注意：$是在后面的，我之前跟着一些教程寫在了前面結果不報錯也不顯示
方法2：
直接修改main.js內的引入
import Vue from 'vue/dist/vue.esm.js'
修改之后成功顯示模板內的內容