前端工程化&webpack

2020-08-25 本文已影响0人 Scincyc

1.模块化的相关规范

1.能够了解
2.了解webpack
3.了解使用Vue单文件组件
4.能够搭建Vue脚手架
5.掌握Element-UI的使用

1.模块化的分类

1.1 浏览器端的模块化

1).AMD(Asynchronous Module Definition,异步模块定义)
代表产品为：Require.js
2).CMD(Common Module Definition,通用模块定义)
代表产品为：Sea.js

1.2 服务器端的模块化

服务器端的模块化规范是使用CommonJS规范：

模块分为单文件模块和包
引入其他模块：require('模块标识符')
导出模块成员：exports或者module.exports
一个文件就是一个模块，拥有独立的作用域

1.3 ES6模块化

ES6模块化规范中定义：

每一个js文件都是独立的模块
导入模块成员：使用import关键字
暴露模块成员：使用export关键字

小结：推荐使用ES6模块化，因为AMD，CMD局限使用于浏览器端，而CommonJS在服务器端使用

ES6模块化是浏览器端和服务器端通用的规范

2.在NodeJS中安装babel

2.1 安装babel

babel的使用可以使得例如es6一些高级语法转换为浏览器可以支持的语法

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill

2.2 创建babel.config.js

在项目根目录中创建babel.config.js文件

编辑js文件中的代码如下：

const presets = [
  [
    '@babel/env',
    {
      targets: {
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1'
      }
    }
  ]
]
module.exports = { presets }

2.3 创建index.js文件

在项目目录中创建index.js文件作为入口文件

//index.js
       console.log("ok");

2.4 使用npx执行文件

打开vs终端（ctrl+`），输入命令：npx babel-node ./index.js

3.设置默认导入/导出

3.1 默认导出

export default {
        成员A,
        成员B,
        .......
    }

let num = 100;
export default{
    num
}

3.2 默认导入

import 接收名称 from "模块标识符"

import test from "./test.js"

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，写多个export default会报错
如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象 {}

4.设置按需导入/导出

4.1 按需导出

export ...

export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

4.2 按需导入

import 默认导入,{按需导入} from "导入模块"

import { num,fn as printFn ,myName } from "./test.js"
//同时导入默认导出的成员以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"

注意：

一个模块中可以既有按需导入，也有默认导入，也可以按需导出和默认导出
按需导入可以对导入重命名 ... as ...

5.直接导入并执行代码

import "./test2.js";

6.webpack的概念

webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

7.webpack的基本使用

7.1 创建项目目录并初始化

创建项目空白目录，运行npm init -y 命令，初始化包管理文件package.json

新建源代码目录src

7.2 创建首页及js文件

在src中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li
在项目目录中创建js文件夹，并在文件夹中创建index.js文件

7.3 安装jQuery

npm install jQuery -S

7.4 导入jQuery

//index.js文件，编写代码导入jQuery并实现功能：
import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

注意：此时项目运行会有错误，因为import $ from "jquery";这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题
所以我们需要webpack来帮助我们解决这个问题。

7.5 安装webpack

npm install webpack webpack-cli -D

在项目根目录中，创建webpack.config.js 的配置文件
初始化的基本配置如下：

module.exports = {
    mode:"development"//可以设置为development(开发模式)，production(发布模式)
}

注意：mode设置的是项目的编译模式，development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快，production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些

修改项目中的package.json文件，添加运行脚本dev

"scripts":{
    "dev":"webpack"
}

注意：scripts节点下的脚本，可以通过 npm run 运行，如：npm run dev 将会启动webpack进行项目打包

项目打包，并在页面中引入打包生成的js文件

npm run dev运行后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中，查看浏览页面效果

8.设置webpack的打包入口/出口

在webpack 4.x中，

默认打包入口js文件：src/index.js
默认打包输出js文件：dist/main.js

自定义入口和出口文件：

//webpack.config.js
const path = require("path");
module.exports = {
    mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/index.js"),
    //设置出口文件
    output:{
        //设置输出路径
        path:path.join(__dirname,"./dist"),
        //设置输出文件名
        filename:"res.js"
    }
}

之后找到dist路径中输出的res.js文件，将其引入到html页面<script src='./dist/res.js'></script>中，即可查看浏览页面效果

问题：但是因为引入的是res.js，这样每次修改index.js，就需要重新npm run dev打包一下，才能在浏览器看到新的效果

9.设置webpack的自动打包

自动打包可以解决以上繁琐的操作，步骤如下：

安装自动打包工具
```
npm install webpack-dev-server -D
```

修改package.json中的dev指令

"scripts":{
    "dev":"webpack-dev-server"
}

更改引入的js文件路径
```
<script src="/bundle.js"></script>
```
打包
```
npm run dev
```
打开网址查看效果：http://localhost:8080

注意：
webpack-dev-server会启动一个实时打包的http服务器
webpack-dev-server自动打包的输出文件，默认放到了项目的根目录中，是虚拟看不见的.

10.配置html-webpack-plugin

当访问默认的 http://localhost:8080/，希望默认就能看到一个页面，而不是看到目录。实现默认预览页面步骤如下：

安装默认预览功能的包
```
npm install html-webpack-plugin -D
```

修改webpack.config.js

//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件
    template:"./src/index.html",
    //设置生成的预览页面名称
    filename:"index.html"
})

继续修改webpack.config.js，添加plugins信息

module.exports = {
    ......
    plugins:[ htmlPlugin ]
}

打包
```
npm run dev
```
打开网址查看效果：http://localhost:8080

补充：
在自动打包完毕之后，自动打开浏览器网页“--open”，配置ip “--host”，配置端口“--port”

实现方式就是打开package.json文件，修改dev命令：
```
 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
```

11.webpack中的加载器

默认情况下，webpack只能打包.js文件，如果想要打包非js文件，需要调用loader加载器才能打包

1、 loader加载器可以协助webpack打包处理特定的文件模块包含：

less-loader：可以打包处理.less相关的文件
sass-loader：可以打包处理.sass相关的文件
url-loader：打包处理css中与url路径有关的文件
babel-loader：处理高级js语法的加载器
postcss-loader
css-loader,style-loader

2、loader的调用过程：

如果将要被webpack打包处理的文件

不是js文件，也没有配置对应的loader，会报错；
如果包含高级js，没有配置babel，也报错

11.1 打包处理css文件

安装包style-loader,css-loader
```
npm install style-loader css-loader -D
```

配置loader规则：更改webpack.config.js -> module -> rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    //所有第三方模块的匹配规则
    module : {
        rules:[
            {
                //test:匹配的文件类型，支持正则
                test:/\.css$/,
                //use:调用的loader
                use:['style-loader','css-loader']
            }
        ]
    }
}

之后就可以在index.js中，import "./css/index.css"保存

注意：

use 数组指定loader的顺序是固定的

多个loader的调用顺序是从后向前调用

11.2 打包处理less文件

安装less-loader，less
```
npm install less-loader less -D
```

配置loader规则：更改webpack.config.js -> module -> rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                //test:匹配的文件类型，支持正则
                test:/\.css$/,             
                //use:调用的loader
                use:['style-loader','css-loader','less-loader']
            }
        ]
    }
}

之后就可以在index.js中，import "./css/index.less"保存

11.3 打包处理scss文件

安装sass-loader,node-sass
```
npm install sass-loader node-sass -D
```

配置loader规则：更改webpack.config.js -> module -> rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                //test:匹配的文件类型，支持正则
                test:/\.css$/,             
                //use:调用的loader
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

之后就可以在index.js中，import "./css/index.scss"保存

11.4 自动添加css的兼容性前缀

安装post-css

npm install postcss-loader autoprefixer -D

在项目根目录创建并配置postcss.config.js文件

const autoprefixer = require("autoprefixer");//导入自动添加前缀的插件
module.exports = {
    //挂载插件
    plugins:[ autoprefixer ]
}

配置loader规则：更改webpack.config.js -> module -> rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                test:/\.css$/,
                //添加postcss-loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

之后就可以在index.js中，import "./css/index.css"保存（这样ie也能显示相同效果）

/*index.css*/
::placeholder {
  color: red;
}

11.5 打包样式表中的图片以及字体文件

在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理

安装包url-loader file-loader（file-loader是url-loader 的内置）
```
npm install url-loader file-loader -D
```

配置loader规则：更改webpack.config.js -> module -> rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换为base64图片
                //大于或等于时 不会转成base64图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

之后就可以在index.js中，import "./css/index.css"保存（这样图片就能加载出来）

/*index.css*/
::placeholder {
  color: red;
}
#div {
    width: 500px;
    height: 340px;
    background: url('../images/1.jpg');
}

11.6 打包js文件中的高级语法

有可能高版本的语法不被兼容，需要将之打包为兼容性的js代码

安装babel转换器

npm install babel-loader @babel/core @babel/runtime -D

安装babel语法插件包

npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

项目根目录，创建并配置babel.config.js

module.exports = {
    presets:["@babel/preset-env"],
    plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

配置loader规则：更改webpack.config.js -> module -> rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

12.Vue单文件组件

传统Vue组件的缺陷：

全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中)
没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）

解决方案：

使用Vue单文件组件，每个单文件组件的后缀名都是.vue
每一个Vue单文件组件都由三部分组成：
- template组件组成的模板区域
- script组成的业务逻辑区域
- style样式区域

代码如下：**.vue文件

<template>
    组件代码区域
</template>

<script>
    js代码区域
</script>

<style scoped>
    /*scoped使得每个组件中的样式是私有的，不冲突*/
    样式代码区域
</style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮

配置.vue文件的加载器

接着，配置.vue文件的加载器，从而可以打包.vue单文件组件

安装vue组件的加载器

npm install vue-loader vue-template-compiler -D

配置loader规则：更改webpack.config.js -> module -> rules数组

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
    ......
    plugins:[ htmlPlugin, vuePlugin  ],
    module : {
        rules:[
            ...//其他规则
            { 
                test:/\.vue$/,
                loader:"vue-loader",
            }
        ]
    }
}

13.在webpack中使用vue

上一节我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue，并使用vue来引用vue单文件组件

安装Vue
```
npm install vue -S
```

在index.js中引入vue

import Vue from "vue"
// 导入单文件组件
import App from './components/App.vue'
//创建Vue实例对象并指定el
const vm = new Vue({
    el:"#first",
    //使用render函数渲染单文件组件
    render:h=>h(app)
})

14.使用webpack打包发布项目

在项目上线之前，我们需要将整个项目打包并发布。

配置package.json

"scripts":{
    "dev":"webpack-dev-server",
    //
    "build":"webpack -p"
}

在项目打包之前，可以将dist目录删除，生成全新的dist目录

15.Vue脚手架

Vue脚手架可以快速生成Vue项目基础的架构

15.1 安装3.x版本的Vue脚手架

npm install -g @vue/cli

15.2 创建Vue项目

（1）基于交互式命令行的方式

vue create my-project
选择Manually select features(手动选择特性以创建项目)
用空格进行勾选（比如用到了babel router linter）
是否选用历史模式的路由：n（此时选择的是哈希形式的路由）
ESLint选择：ESLint + Standard config
何时进行ESLint语法校验：Lint on save（默认）
babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
是否保存当前这些配置为模板：n
使用哪个工具安装包：npm

（2）基于图形化界面

命令：vue ui
    在自动打开的创建项目网页中配置项目信息，同上面

（3）基于2.x的旧模板，创建Vue项目
npm install -g @vue/cli-init
vue init webpack my-project

15.3 分析Vue脚手架生成的项目结构

node_modules:依赖包目录
public：静态资源目录
src：源码目录
- src/assets：资源目录（样式表样式图片）
- src/components：组件目录
- src/views：视图组件目录
- src/App.vue：根组件
- src/main.js：打包入口js
- src/router.js：路由js
babel.config.js：babel配置文件
.eslintrc.js：eslintrc语法配置文件
.gitignore：git忽略文件
package.json：包管理文件
postcss.config.js：配置前缀文件

16.Vue脚手架的自定义配置

A.通过 package.json 进行配置 [不推荐使用]

"vue":{
    "devServer":{
        "port":"9990",
        "open":true
    }
}

B.通过单独的配置文件进行配置，在项目根目录创建vue.config.js

module.exports = {
    devServer:{
        port:8888,
        open:true
    }
}

17.Element-UI的基本使用

Element-UI：为开发者提供的一套基于2.0的桌面端组件库，官网地址：http://element-cn.eleme.io/#/zh-CN

A.安装：

npm install element-ui -S

B.在入口函数main.js 导入使用：

import ElementUI from "element-ui";//导入组件库
import "element-ui/lib/theme-chalk/index.css";//导入组件样式
Vue.use(ElementUI);//配置vue插件

之后可以根据官方文档复制代码修改样式，使用相应的组件

基于图形化界面自动安装Element-UI：

vue ui
Vue项目管理器，进入到项目配置面板
点击插件 -> 添加插件，进入插件查询面板
搜索并安装vue-cli-plugin-element
配置插件，实现按需导入，从而减少打包后项目的体积

前端工程化&webpack

1.模块化的相关规范

1.模块化的分类

1.1 浏览器端的模块化

1.2 服务器端的模块化

1.3 ES6模块化

2.在NodeJS中安装babel

2.1 安装babel

2.2 创建babel.config.js

2.3 创建index.js文件

2.4 使用npx执行文件

3.设置默认导入/导出

3.1 默认导出

3.2 默认导入

4.设置按需导入/导出

4.1 按需导出

4.2 按需导入

5.直接导入并执行代码

6.webpack的概念

7.webpack的基本使用

7.1 创建项目目录并初始化

7.2 创建首页及js文件

7.3 安装jQuery

7.4 导入jQuery

7.5 安装webpack

8.设置webpack的打包入口/出口

9.设置webpack的自动打包

10.配置html-webpack-plugin

11.webpack中的加载器

11.1 打包处理css文件

11.2 打包处理less文件

11.3 打包处理scss文件

11.4 自动添加css的兼容性前缀

11.5 打包样式表中的图片以及字体文件

11.6 打包js文件中的高级语法

12.Vue单文件组件

配置.vue文件的加载器

13.在webpack中使用vue

14.使用webpack打包发布项目

15.Vue脚手架

15.1 安装3.x版本的Vue脚手架

15.2 创建Vue项目

15.3 分析Vue脚手架生成的项目结构

16.Vue脚手架的自定义配置

17.Element-UI的基本使用

猜你喜欢

热点阅读