本文共 3209 字,大约阅读时间需要 10 分钟。
webpack用途:Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发,最后使用webpack将这些小文件打包成一个文
件,减少了http的请求次数。 webpack可以实现按需打包,为了避免出现打包文件过大可以打包成多个文件。随着前端技术的强大,开发中可以使用javascript的很多高级版本,比如:typescript、ES6等,方便开发,
webpack可以将打包文件转换成浏览器可识别的js语法。webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术,通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。webpack基于node.js运行,首先需要安装node.js。
1、先去下载:
node.js官网下载地址:
推荐下载LTS版本
2、安装完成检查PATH环境变量是否设置了node.js的路径。
3、测试
运行cmd,输入node -v
会显示当前的版本号
具体的可以参照这篇文章
1、自动安装NPM
npm全称Node Package Manager,他是node包管理和分发的工具,使用NPM可以对应用的依赖进行管理,NPM 的功能和服务端项目构建工具maven差不多,我们通过npm 可以很方便地下载js库,打包js文件。 node.js已经集成了npm工具,在命令提示符输入 npm -v 可查看当前npm版本 2、设置包路径 包路径就是npm从远程下载的js包所存放的路径。 使用 npm config ls 查询NPM管理包路径(NPM下载的依赖包所存放的路径) node ‐vNPM 默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules,为了方便对依赖包管理,我
们将管理包的路径设置在单独的地方,本教程将安装目录设置在node.js的目录下,创建npm_modules和 npm_cache,执行下边的命令: 本教程安装node.js在D:\Program Files\nodejs下所以执行命令如下: npm config set prefix “C:\Program Files\nodejs\npm_modules” npm config set cache “c:\Program Files\nodejs\npm_cache” 此时再使用 npm config ls 查询NPM管理包路径发现路径已更改 3、安装cnpm npm默认会去国外的镜像去下载js包,在开发中通常我们使用国内镜像,这里我们使用淘宝镜像 下边我们来安装cnpm: 有时我们使用npm下载资源会很慢,所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。 输入命令,进行全局安装淘宝镜像。 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装后,我们可以使用以下命令来查看cnpm的版本 cnpm -v nrm ls 查看镜像已经指向taobao1)本地目录下安装:将webpack的js包下载到项目下的npm_modeuls目录下。
在门户目录下创建webpack测试目录webpacktest01: npm install --save-dev webpack 或 cnpm install --save-dev webpack npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli) 2)全局安装加-g,如下: 全局安装就将webpack的js包下载到npm的包路径下。 npm install webpack -g 或 cnpm install webpack -g 3)安装webpack指定的版本: 本教程使用webpack3.6.0,安装webpack3.6.0: 进入webpacktest测试目录,运行:cnpm install --save-dev webpack@3.6.0 全局安装:npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g测试:win + r输入cmd然后输入webpack,如果提示信息如下,则已经安装完成了。
vue_02.html
Vue.js测试程序
model01.js
var add = function (x, y) { return x + y;};var add2 = function (x, y) { return x + y + 2;};module.exports.add = add;
main.js
var { add} = require('./model01.js');var Vue = require('./vue.min.js');var VM = new Vue({ el: "#app",//表示当前vue对象接管app的div区域 data: { name: '百度一下,你就知道',// 相当于是MVVM中的Model这个角色 num1: 0, num2: 0, result: 0, url: 'http://www.itcast.cn' }, methods: { change: function () { //这里使用了导入的model01.js文件中的add方法 this.result = add(Number.parseInt(this.num1), Number.parseInt(this.num2)); alert(this.result) } }});
这个是完成以后的目录结构:
然后在modulejs文件目录下,运行命令行窗口
输入webpack main.js build4.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7nEJe8za-1582427657465)(C:\Users\ZhouYanXiang\Desktop\picture\blog_Image\webpack\webpack打包.png)]运行vue_02.html,运行结果如下:
我最开始把引入js的语句
放在了
里面
结果没有成功导入build.js文件,运行结果如下:
后来参考了这篇文章
之后就搞清楚了
加载的顺序不一样,你可以把HTML看成从上往下加载的。
例如在网速慢的情况下把js代码放在body底部用户会先看到网页结构,等js加载完成后才出现特效
区别简述:
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行,但是在主页和其余部分代码之前预先装载
转载地址:http://mmurn.baihongyu.com/