webpack安装及配置(一)


官方参考文档

1. webpack介绍

webpack 可以打包所有的资源、脚本、图片、样式、表;
在这里插入图片描述

2. webpack的安装

安装的顺序大致如下,node.js作为运行基础,npm/cnpm是依赖管理,帮助我们来安装各种工具、资源,nrm可以查看当前资源获取源,淘宝镜像作为国内资源可以帮我们更快下载;

node.js
npm/cnpm
淘宝镜像
nrm
webpack

2.1 安装node.js

(这里用的是v12.14.0版本)
在官网下载所需版本的node.js,下载完成选择合适的目录默认安装;安装完成后检查node.js路径是否添加PATH环境变量中,若使用node -v命令可以显示node.js版本则代表安装成功,没有则需要我们手动添加;
在这里插入图片描述
在这里插入图片描述

2.2 修改npm仓库路径

npm是node包管理和分发的工具,使用npm可以对应用的依赖进行管理,很方便的下载js库,打包文件;

npm已经集成在node.js中的,使用npm -v命令可以查看npm版本,但是我们需要重新设置下载的依赖包所存放的路径,方便管理;

系统默认存放路径是:C:/用户/[用户名]/AppData/Roming/npm/node_meodules,可以使用 npm config ls 命令查看

  1. 首先我们需要在node.js的安装跟目录中新建两个文件夹 npm_modules 和 npm_cache ;
  2. 使用如下两个命令修改配置路径(其中安装路径自己修改):
    npm config set prefix “D:\develop\nodejs\npm_modules”
    npm config set cache “D:\develop\nodejs\npm_cache”
  3. 再使用npm config ls 查看路径是否修改成功

在这里插入图片描述

2.3 安装cnpm和淘宝镜像

由于npm的服务器是在国外的,所以当我们使用默认的npm安装所需依赖时,速度往往会很慢,这里我们全局安装淘宝团队的cnpm工具和镜像,就可以从国内服务器下载依赖,命令中只需要将npm改为cnpm即可;

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后显示如下:
在这里插入图片描述
此时我们还有一步要完成,就是将使用的镜像指向taobao,步骤如下:
在这里插入图片描述

2.4 webpack安装

本地安装:仅将webpack安装在当前项目的node_modules目录中,仅对当前项目有效。
全局安装:将webpack安装在本机,对所有项目有效,全局安装会锁定一个webpack版本,该版本可能不适用某个项目;全局安装需要添加 -g 参数。

全局安装:cnpm install webpack -g
全局安装指定版本的webpack:cnpm install webpack@3.6.0 -g
ps:webpack4.x版本的,需要安装webpack-cli,命令如下:
cnpm install -g webpack-cli


3. webpack模块化范例(webpack版本3.6)

3.1 模块化定义js文件

简单的演示目录结构

通常分为以下四类(同一目录下,且webpack是全局安装):
main.js:入口文件;作用是导入自定义函数和所需vue包,并完成数据层M和逻辑功能实现层VM,webpack打包也需要此文件;
model.js:自定义方法文件;作用是自定义函数,同时需要将定义的方法导出
test.html:普通html文件;完成视图的编写,直接调用在所打包好的build.js文件中的函数、Model;
vue.js:vue包;

接下来按如下顺序,通过代码来理解每一种文件的作用:
①model.js ②main.js ③test.html


①model.js:需要记住的是,定义的函数必须导出才能被main.js导入

function add(x, y) { //定义一个简单的加法函数
    return x + y;
}

function add2(x, y) {
    return x + y;
}

//module.exports.add = add;//单个方法导出
module.exports = {add,add2};//多个方法的批量导出

②main.js:引入需要用到的方法和vue包要导入才能使用

var {add} = require("./model01");  //导入model01.js中的add方法
var Vue = require("./vue.min");  //导入vue.js

var VM = new Vue({
    el: '#app',
    data: {   //vue中的Model层
        name: 'coderwhat扣什',
        num1: 0,
        num2: 0,
        result: 0
    },
    methods: {	//vue中的VM层
        change: function () {
            //可以直接使用使用导入的函数了
            this.result = add(Number.parseInt(this.num1), Number.parseInt(this.num2));
            //网页上输入的是字符串,需要转换成int类型
        }
    }
});

③test.html:引入build.js后,我们可以直接调用在main.js中定义的Model层数据和VM层方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack模块化打包</title>
</head>
<body>
<div id="app">

    <span v-text="name"></span>   <!--使用v-text来连接Dom和M,并解决闪烁问题-->
    <input type="text" v-model="num1"> +  <!--使用v-model来双向绑定Dom和M-->
    <input type="text" v-model="num2"> =
    <span v-text="result"></span>
    <button v-on:click="change">计算</button> <!--使用v-on绑定click事件,及触发函数change-->

</div>
</body>
<script src="build.js"></script>    <!--这里的build.js就是使用webpack打包产生的js文件-->
</html>

3.2 使用webpack打包main.js、model.js和vue包

因为在main.js文件中,我们引入了需要的model.js中的方法以及vue包,所以通过如下命令就能自动打包这些模块,调用时只需在<script>中引入即可。

webpack  main.js build.js    # 需要在main.js目录下cmd窗口中运行,将各模块打包成名为build.js的文件

4. webpack模块化范例(webpack版本4.41.4)

由于4.x版本和之前版本的打包方式有区别,所以作如下范例

当我们通过如cnpm install -g webpack安装不指定版本时,默认安装最新版本的webpack,
此时4.x版本还需要安装webpack-cli,所以通常用如下命令安装:

cnpm install --save-dev webpack webpack-cli

开发中,一般推荐本地安装webpack等,这样不会影响整个项

node_modules\.bin\webpac main.js -o build.js
#当本地安装时,我们调用webpack就要到相应的文件夹

5. webpack-dev-server 和 html-webpack-plugin

webpack-dev-server:开发服务器,它的功能是可以实现热加载,并且自动刷新浏览器(但不会打包成具体的文件,只存在于内存中),在真正打包前方便测试;
html-webpack-plugin:作用是根据html模文在内存中生成一个index.html文件。

模块化范例实现页面的热加载
模块加热加载
这里我们采用本地安装webpack等软件的方式,实现范例:

5.1 环境初步配置

(这里node.js v12.14.0已经全局安装即系统环境变量中有,并且配置完毕 2.1-2.3 ,webpack版本4.41.4)
这里我们需要安装的是webpack、webpack-cli、webpack-dev-server、html-webpack-plugin(本地安装)

首先在一个实验目录webpackdemo中,使用此命令创建一个默认package.json文件

npm init -y

再使用下列命令本地安装上述四种软件

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin

这时,我们就会得到这样一个目录
在这里插入图片描述

5.2 添加完整的目录结构

在实验文件夹下,
添加src目录用作存储函数、资源文件,
添加dist目录用以存储webpack打包好的js文件,
并在根目录下添加webpack.config.js文件作为webpack的配置文件,完成后如下:

在这里插入图片描述

5.3 添加函数、资源等文件

①vue02.html ②model.js ③vue.min.js ④main.js


①vue02.html:html模板文件;即正常实现页面视图功能的html文件,不过这里仅仅只有vue三层模型MVVM中的View(视图层),而Model(负责数据存储)和VM(负责业务逻辑处理)已经被提取出去了;但只用在<script>上引入打包好的js文件,就可以正常调用其他两层中定义好的数据和功能,实现模块化;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-dev-server热加载</title>
</head>
<body>
<div id="app">

    <span v-text="name"></span>   <!--使用v-text来连接Dom和M,并解决闪烁问题-->
    <input type="text" v-model="num1"> +  <!--使用v-model来双向绑定Dom和M-->
    <input type="text" v-model="num2"> =
    <span v-text="result"></span>
    <button v-on:click="change">计算</button> <!--使用v-on绑定click事件,及触发函数change-->

</div>
</body>
<script src="./dist/build.js"></script>    <!--这里的build.js就是使用webpack打包产生的js文件-->
</html>

②model.js:定义函数,并需要导出函数

function add(x, y) {
    return x + y;
}

module.exports = {add};

③vue.min.js:vue包
④main.js:入口文件,作用是导入自定义函数和所需vue包,并完成数据层M和逻辑功能实现层VM,webpack打包也需要此文件;

var {add} = require("./model");//导入model01.js中的add方法
var Vue = require("./vue.min");//导入vue.js

var VM = new Vue({
    el:'#app',
    data:{  //vue中的Model层
        name:'coderwhat扣什',
        num1:0,
        num2:0,
        result:0,
    },
    methods:{   //vue中的VM层
        change:function () {
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2));
            return this.result;
        }
    }
});

最后的目录结构如下:
在这里插入图片描述

5.4 修改配置文件

①修改package.json
这里的配置是为了使 webpack-dev-server 生效,并能实现诸如热加载这样的功能:

"scripts": { //这里是我们默认创建的package.json中scripts
    "test": "echo \"Error: no test specified\" && exit 1"
},

我们需要将其修改为如下所示,这样当我们运行webpack-dev-server开发服务器后,就可以实现自动打开浏览器热加载功能了

"scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
},
/*
--inline:自动刷新
--hot:热加载
--port:指定端口
--open:自动在默认浏览器打开
--host:可以指定服务器的 ip,不指定则为127.0.0.1,如果对外发布则填写公网ip地址
*/

②修改webpack.config.js
在这里我们需要引入 html-webpack-plugin,并指定入口文件、打包好的文件存放的位置和文件名,以及在内存中生成的html文件的标题、文件名、模板文件

var htmlwp = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js', //指定打包的入口文件
    output: {
        path: __dirname + '/dist', // 注意:__dirname表示webpack.config.js所在目录的绝对路径
        filename: 'build.js' //打包文件名
    },
    plugins: [
        new htmlwp({
            title: '首页', //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
            template: 'vue02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

如此,我们所需安装配置的东西都已准备完毕;

5.5 运行

这里我们可以通过两种方式运行开发服务器,实现项目的热加载:
①打开项目根目录路径的cmd窗口,运行以下命令:

npm run dev

成功运行后cmd窗口如下
在这里插入图片描述
②当我们安装了WebStorm软件时,右键单击项目里的package.json,在选项中选择 Show npm Scripts就会出现箭头所指的npm框,这时我们双击dev即可运行; 在这里插入图片描述
以上两种方式成功运行则会自动跳转到设置好的ip:port,并加载内存中的index.html,示例页面如下:
在这里插入图片描述

tips:当运行不成功时,请注意从node、npm、webpack、webpack-cli、webpack-dev-server、html-webpack-plugin这些软件工具的版本考虑,是否操作方式或是版本不兼容;node、npm/cnpm推荐全局安装,而后续每一个小项目分组推荐本地安装webpack及后续软件,能减少系统耦合。

5.6 ‘webpack-dev-server’ 不是内部或外部命令,也不是可运行的程序

如果我们复制或者clone项目下来,发现无法运行报这个错误,可能时没有正确的npm版本造成的,此时我们通过如下操作即可解决问题:

rm -f node_modules  # linux直接删除
/*-----------------------------*/
npm install rimraf -g   # 也可以先安装删除工具再删除,避免路径过深无法删除的情况
rimraf node_modules

npm install         # 重新安装依赖
npm run build       # 重新打包文件
npm run dev         # 运行

6. webpack程序调试方法

我们在开发过程中经常会遇到bug,所以需要在前端页面写完、函数和功能完成盗用后,测试功能的正确性,所以需要加上类似断点的功能进行程序调试;

①首先需要在webpack.config.js中开启debug调试

devtool: 'eval‐source‐map',

这里采用 5.1 -5.5 中的例子开启程序调试

var htmlwp = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js', //指定打包的入口文件
    output: {
        path: __dirname + '/dist', // 注意:__dirname表示webpack.config.js所在目录的绝对路径
        filename: 'build.js' //输出文件
    },
    devtool: 'eval‐source‐map',
    plugins: [
        new htmlwp({
            title: '首页', //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
            template: 'vue02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

②在需要进行调试的函数中插入debugger

//model.j
function add(x, y) {
    debugger
    return x + y;
}

module.exports = {add};

这样,运行起来后,我们就能逐步调试了
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mitays

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值