Webpack安装方式、webpack-dev-server、html-webpack-plugin、各种loader、Babel、vue如何使用

Webpack起步

为什么使用webpack

1.网页引用的静态资源（JS,CSS,Images，字体文件，模板文件）多了以后会发起很多的二次请求

2.要处理错综复杂的依赖关系

什么是webpack

基于前端的一个项目构建工具，是基于Node.js的一个前端工具，可以对项目进行合并、压缩、精灵图、图片的Base64编码

webpack两种安装方式

运行npm i webpack -g全局使用webpack命令

项目目录

在终端中输入npm init -y生成package.json配置文件

• node_modules:执行cnpm i安装必要的包

• dist

  • bundle.js

    解决js文件中的依赖问题，可以将所有的js、css、vue等打包生成唯一一个bundle.js文件

• src:源代码

  • css
  • images
  • js

• main.js ： 项目的js入口文件，导入文件 ：import ** form **,由于ES6的语法浏览器解析不了，需要执行webpack .\sec\main.js .dist\bundle.js命令，将main.js文键解析成为bundle.js文件存入到dist目录下

• webpack.config.js : 通过Node中的模块操作，向外暴露了一个配置对象，此时执行webpack就可以自动执行将main.js解析成为bundle.js文件

  const path=require('path')
  module.exports={
      entry: path.join(_dirname,'./src/mian.js'),//入口文件
      output:{//出口文件
          path:path.join(_dirname,'./dist'),
          filename:'bundle.js'
      } 
  }
  

• package.json

• index.html

webpack-dev-server自动打包编译

第一种方式（推荐）

1. 运行 npm i webpack-dev-server - D下载工具，安装到项目的本地开发依赖

2. 注意，即使全局配置了webpack也需要本地安装webpack才能使用这个工具

3. webpack-dev-server帮我们生成的bundle.js文件托管到了电脑的内存中，并不是实际存在于物理硬盘，所以项目根目录看不到这个打包好的bundle.js

4. 在package.json配置文件中，找到“scripts",加入:

   “dev”: “webpack-dev-server --open --port 3000 --contentBase src --hot”

5. 执行 npm run dev 就能自动打开端口为3000，根目录下的页面内容，此时显示的页面是上述项目目录中的index。启用了hot可以执行时只更新少量的代码，减少不必要的刷新请求。

第二种方式（了解）

html-webpack-plugin

1. 自动在内存中根据指定页面生成一个HTML页面
2. 自动将打包好的bundle.js文件追加到正确的路径下面

在webpack.comfig.js文件中的 plugins 节点里面，加入：

const htmlWebpackPlugin=require('html-webpack-plugin')
new htmlWebpackPlugin({//创建一个在 内存 中生成HTML页面
    template: path.join(_dirname, './src/index.html'),
    filename: 'index.html'
})

webpack处理非js类型文件

默认情况下，webpack无法处理url地址，需要手动安装合适的第三方loader加载器，调用loader时是从后往前调用

• 打包处理css文件

  1. 执行 cnpm i style-loader css-loader -D，安装两个加载器

  2. 在webpack.config.js里面新增一个配置节点叫做 module，是一个对象；module有一个rules属性，是一个数组，存放了所有第三方的匹配和处理规则

  3. module:{新的节点，配置所有第三方模块加载器
         rules:[//所有第三方的匹配规则
             {test:/\.css$/,use: ['style-loader','css-loader']},//匹配css文件
         ]
     }
     

• 打包处理less文件

  1. 执行 cnpm i less-loader -D，安装加载器

  2.  {test:/\.less$/,use: ['style-loader','css-loader','less-loader']}
     

• sass文件需要的loader：sass-loader(需要先安装node-sass)

• 图片文件：

  {test:/\.jpg|png|gif|bmp|jepg$/,use :'url-loader?limit=7631&name=[hash:8]-[name].[ext]'}//hash值+原名+原后缀
  //limit给定的值是图片的大小，如果我们引用的图片>=limit值，则不会转为base64类型的字符串，如果小于给定的limit值则会被转为base64的字符串
  

• 字体文件：

  {test: /\.ttf|eot|svg|woff|woff2$/,use: 'url-loader'},
  

Babel

安装两套包以获取webpack处理全部的ES6语法或者ES7语法

1. cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
2. cnpm i babel-preset-env babel-preset-stage-0 -D

在webpack.config.js中module节点下的rules数组里面添加新的匹配规则：

{test:/\.js$/,use: 'babel-loader',exclude:/node_modules/}
//排除掉该目录打包速度很快，不用编译该目录下的所有js文件

在项目的根目录中，新建一个 .babelrc 的babel配置文件，该文件属于JSON格式，必须符合JSON语法规范：不能写注释，字符串必须用双引号。

{
    "presents":["env","stage-0"],
    "plugins":["transform-runtime"]
}

Render函数

在页面中渲染组件

var login = {
template:'<h1>登陆组件</h1>'
}

var vm = new Vue({
  el:'',
  data:{},
  methods:{},
  render: function (createElement){
      return createElement(login)//return的结果会替换页面中el指定的容器
  }
})

使用Vue

安装vue的包： cnpm i vue -s

• 类似于普通vue实例使用方式

  1. import Vue from ‘…/node_modules/vue/dist/vue.js’

  2. import Vue from ‘vue’

     在webpack.config,js中加入

     resolve:{
         alias:{//修改vue被导入时的路径
             "vue$": "vue/dist/vue.js"
         }
     }
     

• render函数渲染组件

  1. 定义一个纯粹的组件:login.vue

     这是使用.vue定义的组件

  2. 导入login.vue组件

     import login from './login.vue'
     

  3. 新增配置项

     cnpm i vue-loader vue-template-compiler -D

     {test:/.vue$/,use:‘vue.loader’}

  4. 使用render函数渲染组件

      render: function (createElement){
           return createElement(login)//return的结果会替换页面中el指定的容器
       }
     
     //下面是简写
     render: c => c(login)
     

模块间暴露成员

在一个模块中。可以使用export default（暴露一次）和export（暴露多次）成员

• export default向外暴露的成员可以使用任意的变量来接收

  //暴露成员的模块
  export default{
      name:'zhangsan',
      age:'18'
  }
  

  //接收成员的模块
  import suiyi from './test.js'
  

• export暴露的成员只能使用{ }的形式来接收，这种方式叫做按需导出

  //暴露成员的模块
  export var title='lalala'
  export var content="star"
  

  //接收成员的模块
  import {title as changed,content} from './test.js'//as起别名
  console.log(changed+comtent)
  

webpack-vue-router

import Vue from 'vue'
//1，导入包
import VueRouter from 'vue-router'
//2，手动安装
Vue.use(VueRouter)
//导入组件
import app from './App.vue'
import aa from './main/AA.vue'
import bb from './main/BB.vue'

//导入aa的子组件
import a1 from './subcom/A1.vue'
import a2 from './suncom/A2.vue'

//3,创建路由对象
var router=new VueRouter({
    routes:[
        {path: '/aa',
         component:aa,
        chirldren:[
            {path: '/a1',component:a1},
            {path: '/a2',component:a2}
        ]
        },
        {path: '/bb',component:bb}
    ]
})
var vm = new Vue({
    el:'#app',
    render:c => c(app)//把el控制的区域渲染成为app组件，所以将路由链接放在app组件中
    //4，挂载路由对象到vm上
    router
})

<template><div>
    <h1>
        这是aa组件
    </h1>
    <router-link to="/aa/a1">这是a1组件</router-link>
    <router-link to="/aa/a1">这是a2组件</router-link>
    <router-view></router-view>
    </div>
</template>
<script></script>
<style></style>

<template><div>
    <h1>
        这是bb组件
    </h1>
    </div>
</template>
<script></script>
<style></style>

<template><div>
    <h1>
        这是app组件
    </h1>
    <router-link to="/aa">aa</router-link>
    <router-link to="/bb">bb</router-link>
    <router-view></router-view>
    </div>
</template>
<script></script>
<style lang="scss" scoped>
    <!--.vue组件中定义的样式，推荐开启scoped标签，样式只在组件中使用，通过css选择器实现的;
    lang属性指定样式语法
    -->
    
</style>