webpack安装使用演示

去年的时候做了一个项目,技术选型选用的是vue,当时也是第一次使用mvvm类型的框架,一切都是从o开始,但是跟着官方文档去搭建的vue项目结构,其中接触到了webpack打包,但一直没有时间好好的去整理下具体的使用方法,现在整理下。

webpack官方解释说它是一个现代的javascript应用程序的1静态模块打包器,当webpack处理应用程序时,它会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或多个budle

1:首先新建一个文件夹作为演示项目,这里我新建的是test文件夹。

2:安装node

3:安装webpack

npm install --global webpack

不指定版本的话当下安装的就是最新版本,安装4+版本的话直接执行上面的命令会提示你安装webpack-cli,执行以下命令

npm install --save-dev webpack-cli

安装成功以后再次执行安装webpack的命令即可安装成功。

4:现在环境准备就绪开始使用

进入到test根目录下,执行命令 npm init ,项目目录下会生成一个package.json文件,打开该文件,默认如下

现在一切准备就绪,开始演示如何进行模块打包,首先新建一个入口文件,entry.js,再新建一个module1.js和module2.js,用来演示打包。说下入口文件entry.js

入口文件主要是用来指示webpack应该使用哪个模块,比如在本项目中,会引入module1和module两个模块。如下

然后module1和module2分别打印了一句话,内容如下

现在我们要在项目根目录下新建webpack默认配置文件,也就是webpack.config.js,这里要指定入口文件和输出文件

新建一个index.html文件,如果按照之前我们想要使用module1.js和module2.js模块会怎么办呢,老的开发模式肯定会一个一个的引入到index.html文件中,设想有很多css和js的时候是不是很麻烦,现在我们试下webpack的神奇效果,现在进入到你的项目根目录下执行打包命令

npm run build

然后你会发现项目中会多了一个dist文件夹,也就是你指定的文件打包输出的文件夹,然后在index.html中引入你指定的打包出来的文件bundle.js,好了,然后运行下index.html,会发现结果跟挨个引入是一样的结果

好了,这就是webpack的神奇效果和简单的安装使用流程。

这里说下package.json的解析,首先package.json是用来管理本地安装npm包的唯一文件,它描述了当前项目依赖的报的列表,包含项目依赖包的版本,而npm是安装NodeJs的时候一起安装的包管理工具

这是初始化的json的解析

name:项目的名字

version:项目的版本

description:项目的描述

main:指定的入口文件,本项目中是entry.js

scripts:制定了运行脚本命令的npm命令行缩写,本项目中用 npm run build 来执行webpack命令

author:项目的创建人

license:授权方式,现在默认的方式是MIT

devDependencies:开发过程中需要的依赖项,例如一些进行单元测试的包,一般是在开发环境中使用的,使用一些插件或工具来提高开发效率。

而正式环境中,发布版本的代码是经过编译打包压缩过后的代码。

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值