VUE前端工程化-3

配置自动打包相关的参数

上面使用webpack自动打包完成后，需要手动在浏览器中输入网址，自动打开浏览器的设置如下：

//package.json中的配置

//--open 打包完成后自动打开浏览器
//--host 配置IP地址
//--port 配置端口
"scripts":{
    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
1
2
3
4
5
6
7
8

webpack中的加载器

在实际开发过程中，webpack默认只能打包以.js为后缀结尾的模块，其他非.js后缀的模块处理不了，需要调用loader加载器才能正常打包，否则报错。

打包css文件

1. 运行npm i style-loader css-loader -D命令，安装css文件啊的loader
2. 在webpack.config.js中增加loader规则

module.exports = {
    mode:"development",
   //增加module->rules数组
    module:{
        //test表示匹配的文件类型，//中间写正则表达式
        //use表示要调用的loader
        rules:[
            { test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11

3. 导入（import)css文件

注意：use数组的顺序是固定的不能随意改动，因为loader调用的顺序是从后向前调用

打包less文件

1. 运行npm i less-loader less -D命令
2. 在webpack.config.js中的module->rules增加loader规则

module:{
        //test表示匹配的文件类型，//中间写正则表达式
        //use表示要调用的loader
        rules:[
            { test:/\.less$/,use:['style-loader','css-loader','less-loader']}
        ]
    }
1
2
3
4
5
6
7

3. 导入（import)less文件

打包scss文件

1. 运行npm i sass-loader node-sass -D命令
2. 在webpack.config.js中的module->rules增加loader规则

module:{
        //test表示匹配的文件类型，//中间写正则表达式
        //use表示要调用的loader
        rules:[
            { test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
        ]
    }
1
2
3
4
5
6
7

3. 导入（import)scss文件

配置postCSS自动添加css的兼容前缀

css针对不同的浏览器效果是不同的，所以需要使用兼容性的css

1. 运行npm i postcss-loader autoprefixer -D
2. 在项目根目录创建postcss的配置文件postcss.config.js并初始化配置：

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

3. 在webpack.config.js的module->rules数组中，修改css的loader规则

module.exports = {
    mode:"development",
   //增加module->rules数组
    module:{
        //test表示匹配的文件类型，//中间写正则表达式
        //use表示要调用的loader
        rules:[
            { test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11

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

webpack默认处理不了样式表中的路径

1. 运行npm i url-loader file-loader -D
2. 在webpack.config.js中的module->rules增加loader规则

module:{
        //test表示匹配的文件类型，//中间写正则表达式
        //use表示要调用的loader
        rules:[
            { test:/\.jpg|png|gif|bmp|ttf|svg$/,
             use:"url-loader?limit=1666"}//?之后是loader的参数项目
            						//limit指定图片大小，单位为字节，只有小于limit的图片，才会转成base64图片
        ]
    }
1
2
3
4
5
6
7
8
9

打包处理JS文件中的高级语法

1. 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D

2. 安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3. 在项目根目录创建babel配置文件babel.config.js并初始化

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

4. 在webpack.config.js中的module->rules增加loader规则

module:{
        //test表示匹配的文件类型，//中间写正则表达式
        //use表示要调用的loader
        rules:[
            { test:/\.js$/,
             use:"babel-loader",
             exclude:/node_modules/    //exclude为排除项目，不需要处理node_modules中的js文件，只需要处理自己写的js
            }]
    }
1
2
3
4
5
6
7
8
9

VUE单文件组件

单文件组件的基本用法

基本结构

• template 组件的末班区域
• script 业务逻辑区域
• style 样式区域
  

<template>
    <div>
        <h1>这是APP根组件</h1>
    </div>
</template>

<script>
export default{
    data(){
        return {};
    },
    methods:{}
};
</script>

<style>
h1{
    color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

webpack中配置vue加载器

1. 运行npm i vue-loader vue-template-compiler -D
2. 在webpack.config.js配置文件中，添加vue-loader的配置

const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports ={
    module:{
        rules:{test:/\.vue$/,loader:"vue-loader"}
    },
    plugins:[new VueLoaderPlugin()]
}
1
2
3
4
5
6
7
8

在webpack项目中使用vue

1. 运行npm i vue -S安装vue
2. 在src->index.js入口文件中，通过import Vue from "vue"来导入vue函数
3. 创建vue的实例对象，并指定要控制的el区域
4. 通过render函数渲染App根组件
   

webpack简单的打包发布

在package.json中配置打包命令

"scripts":{
    "build":"webpack -p"//执行npm build，则默认在dist中生成最终文件
}
1
2
3