Vue learning four (webpack + project construction)

filter

• Local filter: written in the object of the component and at the same level as data.filter()
• global filter: outside the component definitionVue.filters()

learning webpack

what is it?

• Front-end resource-based modular management and packaging tools;
• Package and generate static resources that conform to the production environment according to dependencies;
• Asynchronous on-demand loading;

Core idea

• entry entry; the package entry file of the project
• output export; the result is packaged and generated by webpack
• Loader module resource converter (requires npm installation); let webpack package non-.js files
  
  • The webpack.config.js configuration file will search for this file in the current directory by default
    
    • devDependenciesDevelopment version of the third-party library
    • dependenciesProduction version of the third-party library
    • devscript, start node run devthe code that runs it
• plugins

//安装到本地node_modules
var webpack = require('webpack')
const path = require('path')

module.exports = {
    entry: './entry.js', //配置打包的入口文件
    output: { //出口
        path: path.join(__dirname), //打包的东西放在哪个文件夹下
        filename: 'bundle.js' //最终打包生成文件名称
    },
    module: { //loader的配置
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] //从右到左执行  先读取,加到头部
        }]
    },
    plugins: [
        new webpack.BannerPlugin('这个文件是zhaolin创建的')
    ]
}

Information package.json file for the third package

• npm init -y creates a package.json file to record third-party package files; execute npm install in the black window to automatically install node_modules;
• Install the local webpack npm i webpack @3.11.0 -Ddevelopment version

Parameters for webpack packaging

• webpack --progress View progress bar
• --config filename configuration file webpack.config.dev.js
• -p compression

• --watch watch (automatically repackage when content changes)

• npm i -D/-S -D: development environment; -S: production environment

webpack + vue build the project (see Hello Vue on the page)

• 1. Create the necessary files and folders

    * |-src
    *    |-App.vue 项目根组件
    *    |-main.js 项目打包的入口文件
    * |-package.json 项目记录文件,记录安装哪些第三方包
    * |-webpack.config.dev.js 配置文件
    * |-template.html

• 2. Write the necessary code
  

  App.vue root component

<template>
  <div>
      <h1>Hello Vue!</h1> 
      <p>测试热重载</p>
  </div>
</template>

main.js imports the root component and uses the render function created by the vue framework to render the root component

import Vue from 'vue'  //相当于var Vue=require('vue')

//导入根组件
import App from './App.vue'
//创建根实例
new Vue({
    el:"#app",
    //利用vue框架创建的render函数渲染根组件
    render:function(createElement){
        return createElement(App);
    }
})

webpack.config.dev.js configuration file

const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    entry:'./src/main.js',//入口
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    plugins:[
        /* 以template.html文件为参照文件,生成index.html;
        并且发布到webpack-dev-server开启的node服务器上 */
        new HtmlWebpackPlugin({
            template:'./template.html'
        })
    ]
}

• 3. Use webpack-dev-serverandhtml-webpack-plugin

  • html-webpack-plugin
    a. Use a reference file as a template, generate index.html, and automatically publish it to the node service opened by webpack-dev-server
    b. Create a template.html file, including the #app tag;
    c. Write the plugins array in the configuration file

  • webpack-dev-server writes the scripts in package.json

    • webpack-dev-server --progress --config webpack.config.dev.js --port 6008 --open --hot
    • --hotHot reload (no page refresh after changing content)

• 4. Finally run the execution in the root directorynpm run dev

Third-party packages that need to be installed

• The first installation
  package : vue
  application scenario: we are going to run App.vue
  installation method: npm i vue -S
• Second installation
  Package : vue-loader vue-template-compiler css-loader style-loader
  Application scenario: We want to package files ending in .vue
  Installation method: npm i vue-loader vue-template-compiler css-loader style-loader -D
• The third installation (two versions should correspond)
  Package: html-webpack-plugin [email protected] [email protected]
  Application scenario: We will run the packaged bundle.js
  installation method: npm i html-webpack-plugin [email protected] [email protected] -D