preface

Normally I always create vUE projects directly with Vue/CLI, little understanding of the internal build process, now let’s start from 0, manually build a simple VUE3 project, just do it! Start ~

steps

  • Create a new folder and initialize NPM

    npm init -y
Copy the code

  • Install webPack and Webpack-CLI locally

    npm install webpack webpack-cli -D
Copy the code

    My version is shown below

  • Create the SRC directory and index. HTML in the root directory, and create main.js and app. vue files in the SRC directory. The directory structure is shown in the figure

  • Install vue3

    npm install vue -save
npm i @vue/compiler-sfc
Copy the code

    If vuE2 is installed, run NPM install vue@next -save to install VUe3

  • Write main.js and app.vue files

    src/App.vue <template> <div> Hello, </button> </div> </template> <script> export default {} </script>Copy the code
    src/main.js

import { createApp } from 'vue' 
import App from './App.vue' 

const app = createApp(App) 
app.mount('#root') 
Copy the code

  • Install HtmlWebpackPlugin

    npm install --save-dev html-webpack-plugin
Copy the code

    This is the content of WebPack Plugins, which introduce all of your Webpack-generated bundle.js configurations using the script tag in the body to generate an HTML5 file. Click here for more configuration

  • Install the vue – loader

    npm install vue-loader --save-dev
Copy the code

    Loader is also an important concept in WebPack. By default, WebPack only handles JS code, so when we want to package other content and let WebPack handle other types of content, we need to use the corresponding Loader. Click here for more content

  • To configure WebPack, create a new webpack.config.js file in the root directory.

    const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { VueLoaderPlugin } = require("vue-loader"); Module. exports = {mode: "development", // webPack use a built-in entry for the corresponding mode: path.resolve(__dirName, "./ SRC /main.js"), output: { path: path.resolve(__dirname, "dist"), filename: "[name].js", }, module: { rules: [ { test: /\.vue$/, loader: "Vue - loader",}, / / applied to ordinary `. The CSS ` file / / and ` vue ` file ` < style > ` block {$/ test: / \. CSS, use: ["vue style-loader", {loader: 'csS-loader ', options: {// enable CSS Modules Modules: true,}}],}, {test: /\.less$/, use: ["vue-style-loader", "css-loader", "less-loader"], }, ], }, plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "./index.html")), // HTML template address: Title: "Build Vue project manually ",}), new VueLoaderPlugin(),],};Copy the code
    • entry: used for WebPack lookup to start build, here the entry issrcThe followingmain.jsFile. Since vue is a single-page application, there is only one entry. butwebpackMultiple entrances can be configured,Click to see more configuration
    • output: Specifies how to output the packaged content.
    • model: You can edit the corresponding packaging rules for different files
    • plugins: Instantiates the corresponding plug-in and sets it accordingly

  • Edit and run the script so you don’t have to type so many words… (Laziness is the only productivity.)

    package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
},
Copy the code

    Run NPM run build and go to /dist/index.html to open

    It’s not done yet, we still need to deal with the CSS and ES6 + syntax (es6+ goes to ES5 for most browsers to recognize), this time we need csS-Loader and Babel-Loader

  • Install csS-Loader and Babel-Loader

    npm install css-loader style-loader babel-loader --save-dev
Copy the code

    Update the webpack.config.js configuration

    const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { VueLoaderPlugin } = require("vue-loader"); module.exports = { mode: "development", entry: path.resolve(__dirname, "./src/main.js"), output: { path: path.resolve(__dirname, "dist"), filename: "[name].js", assetModuleFilename: 'images/[hash][ext][query]' }, module: {rules: [{test: / \. Vue $/, loader, "vue - loader,"}, / / applied to ordinary `. The CSS ` file / / and ` vue ` file ` < style > ` block {test: /\.css$/, use: [" viee-style-loader ", {loader: 'css-loader', options: {// enable CSS Modules Modules: true, } }], }, { test: /\.less$/, use: ["vue-style-loader", "css-loader", "less-loader"], }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.jpg/, type: 'asset/resource' } ], }, plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "./index.html")), // HTML template address: Title: "Build Vue project manually ",}), new VueLoaderPlugin(),],};Copy the code

  • Webpack – dev – server installation

    We are sure that every time we need to change the source code, we need to package it and then find the input file and open it manually. At this point, we need a server to do this for us. The devServer uses gzips to compress everything in the dist/ directory and provides a local serve.

    npm i webpack-dev-server -D

Copy the code

    Update the webpack.config.js configuration

    const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { VueLoaderPlugin } = require("vue-loader"); module.exports = { mode: "development", entry: path.resolve(__dirname, "./src/main.js"), output: { path: path.resolve(__dirname, "dist"), filename: "[name].js", assetModuleFilename: 'images/[hash][ext][query]' }, module: {rules: [{test: / \. Vue $/, loader, "vue - loader,"}, / / applied to ordinary `. The CSS ` file / / and ` vue ` file ` < style > ` block {test: /\.css$/, use: [" viee-style-loader ", {loader: 'css-loader', options: {// enable CSS Modules Modules: true, } }], }, { test: /\.less$/, use: ["vue-style-loader", "css-loader", "less-loader"], }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.jpg/, type: 'asset/resource' } ], }, plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "./index.html")), // HTML template address: Title: "Build Vue project manually ",}), new VueLoaderPlugin(),], devServer: {contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000, }, };Copy the code

    Now let’s test these features and update the app.vue file

    <template> <div> Hello, </button> </div> </template> <script> export default {setup() { const testFunction = () => { console.log('hi') } return { testFunction } } } </script> <style scoped> div{ color: red; } </style>Copy the code

    Update package. Json

    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "server": "webpack serve"
  },
Copy the code

    Run the NPM run Server.

The last

This is just a simple example, there are many more unconfigured, such as asset Module, cache-loader, and so on. There are many details of the article I do not describe too much, because I think the official website is more complete and clearer, you can move to the official website here.