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. GPS坐标显示在百度地图上(Qt+百度地图)

    Qt在5.6以后的版本就不支持webview控件了,这里我用的是Qt5.4的版本,里面还有这个控件: 下面简单介绍下Qt与html中的javascript调用交互过程: 一.整体实现介绍 在html中 ...

  2. 行为驱动模型-Behave

    行为驱动开发英文名为Behave Driven Development,简称BDD,是一种敏捷开发方法,主要是从用户的需求出发强调系统行为.将此模型借鉴到自动化测试中称其为行为驱动测试模型,它是一种通 ...

  3. NIO(二):Channel通道

    一.Channel概述 channel(通道):进行IO的连接通道,为NIO的几个核心(Buffer,selector,channel)之一,相比于IO的stream具有较高的性能. IO 单向传输 ...

  4. 从零搭建Spring Boot脚手架(4):手写Mybatis通用Mapper

    1. 前言 今天继续搭建我们的kono Spring Boot脚手架,上一文把国内最流行的ORM框架Mybatis也集成了进去.但是很多时候我们希望有一些开箱即用的通用Mapper来简化我们的开发.我 ...

  5. layui 事件监听触发

    1:监听select 改变 <!-- 不用form 用div也可以 --> <form class="layui-form"> <div class= ...

  6. Python创建进程、线程的两种方式

    代码创建进程和线程的两种方式 """ 定心丸:Python创建进程和线程的方式基本都是一致的,包括其中的调用方法等,学会一个 另一个自然也就会了. "" ...

  7. 2020-05-07:具体讲一下CMS流程

    福哥答案2020-05-07: 福哥口诀法:C初并重清(初始标记.并发标记.重新标记.并发清除) 整个过程分为 4 个步骤,包括:初始标记:仅仅只是标记一下 GCRoots 能直接关联到的对象,速度很 ...

  8. C#LeetCode刷题之#867-转置矩阵(Transpose Matrix)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3756 访问. 给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的 ...

  9. 漏洞重温之XSS(上)

    漏洞简介 跨站脚本攻击(XSS)是指恶意攻击者往Web页面里插入恶意Script代码,当用户浏览页面之时,嵌入web网页中的script代码会被执行,从而达到恶意攻击用户的目的. XSS漏洞通常是通过 ...

  10. 【NOI2014】魔法森林 - 动态加边SPFA

    题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,…,n,边标号为 1,2,3,…, ...