從零開始學VUE之Webpack(內建VueJS)

webpack中配置Vue

項目中,我們會使用VueJS開發,而且會以特殊的檔案來組織vue的元件

是以,下面學習一下如何在webpack中內建vue

NPM安裝Vue

simpleloader拷貝一份為simplevue

npm install vue --save

複制

因為在運作時也需要依賴vue,是以不需要-dev

cd 到我們新的項目中 simplevue

執行指令

D:\[email protected]\vue\day1\html\4.從0開始學VUE\simplevue>npm install vue --save
npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package from 1 contributor and audited 492 packages in 5.108s

13 packages are looking for funding
  run `npm fund` for details

found 10 vulnerabilities (2 low, 8 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

D:\[email protected]\vue\day1\html\4.從0開始學VUE\simplevue>

複制

安裝成功,檢視package.json

直接依賴到了不帶dev字首的,就可以在開發時和運作時都使用,版本為2.6.13

修改main.js為

import Vue from 'vue'

const app = new Vue({
    el:'#app',
    data:{
        message: 'hello webpack!'
    }
})

複制

修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
<script src="dist/bundle.js"></script>
</body>
</html>

複制

打包後運作

發現報錯了

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

複制

大概解釋一下就是現在使用的是runtime-only,代碼中不能存在模闆代碼,如果想運作代碼中有模闆代碼的環境,請使用runtime-compiler

runtime-only: 不能有模闆代碼

runtime-compiler:可以有模闆代碼

如果想要運作runtime-compiler版本需要在webpack.config.js中添加配置

// 需要從node依賴中引入 需要添加依賴環境
const path = require('path');

module.exports = {
    // 配置源碼打包位置
    entry: './src/main.js',
    // 配置目标位置
    output: {
        // path 隻能寫絕對路徑 不能寫相對路徑 但是不要直接寫死,需要動态擷取檔案位置
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    // 使用runtime-compiler 
    resolve:{
        alias:{
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

複制

模闆檔案使用vue.esm.js編譯運作

預設采用的應該是runtime的檔案

我們需要指定為vue.esm.js

再次打包運作

運作成功

作者：彼岸舞

時間：2021\06\07

内容關于：VUE

本文屬于作者原創,未經允許,禁止轉發