Vue3 has been released for so long, I believe everyone has tasted fresh, do not know when the practice is using Vue official scaffolding @vue/ CLI or a new generation of building tools Vite; False entry official did not provide it? What are we supposed to do? Let’s go straight to webpack and build a simple Vue application that supports single file components.

built

NPM init -y generates package.json file.

Webpack -dev-server webpack-cli

npm webpack webpack-cli webpack-dev-server -D
Copy the code

Of course, we also need some other plug-ins, such as the html-webpack-plugin that generates the HTML file and the clean-webpack-plugin that cleans up the last build

npm install html-webpack-plugin clean-webpack-plugin -D
Copy the code

Finally, we will install some style specific loaders. Here we will use SCSS

npm install css-loader style-loader sass sass-loader -D
Copy the code

We have installed the webpack.config.js file in the root directory

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  NPM install cross-env -d // install cross-env -d // install cross-env -d
  mode: process.env.NODE_ENV,
  / / the entrance
  entry: "./main.js".output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  / / configuration loader
  module: {
    rules: [{test: /\.css/i,
        use: ["style-loader"."css-loader"] {},test: /\.s[ac]ss$/i,
        use: ["style-loader"."css-loader"."sass-loader"]]}},// Configure the plug-in
  plugins: [
    // Remember to create a new template index.html in the project root directory
    new HtmlWebpackPlugin({
      title: "vue-cli".template: path.resolve(__dirname, "./public/index.html")}),new CleanWebpackPlugin()
  ]
};
Copy the code

Start configuring startup and package commands in package.json now

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack server",
    "build": "cross-env NODE_ENV=production webpack"
  },
Copy the code

I want to highlight the pitfalls of commands; For those of you who have played webpack before, you can already see why the startup command is webpack server instead of webpack-dev-server. Since I’m using Webpack 5 and I’m still writing it this way, if you’re downloading Webpack 3 you should be able to use webpack-dev-server;

Cannot find module ‘webpack-cli/bin/config-yargs’ Cannot find module ‘webpack-cli/bin/config-yargs’

Downsized solution point here 👉 I am the link

New version solution click here 👉 I’m the link

Finally, we will print two random sentences in the entry file main.js to see if this works;

Devtool: “inline-source-map” can be added to webpack.config.js for details, please refer to the link

Vue build

After completing the above steps our application should be running, but this is not the goal, the desire is to support Vue files eventually; To do this we need some loaders and plugins;

Vue-loader (vUE -template-compiler); Vue-loader (VUE -template-compiler); vUE – Loader (VUE -template-compiler); Let’s see if it works;

npm install @vue/next
Copy the code
npm install vue-loader vue-template-compiler -D
Copy the code

Then modify webpack.config.js

const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  module: {
    rules: [{test: /\.vue$/, use: "vue-loader"}},plugins: [
    new VueLoaderPlugin()
  ]
}
Copy the code

Then we create a.vue entry file App in the project root directory and write a little code to import it into main.js

<! -- App.vue -->
<template>
  <! Vue3 can actually do without the root tag.
  <div>
    {{ msg }}
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const msg = ref("hello world");
    return{ msg }; }};</script>
Copy the code
// mian.js
import { createApp } from 'vue';
import App from './App';

createApp(App).mount('#app');
Copy the code

When you finally start the project, you may encounter the following error;

The point is no parseComponent found? The reason is that vuE-template-Compiler removes this method, so Vue3 is not feasible with this plug-in. Of course vue-template-compiler is only part of the problem; So let’s try to solve this problem;

I believe most of you missed a point when you read the Vue3 document. Here, the vue-Loader is version 16, so please update it first

NPM install [email protected] - DCopy the code

If you start the project again, you’ll still get an error, but this time the error is obvious; Vue-loader relies on @vue/ Compiler-SFC

The answer is still on the official website, 🙄 this document is very detailed, you are on the first floor and it is on the NTH floor

OK! Finally, we uninstalled vue-template-compiler and downloaded @vue/ compiler-sFC

npm install @vue/compiler-sfc -D
Copy the code

Start the project for the last time

Perfect success, but there is a caveat, basically we are using a build of Vue, let’s change it and not tree-shaking it here

To solve this problem, add a configuration in webpack.config.js

resolve: {
  // Configure an alias reference, no longer using the Builder version of vue
  alias: {
    vue: "vue/dist/vue.esm-browser.js"}},Copy the code

The sample code is here at 👉

😉 ~ thank you for watching!