“This is the 21st day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Here’s the prep work:

  1. Delete the build, dist, and node_modules folders in webpack_babel.

  2. Copy the webpack_babel directory and rename it webpack_vue.

  3. Open VS Code terminal, switch to webpack_vue, and run NPM install to install the dependencies required by the current project (webPack_vue). After installation, the project directory is as follows:

Webpack can package js, CSS, font, img and other resources. The Vue code we wrote is actually JavaScript code. So we can take a look at Webpack’s packaging of the Vue code we wrote.

We open the./ SRC /main.js file and change it to the following:

import { sum } from './js/math.js';
import { createApp } from 'vue'; // Introduce the createApp function in Vue as a module
const { formatPrice } = require('./js/format.js');

import './js/element';

console.log(sum(10.20));
console.log(formatPrice(100));
Copy the code

This time we use Vue in a different way than before. Before we used Vue, either through CDN introduction:

<script src="https://unpkg.com/vue@next"></script>
Copy the code

Or you can import it by downloading the local Vue source file:

<script src=".. /js/vue.js"></script>
Copy the code

Here’s how we introduced Vue this time:

import { createApp } from 'vue';
Copy the code

This way of introducing Vue in js code means treating Vue as a module and importing createApp from that module for later use. To use vue as a module, we have to have the module in the current project (the current project depends on vue), which means we have the module in the current project’s node_modules directory, so to use vue this way, we need to install the vue module first:

npm install vue@next
Copy the code

Note:

  1. The current (2021-11-21)VueThe authorities have not yetVueBy default, the version of3.xSo we installVue3.xAlso need tovueBring back@next. Otherwise, directlynpm install vueInstalled orVue2.x.
  2. The command here does not need to be added and should not be added-D(although plus will not report error, but recommended in accordance with the specification), becauseVueIn addition to the development phase, during the production phase (after we deploy the packaged package to a static server, it will be downloaded when the user accesses it, and the downloaded code should also be includedVueCore code) is also needed.

Once installed, we have no problem importing the createApp function from the vue module. Now we can create the Vue application using the createApp function as before:

import { sum } from './js/math.js';
import { createApp } from 'vue';
const { formatPrice } = require('./js/format.js');

import './js/element';

console.log(sum(10.20));
console.log(formatPrice(100));

// Write Vue related code
const app = createApp({
  template: '
 I'm Vue rendered 
'.data() {
    return {
      title: 'hello'}}}); app.mount('#app');
Copy the code

In the code above, we attach the created Vue application to the HTML element named app, which is already in the index.html template file in the public folder of the current project:

So now if we package the project and run it in the browser, the Vue code we just wrote should render the corresponding content (the template option), because the Vue code is JavaScript code at heart, Webpack packs JavaScript code by default, so Webpack should be able to pack the Vue code we just wrote. Let’s run the NPM run build command to see what happens (the packaging process may be a bit slower because the Vue source code is a bit too much) :

Open the./build/index.html file in your browser using the Live Server plugin./build/index.html

You will notice that the template option is not displayed on the page, so why not? The package process is ok, but when we run the packaged code in the browser, the corresponding content is not displayed, so we open the browser console to see if it gives us relevant information:

You’ll notice that the console prints two warnings, the first one we can ignore for now, and the next one (which might be better called an error). Component provided template option but Runtime compilation is not supported in this build of Vue. The template option is provided by the component, but runtime compilation is not supported in the current Vue build.

By “component,” we mean the first parameter object we pass to createApp, which is the root component. We do have the template option in the root component, which will be parsed by the Vue source code. However, there are many versions of the Vue source code, which can be divided into two main categories:

  • Runtime + Compiler: the “runtime + compiler” version, if the template needs to be compiled on the client (for example, passing a string totemplateOption, or use the elementDOM 内 HTMLMount as a template to an element), which is where the compiler is needed, and hence the full build, which isRuntime + CompilerVersion;
  • Runtime-only: the run-time version, if you don’t need to compile templates on the client.

That is, if you don’t use the template option in your code (without the template option, you might ask, how will you render the corresponding content? There are other ways to render content, such as using the render function or writing.vue files, which can be parsed in a different way, more on that later), without using the compiler and using the run-time version.

However, if we write the Template option, we must use the Runtime + Compiler version, because this version contains Compiler functionality, and the main function of Compiler is to compile the template.

By default, the Vue module uses a runtime-only build (vue.Runtime.esm-bundler.js), which means that it does not include compilation of the template code. This means that we are using the default run-time version, so the template we used in the component we wrote ended up not compiling, so it has no effect on the browser page.

That’s why we get the warning message from Vue in the console, which, of course, suggests that we alias Vue, which we’ll talk about later. Now, we need to be clear that the version of Vue we are currently referencing is the default “run-time only” version and does not meet our needs, we need to introduce a “run-time + compiler” version of Vue.