Using webpack 4.x to build vue development environment in the initial stage

Guide reading

First of all, in this chapter, I will take you hand in hand to build a vue development environment using webpack 4.x. Students here may ask?
"There are ready-made web pack scaffolding tools like vue-cli. Why do we have to build our own wheels?" Here, I will answer this question:

• The same is the front-end development, looking at other people with high salaries, you heart?
• If you encounter problems during development or packaging, you need to modify the scaffolding configuration. Do you still want to be at a loss?
• Looking at the thousands of configurations of webpack, do you want to go through that dizzy history of bitterness?
• You can't find the scaffolding needed for the current project in the market. Do you want to experience that kind of hesitation and helplessness?
• Eliminate 10,000 words.

Installation dependency

It is very convenient to use third-party package files when facing complex project requirements or construction requirements; hao ~, we need to install the basic loader and other configurations of our vue project. OK, we install them in turn: (Here is a pre-condition, tens of millions of dollars) Don't tell me that you don't have a node,npm in your PC; well, there may be some leather shrimp classmates who don't, here is the download address: https://nodejs.org/en/download/ Reaching out to the Party's welfare yo

1. We need to create our project development catalogue

    md webpack-vue && cd webpack-vue

1. Install webpack into our project

    cnpm install -D webpack webpack-cli

1. Introduce the third-party package we need. JSON dependency packages and loader s

    # Install vue, there's no doubt about that.^^
    cnpm install -S vue 

    # Vue-loader is necessary and vue-template-compiler is the necessary dependence of vue-loader
    cnpm install -D vue-loader vue-template-compiler 

    # Install babel to ES6 - > ES5
    npm install -D @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader

    # css loader style-loader converter, style-loader will convert css to js, children~
    cnpm install -D css-loader style-loader

    # Picture and other resource loaders
    cnpm install -D file-loader url-loader

    # Install the css preprocessor here, for example, less
    cnpm install -D less-loader

To configure

After installing the relevant modules we need, we need to configure these modules in a certain way in webpack.config.js before we can start the project properly.

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].bundle.js'
    },
    module:{
        rules: [{
            test:/\.js$/, 
            loader: 'babel-loader', 
            exclude:/node_modules/
        },{
            test:/\.css$/,
            use:[ 'style-loader', 'css-loader']
        },
        //... It's too long to omit a part.
        {
            test:/\.less$/,
            use:[ 'vue-style-loader', 'css-loader', 'less-loader' ]
        },
        {
            test:/\.vue$/,
            loader:'vue-loader',
            options:{
                loaders: {
                    'less': [ 'vue-style-loader', 'css-loader', 'less-loader']
                }
            }
        }]
    },
    resolve:{
        //... It's too long to omit a part.
    },
    plugins:[
        new VueLoaderPlugin()
    ]
}

directory structure

After configuring our webpack.config.js file, we can then sort out the project directory structure, which is as follows:

|   App.vue
|   index.js
|   main.js
|
+---assets
|       logo.jpg
|
\---style
        main.css

App.vue

<template>
  <div id="app">
      <img :src="require('@/assets/logo.jpg')" />
      <span>{{msg}}</span>
      <p class="test">Test Text</p>
  </div>
</template>


<script scoped>
    export default {
        name: 'App',
        data(){
            return {
                msg: 'Vue Webpack Logo'
            } 
        },
        created(){},
        mounted(){},
        components: {}
    }
</script>

<style scoped lang="less">
    #app{
        img { width:100px; height:100px; }
        .test{
            color:red; 
        }
    }
</style>

main.js

import Vue from 'vue'
import './style/main.css'
import App from './App.vue'

new Vue({
  el:"#app",
  template:'<App/>',
  components:{App}
})

hao So far, our vue project has been launched, and then we can continue to build our scaffolding tool to support more features and meet multiple conditions.