Vue+Node+MongoDB implements the mall system - Chapter 16: webpack

1. Introduction

1.1 Comparing grunt, gulp, webpack

• grunt, gulp are compression optimizations for js, css, html and replacement of version numbers
• Webpack focuses more on parsing project files. When webpack is packaging, all resources are processed and transformed by js. When the file format is not the default ones, it will look for the loader plug-in to further identify and then convert it to js, ​​and then package the output.
• Modular based packaging tool

1.2 webpack basics

1. Basic plugin
- html-webpack-plugin: Generate multiple pages based on the same template
- extract-text-webpack-plugin
- UglifyJSPlugin: js compression plugin
- CommonsChunkPlugin: Extract common files in multiple pages
- clean-webpack- plugin : clear previous files before packaging process
- copy-webpack-plugin:

2. Common loader parser
- css-loader (parses css files)
- sass-loader/less-loader/node-sass (precompiled parsing)
- file-loader/url-loader parses images (png, jpg/svg/gif) )
- add prefix to css: postcss-loader, autoprefixer

3. webpack.config.js configuration file

//webpack3.0不再支持相对路径，所以在node项目中，可以使用path模块来将相对路径转为绝对路径
var path = require('path'); 

// 核心配置
module.exports={
    // 入口文件
    entry:'./src/lib/index.js', 
    // 出口配置
    output:{
        path:path.join(__dirname,'./dist'), //输入路径
        filename:'vue-toast-demo.js', //打包后文件名
        // 打包后的格式（三种规范amd,cmd,common.js)通过umd规范可以适应各种规范，以及全局window
        libraryTarget:'umd', 
        library: 'VueToastDemo'
    },
    module:{
        rules:[ //解析模块时需要的模块加载器
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    },
    plugins:[]
}

2. Develop a vue-toast plugin

• Publish a vue plugin with the help of the npm platform
• Process: Declare a plug-in - write a plug-in - register a plug-in - use a plug-in

The official documentation states: There are four ways to write plugins:
1. Add global methods or properties

Vue.myGlobalMethod = function(){...}

1. Add global resource

Vue.directive('my-directive',{
    bind(el,binding,vnode,oldVnode){...}
})

1. inject components

    Vue.mixin({
        created:function(){}
    })

1. add instance method

Vue.prototype.$myMethod =function(options){}

A few basic steps to develop a vue plugin
- A Vue.js plugin should have a public method install . The first parameter of this method is the Vue constructor, and the second parameter is an optional options object myplugin.install = function(Vue,options){…}
- Official description: https://cn.vuejs.org/ v2/guide/plugins.html# Using plugins

import ToastComponent from './vue-toast.vue' //引入vue模板组件

let Toast = {}
Toast.install = function(){ //通过install注册插件
    Vue.prototype.$toast = function(){
        Vue.extend(ToastComponent)
    }
} 
if(window.Vue){
    Vue.use(Toast) //如果是直接用script标签引入插件，可通过此法注册插件到vue
}
export default Toast;   //导出toast

practice

Requirements: a toast layer function
1, template.vue. Provide html template

<template>
    <section class="toast-container" :class="visible?'fade-in':'fade-out'">
        <div class="toast">
            <span>{{message}}</span>
        </div>
    </section>
</template>
<script>
    export default {
        name:'tmp',
        data(){
            return{
                visible:true,
                message:'默认提示语'
            }
        }
    }
</script>

2、index.js

import ToastComponent from './vue-toast.vue'

let Toast = {}
Toast.install = function(Vue,options){
    var opt={
        duration:3000,
    }
    for(var key in options){
        opt[key] = options[key];
    }
    Vue.prototype.$toast=function(msg,option){
        if(typeof option =='object'){
            for(var key in option){
                opt[key]=option[key]
            }
        }
      const ToastController= Vue.extend(ToastComponent);

      var instance = new ToastController().$mount(document.createElement('div'))

      instance.message = msg;
      instance.visible = true;

      document.body.appendChild(instance.$el)
      setTimeout(()=>{
          instance.visible=false;
          document.body.removeChild(instance.$el)
      },opt.duration)
    }
    Vue.prototype.$toast['show']=function(msg,option){
        Vue.prototype.$toast(msg,option);
    }
    Vue.prototype.$toast['success'] = function(msg,option){
        Vue.prototype.$toast(msg,option);
    }
    Vue.prototype.$toast['info'] = function(msg,option){
        Vue.prototype.$toast(msg,option);
    }
    Vue.prototype.$toast['error'] = function(msg,option){
        Vue.prototype.$toast(msg,option);
    }
}
if(window.Vue){
    Vue.use(Toast)
}

export default Toast;

Summarize

• Use the basic Vue constructor to create a subclass from the vue component: Vue.extend(component)
• Four ways to write vue plugins: commonly used-Vue.prototype.$method, others: Vue.method, Vue.mixin(option), Vue.directive('method',option)
• The path of webpack configuration output must be an absolute path
• Three properties of webpack configuration, entry, output, module, plugins