Vue--webpack 简单入门使用方法及安装流程

最新推荐文章于 2024-06-07 17:03:35 发布

划船不用桨Ai

最新推荐文章于 2024-06-07 17:03:35 发布

阅读量163

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43770374/article/details/105471775

版权

一、 webpack概述

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler )

官网下载地址（中文网）
webpack

二、webpack安装和配置

项目初始化

npm init -y

2.1安装

npm i webpack --save-dev --registry=https://registry.npm.taobao.org 
npm install --save-devwebpack-cli --registry=https://registry.npm.taobao.org

save与save-dev的区别 npm install jquery --save
项目的依赖项，表明jquery在开发和上线后都需要使用简写： npm install jquery -S 简写： npm install
jquery , 新版本npm --save 可以省略不写下载的包在 dependencies 中可以查看
npm install webpack --save-dev :项目开发阶段的依赖项，项目上线时不需要使用简写： npm install
webpack -D 下载的包在 devDependencies 中可以查看

说明：可以通过如下命令查看webpack版本

npm info webpack

三、编写html文件

src 下新建 index.html

<!DOCTYPE html> 
<html lang="en">
 <head>
 <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> 
  <style> 
  * { margin: 0; padding: 0; }
  * .w {width: 1000px; margin: 0 auto; }
  * .box {float: left; width: 200px; height: 120px; margin: 20px 50px;  cursor: pointer; transition: all .5s; }
  * .box:nth-child(1) { background-color: orange; }
  * .box:nth-child(2) { background-color: green; }
  * .box:nth-child(3) { background-color: blue; } 
  * </style>
</head>
 <body>
 <div class="w">
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  </div> 
  <script src="/node_modules/jquery/dist/jquery.js"></script> 
  <script src="./index.js"></script> 
  </body> 
  </html>

四、编写js文件

src下新建index.js文件

$(function(){
 $('.box').on('mouseover',function(){
  $(this).css('border-radius','50%') })
  $('.box').on('mouseout',function(){
   $(this).css('border-radius','0px') })
    })

五、使用webpack

上面是我们传统的编写代码方式和逻辑

webpack 作出了哪些改变 webpack 能够将index.html 中引入的所有css、js以及图片等资源文件打包到1个文件中
index.html 只需要引入这个打包后的文件即可
所以我们需要告诉webpack，index.html 中到底都使用到了哪些资源文件。告诉的方式是新建1个
文件，在这个文件中，将所有html文件中用到的css和js文件都引入

六、src下新建 main.js

在这里插入图片描述
注意，可以使用其他方式将jquery暴露到全局，这样，就可以将main.js改成如下这样

const aa=require('jquery')
const index=require('./index')

但是当前如果这样，打包后，运行html文件就会调试 $ is not defined

七、配置打包命令

在这里插入图片描述
运行命令打包

npm run build

命令运行成功后，dist 目录下有一个 bundle.js 文件
仔细查看代码，发现，jquery的源码以及我们自己编写的jquery代码都打包到这个文件中了
也就是说，现在index.html中不需要引入 jquery 和 index.js 了，只需要引入一个 bundle.js 文件即可
为了方便，将 src 目录下的 index.html 拷贝到 dist 目录下，然后引入 bundle.js
然后运行此文件即可
八、再加一个文件
src 目录下，再新建一个 test.js 文件

const test = () => { console.log('test') }module.exports = { test }

在这里插入图片描述

npm run build

发现 test.js 文件中的代码也被打包到 bundle.js 文件中了
现在 index.html 还只是引入了 bundle.js 一个文件：也就是说无论index.html原本需要依赖几个文
件，打包之后只需要引入bundle.js即可

划船不用桨Ai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue--webpack 简单入门使用方法及安装流程

一、 webpack概述webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler )官网下载地址（中文网）webpack二、webpack安装和配置项目初始化npm init -y2.1安装npm i webpack --save-dev --registry=https://registry.npm.taobao.org npm...
复制链接

扫一扫