Of Stack

Implementation of building an vue3.0 project with webpack from scratch

  • 2021-08-28 07:15:44
  • OfStack

Preface

Entry-level tutorial for junior engineers
Mobile single page Demo

Text

Step 1

Find a disk that you think is suitable. Input mkdir test , cd test , npm init -y .

Step 2

Install dependencies

webpack Series Dependence

webpack webpack-cli

babel Series Dependence

@babel/core @babel/preset-env

Mobile compatibility scheme

amfe-flexible autoprefixer

axios

axios

webpack loader

babel-loader

css-loader

file-loader

postcss-loader

pm2rem-loader

style-loader

In this case, vue3.0 sfc rewrote the compilation method of. vue file. Using parseComponent and other methods, we must use this loader with the suffix of-v16. At that time, it took a long time to find this loader

vue-loader-v16
vue-template-complier

webpack plugin

html-webpack-plugin
webpack-dev-server

Vue & Vuex

vue@next

vuex@next

Install the dependency package above using yarn add or npm i

Step 3

Create index. html in the current root directory and initialize the HTML code 


<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>h5 static</title>
 </head>
 <body>
  <div id="app"></div>
 </body>
</html>

Creating. babelrc, initializing babel configuration 


{
 "presets": ["@babel/preset-env"]
}

Create postcss. config. js Initialize postcss configuration 


module.exports = {
 plugins: [require('autoprefixer')],
}

Create. gitignore 


node_modules
.vscode
.idea

Create scripts directory and write yarn locking script 


if (!/yarn\.js$/.test(process.env.npm_execpath || '')) {
 console.warn(
  '\u001b[33mThis repository requires Yarn 1.x for scripts to work properly.\u001b[39m\n'
 )
 process.exit(1)
}

Configure the script in the package. json configuration 


{
 "name": "h5-static",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "start": "webpack-dev-server",
  "build": "webpack --mode=production",
  "preinstall": "node ./scripts/checkYarn.js"
 },
 "author": "upeartaker",
 "license": "ISC",
 "dependencies": {
  "@babel/core": "^7.11.6",
  "@babel/preset-env": "^7.11.5",
  "@vue/compiler-sfc": "^3.0.0",
  "amfe-flexible": "^2.2.1",
  "autoprefixer": "8.0.0",
  "axios": "^0.20.0",
  "babel-loader": "^8.1.0",
  "css-loader": "^4.3.0",
  "file-loader": "^6.1.0",
  "html-webpack-plugin": "^4.5.0",
  "postcss-loader": "^4.0.2",
  "px2rem-loader": "^0.1.9",
  "style-loader": "^1.2.1",
  "vue": "^3.0.0",
  "vue-loader": "^15.9.3",
  "vue-loader-v16": "^16.0.0-beta.5.4",
  "vue-template-compiler": "^2.6.12",
  "vuex": "^4.0.0-beta.4",
  "webpack": "^4.44.2",
  "webpack-cli": "^3.3.12",
  "webpack-dev-server": "^3.11.0"
 },
 "browserslist": [
  "defaults",
  "not ie < 11",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
 ]
}

Where preinstall is an yarn locking script

src directory is created, services, pages, components and store directories are respectively created in src directory, and ajax, view, component and global state management are correspondingly stored. Create webpack. config. js file and write webpack configuration 

const path = require('path')
const VueLoaderPlugin = require('vue-loader-v16/dist/plugin.js').default
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 entry: path.resolve(__dirname, './src/main.js'),
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
 },
 resolve: {
  extensions: ['.js'],
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    use: ['babel-loader'],
    exclude: /node_modules/,
   },
   {
    test: /\.css$/,
    use: [
     'style-loader',
     'css-loader',
     {
      loader: 'px2rem-loader',
      options: {
       remUnit: 37.5,
      },
     },
     {
      loader: 'postcss-loader',
      options: {
       sourceMap: true,
       postcssOptions: {
        path: 'postcss.config.js',
       },
      },
     },
    ],
   },
   {
    test: /\.(png|svg|jpg|gif)$/,
    use: ['file-loader'],
   },
   {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader'],
   },
   {
    test: /\.vue$/,
    loader : 'vue-loader-v16'
   }
  ],
 },
 optimization: {
  minimize: true,
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: path.resolve(__dirname, './index.html'),
   inject: 'body',
  }),
  new VueLoaderPlugin()
 ],
}

Step 4

Write Demo to test whether the project can be used.

Enter the src directory, create main. js file, write the following code, 


import 'amfe-flexible'
import './index.css'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

Create App. vue file, write 1 code 


<template>
 <Fragment>
  {{ message }}
  <button @click="handleClick"> Order me </button>
 </Fragment>
</template>
<script>
import { Fragment, ref } from 'vue'
export default {
 name: 'root',
 components: [Fragment],
 setup() {
  const message = ref('hello')
  const handleClick = () => {
   message.value = 'hit'
  }

  return {
   message,
   handleClick,
  }
 },
}
</script>

Step 5

Execute script yarn start

Summarize

webpack configuration is easy to learn, declarative interface specification, developers only need to focus on function points to complete the configuration. There is no difficulty in webpack configuration of this project. Students who have done Vue-cli2.0 project can skip it directly. When building a project by yourself, it is suggested that you first sort out the project structure, list the function points that need to be expanded, and improve the project in a node-up way. If you look at this project from an engineering perspective, it can only belong to leaf level.
Related articles: