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. luogu P6087 [JSOI2015]送礼物 二分 单调队列 决策单调性

    LINK:送礼物 原本想了一个 \(nlog^2\)的做法 然后由于线段树常数过大 T到30. 以为这道题卡\(log^2\)没想到真的有神仙写\(log^2\)的过了 是我常数大了 抱歉. 能过的\ ...

  2. 学习JDBC这一篇就够了

    配套资料,免费下载 链接: https://pan.baidu.com/s/1CKiwCbQV4FGg_4YMQoebkg 提取码: 7cn3 复制这段内容后打开百度网盘手机App,操作更方便哦 第一 ...

  3. IDEA生成MyBatis文件

    IDEA 逆向 MyBatis 工程时,不像支持 Hibernate 那样有自带插件,需要集成第三方的 MyBatis Generator. MyBatis Generator的详细介绍 http:/ ...

  4. 当Django模型迁移时,报No migrations to apply 问题时

    前言:当更改model时在次迁移是不是经常报此类错误,解决以下两点便可以更新成功 1. 删除修改模型对应的app应用下的migrations中的生成文件 2. 进入数据库,找到django_migra ...

  5. 高效c/c++日志工具zlog使用介绍

    1. zlog简介 zlog的资料网上很多,这里不在详细说明:zlog是用c写的一个日志工具,非常小,而且高效,可以同时向控制台和文件中输出,日志接口与printf使用基本一样,所以使用起来很简单. ...

  6. 18、Java中的 数据结构

    Java2中引入了新的数据结构 集合框架 Collection,下一节再谈论(非常重要,面试也常问). 1.枚举 (Enumeration) 1.1 Enumeration 源码: public in ...

  7. Spring Boot 集成 Elasticsearch 实战

    最近有读者问我能不能写下如何使用 Spring Boot 开发 Elasticsearch(以下简称 ES) 相关应用,今天就讲解下如何使用 Spring Boot 结合 ES. 可以在 ES 官方文 ...

  8. 基于Python的AT命令测试脚本

    对于各种有线&无线调制解调器(modem)产品来说,AT命令是事实上的标准接口之一,在工业界被广泛使用. 我开发了一套基于Python的AT命令测试脚本,源代码可在github上获取: htt ...

  9. 使用JSPWiki丰富Unity-UPM包的使用

    1.简述 诸如npm.Nuget之类的包管理工具,Unity推出了自己的Unity Package Manager(UPM)工具来管理使用到的第三方库. 现在Unity Package Manager ...

  10. C#LeetCode刷题-数学

    数学篇 # 题名 刷题 通过率 难度 2 两数相加   29.0% 中等 7 反转整数 C#LeetCode刷题之#7-反转整数(Reverse Integer) 28.6% 简单 8 字符串转整数 ...