详解window启动webpack打包的三种方法
什么是Webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
1.在cmd终端执行 npx webpack命令
2.在package.json文件同级建立webpack.config.js文件,内容如下:
const path = require('path'); module.exports = { entry: './src/index.js', // 入口 output: { // 出口 filename: 'bundle.js', // 文件名 path: path.resolve(__dirname, 'dist') // 生成路径 } };
执行命令 npx webpack --config webpack.config.js
3.修改package.json脚本
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "build": "webpack" // 修改命令执行方法 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9", "lodash": "^4.17.5" } }
执行命令npm run build
结论:生成类似下面的目录,打开index.html 有Hello webpack显示
webpack-demo |- package.json |- webpack.config.js |- /dist |- bundle.js |- index.html |- /src |- index.js |- /node_modules
总结
以上所述是小编给大家介绍的window启动webpack打包的三种方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
相关推荐
-
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
1.先安装好vue-cli,如果还没有安装好的可以参考:<windows下vue-cli及webpack 构建网站(一)环境安装> 2.安装好之后Vue的欢迎界面,我们要做个例子导入bootstrap的样式,就先去复制一份bootstrap的导航样式过来替换掉Vue的欢迎页面吧,打开Src文件夹下面的components组件目录,然后打开 Hello.vue文件,把 <h1>{{ msg }}</h1> <h2>Essential Links</h2&
-
windows下vue-cli及webpack搭建安装环境
1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm
-
使用webpack打包后的vue项目如何正确运行(express)
我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错误: 那么该如何运行呢?其实可以将生成的dist文件部署到express服务器上运行. (1).安装express-generator生成器. npm install express-generator -g // 也可使用cnpm比较快 (2).创建一个express项目. express exp
-
详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
windows下vue-cli及webpack 构建网站(一)环境安装 windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件 1.本篇文章是建立在以上三篇文章的基础上的. 2.安装 vue-router 插件,运行cmd进入到项目目录下面,运行以下命令: cnpm install vue-router --save-dev 3.在src文件夹下面新建一个文件夹page用于存放模板文件,然后
-
详解windows下vue-cli及webpack 构建网站(三)使用组件
1.本文章是建立在<windows下vue-cli及webpack 构建网站(一)环境安装>和<windows下vue-cli及webpack 构建网站(一)导入bootstrap样式>两篇文章之上的. 2.在src\components文件夹下面新建两个组件,分别为 header.vue.footer.vue,打开header.vue文件粘贴下面的代码作为网站的头部. <template> <!-- Fixed navbar --> <nav cla
-
详解webpack打包nodejs项目(前端代码)
随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来.一个简单的webpack应该包含以下几个概念 入口起点 输出 配置 组件 加载器 插件 模块 模块热替换 适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成后,再将完整页面返回给用户. 那么这样做会遇到的问题: 1. 本项目没
-
webpack4打包vue前端多页面项目
之前一直用的脚手架,这次自己搭建webpack前端项目,花费了不少心思,于是做个总结. 1.用法 项目结构如下: project |- bulid <!-- 这个目录是自动生成的--> |- public |- css |- js |- page1.html <!-- 插件生成的html文件--> |- page2.html <!-- 插件生成的html文件--> ... |- public/ <!-- 存放字体.图片.网页模板等静态资源--> |- src
-
详解使用webpack+electron+reactJs开发windows桌面应用
electron是一两年前挺火的一个框架 本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件 (当然听说mac上也可以用electron,不过没试过) (没错我还在用windows,不是mac也不是linux,我是个lowB) 团队主要的技术栈是react,所以考虑用react开发,方便维护. PS.由于项目是大半年前做的,所以一些细节可能记忆有误请见谅 几个重点: 1.想要能调试必须使用webpack打包,不能用r
-
详解如何使用webpack打包多页jquery项目
虽然已经2019年了 不过有一些项目 还是需要用到jquery的 不过考虑到使用jquery的一堆兼容性问题 也为了可以顺利地使用ES6来撸代码 研究使用webpack+babel打包代码来发布 几个重点: 1.为了将模块分割加载,不至于一个js文件过大,一个页面中使用多个js文件 2.由于是多页项目(多个html),每个页面使用的js文件都不一致 基于以上两点,需要配置多个入口文件 3.会把小图片转换成base64,所以可能css转成的js文件会比较大,所以css文件都单独设置入口js 例如,
-
详解window启动webpack打包的三种方法
什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用. 1.在cmd终端执行 npx webpack命令 2.在package.json文件同级建立webpack.config.js文件,内容如下: const path = require('path'); module.exports = { entry: './
-
详解JavaScript中分解数字的三种方法
本文基于免费代码营基本算法脚本"分解数字" 在数学中,非负整数n的阶乘可能是一个棘手的算法.在本文中,我将解释这种方法,首先使用递归函数,第二种使用而循环,第三种使用以循环. 算法挑战 返回提供的整体的阶乘. 如果整体用字母n表示,则阶乘是所有小于或等于n的正整数的乘积. 阶乘经常用简写符号n!表示! 例如:5!= 1 * 2 * 3 * 4 * 5 = 120 function factorialize(num) { return num; } factorialize(5); 提供
-
详解PHP显示MySQL数据的三种方法
昨天的程序是这样的: <?php $link=mysql_connect("localhost","root","之前的管理员密码"); if(!$link) echo "没有连接成功!"; else echo "连接成功!"; mysql_select_db("infosystem", $link); $q = "SELECT * FROM info"
-
详解Maven多模块打包遇到的问题解决方法
项目描述: springboot+springcloud+zookeeper+eureka+maven:为多模块多module的分布式架构: 项目目录结构如下 父工程为server工程,其中有多个子module工程: 1.独立子工程:db.model.quartz.redis.util.basecontroller: 2.独立功能模块:dao.service.controller: 其中dao.service.controller分别依赖db.model.quartz.redis.util.ba
-
详解JS异步加载的三种方式
一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输
-
详解Nginx 虚拟主机配置的三种方式(基于IP)
Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于端口) https://www.jb51.net/article/14977.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 1.基于IP的虚拟主机配置 如果同一台服务器有多个IP,可以使用基于IP的虚机主机配置,将不同的服务绑定在不同的IP上. 1.1
-
详解Nginx 虚拟主机配置的三种方式(基于端口)
Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于IP) https://www.jb51.net/article/14974.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 2.Nginx基于端口的虚拟主机配置 如一台服务器只有一个IP或需要通过不同的端口访问不同的虚拟主机,可以使用基于端口的虚拟主机配
-
详解Redis集群搭建的三种方式
一.单节点实例 单节点实例还是比较简单的,平时做个测试,写个小程序如果需要用到缓存的话,启动一个 Redis 还是很轻松的,做为一个 key/value 数据库也是可以胜任的 二.主从模式(master/slaver) redis 主从模式配置 主从模式: redis 的主从模式,使用异步复制,slave 节点异步从 master 节点复制数据,master 节点提供读写服务,slave 节点只提供读服务(这个是默认配置,可以通过修改配置文件 slave-read-only 控制).master
-
详解SpringBoot静态方法获取bean的三种方式
目录 方式一 注解@PostConstruct 方式二 启动类ApplicationContext 方式三 手动注入ApplicationContext 方式一 注解@PostConstruct import com.example.javautilsproject.service.AutoMethodDemoService; import org.springframework.beans.factory.annotation.Autowired; import org.springfr
-
详解Spring Boot 访问Redis的三种方式
目录 前言 开始准备 RedisTemplate JPA Repository Cache 总结 前言 最近在极客时间上面学习丁雪丰老师的<玩转 Spring 全家桶>,其中讲到访问Redis的方式,我专门把他们抽出来,在一起对比下,体验一下三种方式开发上面的不同, 分别是这三种方式 RedisTemplate JPA Repository Cache 开始准备 开始之前我们需要有Redis安装,我们采用本机Docker运行Redis, 主要命令如下 docker pull redis doc
随机推荐
- AngularJS基础 ng-model-options 指令简单示例
- window启动
- 浅谈java实现背包算法(0-1背包问题)
- 使用Visual Studio 2010/2013编译V8引擎步骤分享
- js实现图片放大和拖拽特效代码分享
- ASP.NET Core Project.json文件(5)
- mysql表的清空、删除和修改操作详解
- 浅谈js script标签中的预解析
- 详解Func<T>与Action<T>区别
- jQuery实现本地预览上传图片功能
- MySQL 配置优化(多个参数)
- js验证符合用户体验的网页表单特效
- 打印机常见部件检测维修技巧第1/3页
- Android 简单封装获取验证码倒计时功能
- Spring boot中自定义Json参数解析器的方法
- 利用二进制文件安装etcd的教程详解
- Python使用APScheduler实现定时任务过程解析
- wordpress自定义标签云与随机获取标签的方法详解
- vue组件name的作用小结
- 在vue项目中引入vue-beauty操作方法