IT学习站-137zw.com

more +资源更新Forums

more +随机图赏Gallery

Zabbix 4.0 企业级自动化监控系统实战,完整版Zabbix 4.0 企业级自动化监控系统实战,完整版
Java程序员面试笔试真题与解析 完整pdf扫描版Java程序员面试笔试真题与解析 完整pdf扫描版
价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云
10节课让你成为滚床单高手  强烈推荐 屌丝的福音10节课让你成为滚床单高手 强烈推荐 屌丝的福音
Spring Boot编程思想(核心篇) PDF 电子书 百度云 网盘下载Spring Boot编程思想(核心篇) PDF 电子书 百度云 网盘下载
最新流出的传智博学谷黑马python5.0课程最新流出的传智博学谷黑马python5.0课程

Webpack安装配置及打包详细过程

Webpack安装配置及打包详细过程

[复制链接]
jimmy肖明 | 显示全部楼层 发表于: 2019-11-14 14:25:00
jimmy肖明 发表于: 2019-11-14 14:25:00 | 显示全部楼层 |阅读模式
查看: 208|回复: 0
引言

前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目,本文详细介绍webpack安装配置及打包的详细过程。
Webpack简单介绍

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle
其中包含四个核心概念

  • 入口(entry):指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的
  • 输出(output):告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist
  • loader:让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)
  • 插件(plugins):插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
通过官网的一张图,可以说明webpack的强大,如下所示:
Webpack安装配置及打包详细过程  技术博客 1033899-20190910163825444-117071023

打包步骤

接下来详细介绍webpack安装配置及打包的详细过程
安装node.js

可以参考上篇博客Node.js安装详细步骤教程(Windows),这里不再重复书写。
全局安装webpack

运行CMD,安装命令如下所示,其中, -g是全局安装,并移除安装了 webpack和webpack-cli创建本地项目文件夹

创建项目本地文件夹,如“D:\TestWebpack”,在CMD命令窗中分别输入如下命令,切换到该目录本地安装webpack

输入如下命令,在项目目录中安装webpack,其中,--save-dev是本地安装查看webpack 版本

输入如下命令,若出现版本号,说明安装成功。创建package.json文件

输入如下命令,将在项目目录中自动生成package.json文件配置打包目录

在项目目录下,新建config文件夹,用于存放配置文件;src文件夹,用于存放源码;out文件夹,用于存放打包生成文件,具体如下图所示。
Webpack安装配置及打包详细过程  技术博客 1033899-20190910145959677-2019225107

添加webpack.config.js文件

在config文件夹中添加webpack.config.js文件,并添加如下代码:运行webpack

在cmd命令窗体中,输入如下命令,运行成功后,在out目录中会生成打包后的index.js 配置package.json

每次输入命令webpack --config config/webpack.config.js,太长,且非常不方便,此时我们可以在package.json文件中配置,如下所示:配置完成后,我们输入的如下命令,可以直接打包。JS缓存问题的处理

通过哈希值解决JS缓存问题(在没有修改JS要打包的内容时,不会重新打包一个JS文件),修改webpack.config.js文件,具体代码如下:安装webpack插件clean-webpack-plugin

通过clean-webpack-plugin插件删除输出目中之前旧的文件。
安装命令
用法一
用法二
配置完后,我们再次运行npm run start,此时out目录中,只有一个新生成的js文件,如下图所示。
Webpack安装配置及打包详细过程  技术博客 1033899-20190910172507889-567661176


总结

至此,我们完成从webpack安装、配置、打包等一系列步骤。以上详细步骤,全部经过笔者测试通过,如果在安装或使用过程中出现问题,欢迎留言交流,如果本文对你有所帮助,希望关注支持下。


来源:http://www.137zw.com
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
137zw.com IT学习站致力于免费提供精品的java技术教程和python技术教程,CCNA书籍/资料/CCNP书籍/资料教程/CCIE书籍/资料/H3C学习/认证/一级建造师考试/微软学习/认证/包括基础教程和高级实战教程,同时也提供分享网站源码下载和互联网相关一系列的技术教程,我们想做的就是让知识分享更有价值!(IT学习站官方唯一域名地址:www.137zw.com 请谨防假冒网站!)本站所有资源全部收集于互联网或网友自行分享,分享目的仅供大家学习与参考,如无意中侵犯您的合法权益,请联系本站管理员进行删除处理!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

浙ICP备19022368号-1|Archiver|手机版|IT学习站-137zw.com

GMT+8, 2020-7-11 00:32 , Processed in 4.202944 second(s), 34 queries .

快速回复 返回顶部 返回列表