Webpack学习笔记——基础使用入门

Webpack  是什么

 分离文件  低耦合

对文件进行模块化

安装

 

 

使用webpack打包js到指定的包中

 

打包多个js文件

引入的时候只需要引入捆绑的文件

拓展

接受

打包

变量json保存

 

函数的使用

函数的使用  每次使用完都要打包

 

打包css

需要使用加载器进行打包

 

顺序要注意的

打包样式

创建package.json文件配置描述

 

导入样式

 

重新绑定 

 

配置文件

经常性的操作放在配置文件之中，自动构建，不需要手动构建webpack

.config.js

Entry:show.js

 

需要组装的文件

Output:bundle.js

 

 

 

_drname当前目录

如何创建配置文件

Module

正则表达式

凡是css样式的都会自动化加载

 

直接加载

安装第三方库

 

安装jquery 保存在配置文件中引用z

导入jq使用这个第三方库在package里面有这个依赖

 

 

 

服务端打包

打包引用

Npm run 以上的自定义启动

启动指定的文件和输入的文件

 

不同的指令启动不同的环境程序

 

时刻修改数据实时响应

同步在package.json

配置就会自动检测有改变就重新编译

改正端口

devServ:{

 

}

 

这个就是自定义的端口

{
  // path: '/',  //删除'/'，点击Dashboard可用
  path: '',
  component: Layout,
  redirect: 'dashboard',
  children: [{
    path: 'dashboard',
    component: _import('dashboard/index'),
    name: 'dashboard',
    meta: { title: 'dashboard', icon: 'dashboard', noCache: true },
    children: [
      {
        // path: '/',  //删除'/'，点击Dashboard可用
        path: 'passport',
        component: _import('ewe/hr/employee/passport'),
        meta: { role: ['admin'] }
      }
    ]
  }
  ]
},