您的当前位置：首页正文

Vue和前端工程化、webpack的基本使用（模块化、脚手架使用）

来源：易榕旅网

1.模块化的分类

浏览器端的模块化

AMD (异步模块定义)
代表产品为：Require.js
CMD(通用模块定义)
代表产品为：Sea.js

服务器端的模块化

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

1. 使用require引入其他模块或者包
2. 使用exports或者module.exports导出模块成员
3. 一个文件就是一个模块，都拥有独立的作用域

ES6模块化

ES6模块化规范中定义：

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

总结：

推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。
ES6模块化是浏览器端和服务器端通用的规范.

2.在NodeJS中安装babel

2.1安装babel

打开终端，输入命令：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文件。

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中输入需要执行的js代码，例如：

console.log("ok");

2.4使用npx执行文件

打开终端，输入命令：npx babel-node ./index.js

3.设置默认导入/导出

1.默认导出

export default {
    成员A,
    成员B,

},如下：
let num = 100;
export default{
    num
}

####B.默认导入
import 接收名称 from “模块标识符”，如下：
import test from “./test.js”

在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。
如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象

webpack的概念

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

webpack的基本使用

创建项目目录并初始化

创建项目，并打开项目所在目录的终端，输入命令：
    npm init -y

安装webpack

打开项目目录终端，输入命令:
npm install webpack webpack-cli -D
然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack
在 webpack.config.js 文件中编写代码进行webpack配置，如下：

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

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

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

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

npm run dev

等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。

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

在webpack 4.x中，默认会将src/index.js 作为默认的打包入口js文件
默认会将dist/main.js 作为默认的打包输出js文件
如果不想使用默认的入口/出口js文件，我们可以通过改变 webpack.config.js 来设置入口/出口的js文件，如下：

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

9.设置webpack的自动打包

默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成出口的js文件
那么每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，自动打包可以解决这样繁琐的操作。

A.安装自动打包功能的包:webpack-dev-server
    npm install webpack-dev-server -D
B.修改package.json中的dev指令如下：
    "scripts":{
        "dev":"webpack-dev-server"
    }
C.将引入的js文件路径更改为：<script src="/bundle.js"></script>
D.运行npm run dev，进行打包
E.打开网址查看效果：http://localhost:8080

注意：webpack-dev-server自动打包的输出文件，默认放到了服务器的根目录中.
在自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令：

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

10.配置html-webpack-plugin

使用html-webpack-plugin 可以生成一个预览页面。
因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面
还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
实现默认预览页面功能的步骤如下：

安装默认预览功能的包:html-webpack-plugin
    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 ]
    }

webpack中的加载器(loader）

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

loader加载器包含：

1.less-loader
2.sass-loader
3.url-loader:打包处理css中与url路径有关的文件
4.babel-loader:处理高级js语法的加载器
5.postcss-loader
6.css-loader,style-loader

注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用

安装style-loader,css-loader来处理样式文件

目的：打包处理less文件

npm install style-loader css-loader -D

配置规则：更改webpack.config.js的module中的rules数组

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

安装less,less-loader打包处理less文件

目的：打包处理less文件
安装包

   npm install less-loader less -D

配置规则：更改webpack.config.js的module中的rules数组

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

安装sass-loader,node-sass处理less文件
- 安装包
  npm install sass-loader node-sass -D
- 配置规则：更改webpack.config.js的module中的rules数组

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

安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）

安装包

npm install postcss-loader autoprefixer -D

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

const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}

配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的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']
            }
        ]
    }
}

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

在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件

安装包
npm install url-loader file-loader -D
配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                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图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

打包js文件中的高级语法

在编写js的时候，有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包
- 安装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" ]
}

配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                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图片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

Vue单文件组件

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

解决方案：

使用Vue单文件组件，每个单文件组件的后缀名都是.vue
每一个Vue单文件组件都由三部分组成

1.template组件组成的模板区域
2.script组成的业务逻辑区域
3.style样式区域

<template>

    组件代码区域

</template>

<script>

    js代码区域

</script>

<style scoped>

    样式代码区域

</style>

配置.vue文件的加载器

安装vue组件的加载器

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

配置规则：更改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"
创建Vue实例对象并指定el，最后使用render函数渲染单文件组件

const vm = new Vue({
    el:"#first",
    render:h=>h(app)
})

使用webpack打包发布项目

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

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

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

Vue脚手架

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

安装3.x版本的Vue脚手架：npm install -g @vue/cli
基于3.x版本的脚手架创建Vue项目：

1. 使用命令创建Vue项目
    `vue create my-project`
2.选择Manually select features(选择特性以创建项目)
3.勾选特性可以用空格进行勾选。
4.是否选用历史模式的路由：n
5.ESLint选择：ESLint + Standard config
6.何时进行ESLint语法校验：Lint on save
7.babel，postcss等配置文件如何放置：In dedicated

config files(单独使用文件进行配置)
是否保存为模板：n
使用哪个工具安装包：npm
2).基于ui界面创建Vue项目
命令：vue ui
在自动打开的创建项目网页中配置项目信息。
3).基于2.x的旧模板，创建Vue项目
npm install -g @vue/cli-init
vue init webpack my-project

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

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

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

通过单独的配置文件进行配置，创建vue.config.js

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

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文