Vue基础复习(7)Webpack

卷心菜007

已于 2022-04-02 00:41:32 修改

阅读量549

点赞数

分类专栏： Vue2 文章标签： webpack vue.js javascript

于 2022-03-08 18:12:51 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/123359231

版权

Vue2 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

8. Vue-Loader打包Vue单组文件

9. webpack与Vue单文件组件案例

10. 热模块替换

vue2.X Webpack

webpack中文官方文档:webpack中文文档

1. Webpack

webpack是一个前端静态模块资源打包工具，根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

2. 安装：全局安装(官方不推荐)：

(1) npm i -g webpack@4.35.2 ；npm i -g webpack-cli@3.3.6 ；window + r => 控制板

npm webpack -v查看版本号；npm config get prefix查看npm安装路径

(-g表示全局安装不可以落下)

(2) 全局安装的打包文件

i) 手动打包js文件：将main.js和bar.js打包为一个bundle.js文件：webpack ./js/main.js -o ./js/bundle.js

main.js文件:

const bar = require("./bar")//引入bar文件

bar();

//require不被浏览器识别，需要webpack进行打包

bar.js文件:

module.exports = function(){

    console.log("一个bar模块");

}

打包语句：webpack ./js/main.js -o ./js/bundle.js

(控制台cd..退回上一级 cd加文件跳转到另外文件)

ii) 通过配置文件自动打包文件：一般，将源文件放在src文件夹中,将打包后生成的文件放在dist文件中。创建webpack.config.js配置文件,读取当前目录下的src文件夹中的main.js(入口文件),把对应的js文件打包到出口文件中bundle.js。

目录状态：

index文件引入打包后的文件

<script src="./dist/bundle.js"></script>

webpack.config.js配置文件内容：

const path = require("path")

// 导出webpack配置对象

module.exports={

    // 配置以免webpack运行报警告

    // set 'mode' option to 'development' or 'production' or 'none'

    mode:"development",

    //入口

    entry:'./src/main.js',

    //出口

    output:{

        // 路径，绝对路径

        path:path.join(__dirname,"./dist/"),

        //打包成文件位置

        filename:"a.js"

    }

}

控制运行：webpack

(3) 总结：webpack全局安装实际操作使用不推荐，版本不同时涉及兼容性问题，官方推荐使用本地安装，使得weback打包工具和项目一起存在

3. 安装：本地安装(官方推荐)：

本地安装将webpack打包工具安装到开发依赖(--save-dev)当中

(--save生产环境 --save-dev开发环境)

(1) 卸载全局安装webpack

window+r=>控制台:npm uninstall -g webpack；npm uninstall -g webpack-cli 检查:webpack -v

(2) 本地安装

npm init -y；npm i -D webpack@4.35.2；npm i -D webpack-cli@3.3.6

(3) 配置命令映射

在package.json中修改scripts配置命令映射

查看webpack版本号：npm run show

运行main.js：npm run start

打包构建：npm run build

4. ES6模块规范

导出模块:export(es6语法)或者module.exports(node es5语法)

导入模块:import或者require

每次修改导入导出模块都要进行打包npm run build

main.js导入文件:

// main.js进行导入

// 默认成员

import bar from "./bar";

bar();

// 导入非默认成员，需要按需引入

import {a,add} from "./bar"

console.log(bar);

console.log(a);

add();

// 全部引入

import * as abc from "./bar"

console.log(abc);

//修改导入导出文件后，一定要重新打包npm run build

bar.js导出文件:

// 导出默认成员 一个模块只能有一个默认成员，可以是任何数据类型,可以是函数，也可以是对象

// 导出默认函数

export default function(){

    console.log("bar模块的默认成员--es6");

}

// 可以导出不限量个非默认成员，但只能导出一个默认成员

// 导出非默认成员一定要有const function等关键字

export const a = 5

export function add(){//函数一定要有函数名 不可省略

    console.log(a);

    console.log("导出非默认成员函数");

}

// module.exports是node的语法 export是es6的语法

Index.html文件引入:

<script src="./dist/bundle.js"></script>

5. 打包CSS/image等资源

webpack本身只能打包JS文件,打包其他类型文件时,需要结合插件来使用,这些插件在webpack中被称为loader(加载器)来进行转换.

loader是一个资源转换器,本身是一个函数,参数接受的是源文件,返回值是转换后的结果

1）打包css资源

安装依赖：npm install --save-dev style-loader@1.1.3 css-loader@3,4,2

main.js引入:

import "./css/style.css"

webpack.config.js文件:

const path = require("path")

// 导出webpack配置对象

module.exports={

    // 配置以免webpack运行报警告

    // set 'mode' option to 'development' or 'production' or 'none'

    mode:"development",

    //入口

    entry:'./src/main.js',

    //出口

    output:{

        // 路径，绝对路径

        path:path.join(__dirname,"./dist/"),

        //打包成文件位置

        filename:"a.js"

    },

    module:{

        //模块

        rules:[

            //规则

            {

                test:/\.css$/,//正则表达式，匹配以css结尾的文件

                use:[

                    //顺序不能串

                    "style-loader",//使JS能够识别CSS文件

                    "css-loader",//将css转换成JS能识别的文件

                ]

            }

        ]

    }

}

文件目录:

2) 打包image资源

安装依赖:npm install --save-dev file-loader@5.1.0

安装插件:解决资源路径无法访问的问题：npm i --save-dev html-webpack-plugin@3.2.0

HtmlWebpackPlugin插件：将index.html打包到bundle.js中,同时也会在index.html中自动的<script>中引入bundle.js

文件格式：

各文件内容:

css/style.css:

body{

    background-color: purple;

    background-image: url("./01.jpg");

}

main.js:

//使用模块化方式引入css，最终会打包成js,放到bundle.js里面

import "./css/style.css"

Index.html:

<body>

    <!-- <script src="./dist/bundle.js"></script> -->

    <!-- 插件将index.html至今引入，不需要再引入文件 -->

    <div id="app"></div>

</body>

webpack.config.js:

const path = require("path")

//引入插件 HtmlwebpackPlugin是自定义名

const HtmlwebpackPlugin = require("html-webpack-plugin")

// 导出webpack配置对象

module.exports={

    // 配置以免webpack运行报警告

    // set 'mode' option to 'development' or 'production' or 'none'

    mode:"development",

    //入口

    entry:'./src/main.js',

    //出口

    output:{

        // 路径，绝对路径

        path:path.join(__dirname,"./dist/"),

        //打包成文件位置

        filename:"a.js"

    },

    //配置插件

    Plugin:[

        new HtmlwebpackPlugin({

            // 指定打包之后模板页面,会将指定文件放到打包之后的目录bundle.js里面

            template:'index.html'

        })

    ],

    module:{

        //模块

        rules:[

            //规则

            {

                test:/\.css$/,//正则表达式，匹配以css结尾的文件

                use:[

                    //顺序不能串

                    "style-loader",//使JS能够识别CSS文件

                    "css-loader",//将css转换成JS能识别的文件

                ]

            },{

                //匹配以(png|svg|jpg|gif)中任意一个结尾的文件

                test:/\.(png|svg|jpg|gif)$/,

                use:[

                    'file-loader'

                ]

            }

        ]

    }

}

6. 实时重新加载

作用:无需手动打包和刷新浏览器

安装依赖:npm install --save-dev webpack-dev-server@3.10.3

在webpack.config.js的export中添加实时加载：

//实施重新加载

    devServer:{

        contentBase:"./dist"

    },

修改package.json文件中script: //--open表示自动打开浏览器

"scripts": {

    "show": "webpack-v",

    "start": "node ./src/main.js",

    "build": "webpack",

    "dev":"webpack-dev-server --open"

集成终端运行语句: npm run dev

7. Babel浏览器兼容性

安装b.able:npm install -D bable-loader @bable/core @bable/preset-env

在webpack.config.js的rules中添加：

,{

                test:/\.m?js$/,

                exclude:/(node_modules|bower_components)/,

                use:{

                    loader:'bable-loader',

                    options:{

                        presets:['@bable/preser-env']

                    }

                }

在main.js入口文件中进行es6简单测试：

const x = 5;

console.log(x);

class Person{

    constructor(name){

        this.name = name

    }

}

const p = new Person("xxxx");

console.log(p);

输出为：

8. Vue-Loader打包Vue单组文件

(复制文件并更改名的时候 package.json中也要同时修改)

官方文档:

安装依赖vue-loader和vue-template-compiler：npm install -D vue-loader vue-template-compiler

在webpack.config.js文件中引入并配置插件：

//引入插件

const { VueLoaderPlugin } = require('vue-loader')

另一种引入插件方法：

const HtmlWebpackPlugin = require('html-webpack-plugin');

在Plugins中配置插件：

Plugins:[

        new HtmlwebpackPlugin({

            // 指定打包之后模板页面,会将指定文件放到打包之后的目录bundle.js里面

            template:'index.html'

        }),

        new VueLoaderPlugin()

    ],

在rules内配置：

{

                test:/\.vue$/,

                use:[

                    'vue-loader'

                ]

            }

在src目录下创建App.vue，并在main.js入口文件中引入

import App from "./App.vue"

App.vue文件：

<template>

 <div>

 <h1>App</h1>

 </div>

</template>

运行：npm run build

9. webpack与Vue单文件组件案例

安装模块及插件：npm i vue@2.6.10； npm install -D vue-loader vue-template-compiler@2.6.10

i) main.js打包入口文件：

import Vue from "./vue"

import App from "./App.vue"

new Vue({

    el:"#app",

    template:"<app></app>",

    components:{App},//注册子组件

})

打包成功后会报错：分析原因：

Package.json中main属性不是vue.js的完整版本，template渲染的字符串运行时vue版本无法解析：

最佳解决方法：

采用使用render函数这种方式进行渲染：

import Vue from "./vue"

import App from "./App.vue"

new Vue({

    el:"#app",

    // template:"<app></app>",

    // components:{App},//注册子组件



    //render使用时，当前不可以注册子组件，不能使用compoments

    // render:h=>h(app)//es6箭头函数方法

    render:function(h){

        return h(app)

    }//h是函数用来生成DOM元素的，render得到完整的DOM后，挂载到根节点上

})

ii) 子组件foo.vue

scoped作用：将样式只作用到当前组件中，不然会传递到其他父组件中

10. 热模块替换

在安装完webpack-dev-server情况下，打包构建npm run dev

(npm install --save-dev webpack-dev-server)

修改webpack.config.js文件：

添加引入webpack

const webpack = require("webpack")

添加热模块：

//实施重新加载

    devServer:{

        contentBase:"./dist",

        hot:true//开启热模块

    },

配置中添加热模块：

//配置插件

    Plugins:[

        new HtmlwebpackPlugin({

            // 指定打包之后模板页面,会将指定文件放到打包之后的目录bundle.js里面

            template:'index.html'

        }),

        new VueLoaderPlugin(),

        new webpack.HotModuleReplacementPlugin()

    ],

模块热替换：无需完全刷新页面，局部无刷新的情况下就可以更新

注：只能更新组件，对JS文件无效