2. Vue3 introduction [Webpack to build vue3 scaffolding]

This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

The scaffold Git address continues to be updated at….

An overview of

In the previous chapter we completed the basic configuration (link). Next we introduce vue3 into our scaffolding and refine some common Loader configurations.

To introduce VUE3, you need to know

I have previously configured vue2 in webpack. Configuring VUe2 requires:

1. vue2
2. Vue-loader is usually smaller than 16 versions
3. Vue-template-compiler Vue 2.0 templates are precompiled into rendering functions

Configuring VUe3 in Webpack is slightly different

• vue3
• Vue-loader must be later than 16
• @ vue/compiler – SFC instead of vue – the template – the compiler

Vue3 introduced

Configure the vue – loader

module: {
    rules: [
      {
        test: /\.vue/,
        exclude: /node_modules/,
        use: 'vue-loader'
      }
    ]
}
Copy the code

Configuration VueLoaderPlugin

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    plugins: [
        new VueLoaderPlugin()
    ]
}
Copy the code

Generally, only one loader is required to configure, but vue must configure this plug-in. Its main purpose is to deal with rules, and for details, you can find relevant information or view the source code.

The test code

1. The code for app.vue is as follows:

<template>
  <h1>{{a}}</h1>
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
  setup() {
    const a = ref('111')
    return {
      a
    }
  },
}
</script>
Copy the code

2. Index. Js as follows

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

const app =createApp(App)
app.mount('#app')

Copy the code

3. Effect of the page

Style, image configuration

For a front-end project, configuring a CSS precompiled language and image processing is more than necessary.

Style configuration

In this project, we choose SCSS, a pre-compiled language, and the main configuration points are as follows:

1. Browserslist shares the configuration of the target browser and Node.js version between different front-end tools.)
2. Postcss Automatic prefix is configured
3. Use mini-CSS-extract-Plugin to separate CSS in production environment

browserslist

When using autoprefixer, browserslist must be configured to specify the target browser. There are three ways to configure Browserslist

• Create a.browserslistrc file in the root directory

last 15 versions
Copy the code

• Under the package. The json configuration

"browserslist": [
    "defaults",
    "not IE 11",
    "maintained node versions"
  ]

Copy the code

• Postcss-loader specifies when autoprefixer is initialized.

{
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          require('autoprefixer')
        ]
      }
    }
}

Copy the code

Under the dev configuration

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', 
          'css-loader', 
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
  
Copy the code

Separate the CSS in proD

In the production environment, you are advised to separate the CSS. If it is not separated, it is CSS-in-JS, which will end up with too large JS files.

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', 
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
 }
plugins: [
    new MiniCssExtractPlugin()
]
Copy the code

Use urL-loader to process images

Webpackage 5 introduces a new module type (link) for resources, making configuration easier

{
    test: /\.(png|jpg|gif)$/i,
    type: 'asset/resource'
}
Copy the code

We can also use the previous loader configuration in webpack5. We chose url-loader because it has a richer configuration. It is common to automatically convert images to Base64 when they are less than a certain value. The configuration is as follows:

{test: / \. (PNG | JPG | GIF) $/ I, type: 'javascript/auto, use: [{loader:' url - loader, the options: {/ / here is the unit of byte bytes limit: 200 * 1024, // Output to the corresponding directory outputPath: "img/", // image can be a separate domain name // publicPath: ", // prevent image import is SRC as an object esModule: false,}}]}Copy the code

Configure another resource alias

resolve: {
    alias: {
      assets: path.resolve(process.cwd(), './src/assets')
    }
}
Copy the code

This allows us to import an image in our code via img or set an image in a style as follows:

<img src="~assets/logo.png" alt="">
.bg {
    width: 200px;
    height: 200px;
    background: url("~assets/logo.png");
    background-size: 100% 100%;
}

Copy the code

conclusion

This chapter introduces VUE3, configuring styles and image manipulation. The next chapter introduces TS and configudes ESLint.