Vue学习之四(webpack+项目搭建)

过滤器

• 局部过滤器:写在组件的对象中 和data同级.filter()
• 全局过滤器: 组件定义外部Vue.filters()

webpack学习

是什么?

• 前端资源化模块化管理和打包工具;
• 按照依赖关系打包生成符合生产环境的静态资源;
• 异步按需加载;

核心概念

• entry 入口; 项目的打包入口文件
• output 出口; 经webpack打包生成结果
• Loader 模块资源转换器(需npm安装); 让webpack打包非.js文件
  
  • webpack.config.js 配置文件 默认会搜索当前目录下的该文件
    
    • devDependencies开发版第三方库
    • dependencies生产版第三方库
    • dev脚本,开启node run dev运行它的代码
• 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创建的')
    ]
}

第三包的信息package.json文件

• npm init -y创建package.json文件 记录第三方包文件;在黑窗执行npm install 自动安装node_modules;
• 安装本地 webpack npm i webpack @3.11.0 -D开发版本

webpack打包时的参数

• webpack –progress 查看进度条
• –config 文件名 配置文件webpack.config.dev.js
• –p 压缩

• –watch 监控(内容更改时自动重新打包)

• npm i -D/-S -D:开发环境;-S:生产环境

webpack + vue 搭建项目(页面看到Hello Vue)

• 1.创建必要的文件和文件夹

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

• 2.写上必要代码
  

  App.vue 根组件

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

main.js 导入根组件,利用vue框架创建的render函数渲染根组件

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 配置文件

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.使用webpack-dev-server 和 html-webpack-plugin

  • html-webpack-plugin
    a.以一个参考文件为模版，生成index.html，并且会自动发布到webpack-dev-server开启的node服务上面去
    b.创建template.html文件,包含#app标签;
    c.配置文件中写plugins数组

  • webpack-dev-server 写package.json中的scripts中

    • webpack-dev-server --progress --config webpack.config.dev.js --port 6008 --open --hot
    • --hot 热重载(更改内容后不刷新页面更改)

• 4.最终运行 根目录下 执行npm run dev

需要安装的第三方包

• 第一次安装
  包:vue
  应用场景:我们要去运行App.vue
  安装方式：npm i vue -S
• 第二次安装
  包:vue-loader vue-template-compiler css-loader style-loader
  应用场景:我们要打包.vue结尾的文件
  安装方式：npm i vue-loader vue-template-compiler css-loader style-loader -D
• 第三次安装(两个版本应该对应)
  包:html-webpack-plugin [email protected] [email protected]
  应用场景:我们到时候运行打包出来的bundle.js
  安装方式:npm i html-webpack-plugin [email protected] [email protected] -D