webpack打包的方法:

方法一

  创建一个src文件夹(存放自己的代码),dist文件夹(打包到此文件夹)

2编写自己的代码,在src文件夹中创建一个主模块main.js和若干个js文件,将模块js发送到main.js中

3.此时,就用到了webpack的功能了,在终端输入(进入文件目录)webpack  ./src/main.js  ./dist/bundle.js

便将main.js打包到了dist文件中的bundel.js中了(其他模块自动处理打包了);

此时,在html文件中直接引用bundel.js文件就可以了。

方法二:

用webpack.config.js文件处理:用node语法获取绝对路径,

在此之前先要用命令 npm init初始化,再用npm install生成两个文件

然后在webpack.config.js中配置以下

y

最后在终端输入webpack就从新打包了。

webpack 打包的具体步骤的更多相关文章

  1. webpack打包和gulp打包工具详细教程

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

  2. webpack打包经验——处理打包文件体积过大的问题

    前言 最近对一个比较老的公司项目做了一次优化,处理的主要是webpack打包文件体积过大的问题. 这里就写一下对于webpack打包优化的一些经验. 主要分为以下几个方面: 去掉开发环境下的配置 Ex ...

  3. 安装webpack和webpack打包(此文转自Henery)

    Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...

  4. 如何使用webpack打包项目

    webpack是前端开发中比较常用的打包工具之一,另外还有gulp,grunt.之前没有涉及过打包这块,这里介绍一下使用webpack打包的流程. Grunt和Gulp的工作方式是:在一个配置文件中, ...

  5. webpack 打包

    React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知.那么webpack有哪些优势,可以成为最主流的React开发工具呢? webpack是什么 ...

  6. 如何使用webpack打包前端项目

    webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · ...

  7. 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

    拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

  8. 如何使用webpack打包你的项目

    webpack是前端开发中比较常用的打包工具之一,另外还有gulp,grunt.之前没有涉及过打包这块,这里介绍一下使用webpack打包的流程. Grunt和Gulp的工作方式是:在一个配置文件中, ...

  9. Webpack打包工具学习使用

    Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 ...

随机推荐

  1. bzoj 4974 [Lydsy1708月赛]字符串大师 KMP 最小循环元 构造

    LINK:字符串大师 给出一个字符串的每个前缀的最小循环元 还原字典序最小的原字符串. 一个比较显然的结论 或者说 学过KMP的都知道 对于每个前缀i求出nex数组后 那么i-nex[i]为最小循环元 ...

  2. Vue通过Blob对象实现导出Excel功能

    不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Exc ...

  3. 【01python基础】

    1.python的环境搭建(Python3 下载) Python 官网:https://www.python.org/ Python文档下载地址:https://www.python.org/doc/ ...

  4. NOI Online#1 小记

    虽然只是一个普通的模拟赛,但是毕竟是我第一次参加官方组织的比赛,所以还是写一篇小记纪念一下吧(毕竟经验少,太菜了. 上午一直颓着,随便看了两眼文化课,补了补昨天的化学作业,就当是对明天月考的复习吧(月 ...

  5. 调用thrift出现No handlers could be found for logger "thrift.transport.TSocket"

    1.问题 使用thrift版本为0.10,在0.8没有这个问题 其中ncTAgent是代码中封装的thrift接口的结构,在thrift服务端没有启动的时候,应该拋错为连接不到.但是拋错的堆栈输出之前 ...

  6. stat 命令家族(1)- 详解 vmstat

    性能测试必备的 Linux 命令系列,可以看下面链接的文章哦 vmstat 介绍 Virtual Meomory Statistics,报告虚拟内存统计信息 会统计进程信息.内存.交换区.IO.磁盘. ...

  7. python2.1 if-else条件语句:

    #案例:存款大于100万,买宝马:小于20万自行车! cunkuan=10#if判断条件,else:不满足if执行其他命令if cunkuan>100: print("可以买宝马,好开 ...

  8. 谈谈MySql索引

    刚刚学习完丁奇老师<MySql 实战 45 讲>专栏中的索引部分,图文并茂的风格解开了我之前的许多疑惑,并且学习到许多新的东西,在此做个笔记,方便后续复习.由于 MySql 中存在多种存储 ...

  9. C#LeetCode刷题之#566-重塑矩阵( Reshape the Matrix)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3720 访问. 在MATLAB中,有一个非常有用的函数 resha ...

  10. s2-001漏洞复现

    struts2-001 该漏洞因为用户提交表单数据并且验证失败时,后端会将用户之前提交的参数值使用 OGNL 表达式 %{value} 进行解析,然后重新填充到对应的表单数据中.例如注册或登录页面,提 ...