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. 最优化算法【牛顿法、拟牛顿法、BFGS算法】

    一.牛顿法 对于优化函数\(f(x)\),在\(x_0\)处泰勒展开, \[f(x)=f(x_0)+f^{'}(x_0)(x-x_0)+o(\Delta x) \] 去其线性部分,忽略高阶无穷小,令\ ...

  2. Linux下运行windows 系统下编辑的Python脚本显示“: 没有那个文件或目录”的过程及解决方案

    今天在 linux 系统下执行一windows下编辑的python脚本,提示(:没有那个文件或目录)英文提示:(:No such file of directory)如下: 查看文件的权限发现并没有问 ...

  3. JAVA 连接 ZooKeeper之初体验

    Java连接Zookeeper 一.配置zk环境 本人使用的是虚拟机,创建了两台linux服务器(安装过程百度上很多) 准备zk的安装包,zookeeper-3.4.10.tar.gz,可在Apach ...

  4. 修改 jar 包 或 war 包内容

    修改 jar 包 或 war 包内容 有一个 java web 项目,是 .jar 或 .war 文件,我想替换其中的部分样式(.css)或功能(.class). 步骤就是解压,替换,重新打包. 以 ...

  5. C# 使用代理实现线程间调用

    实现功能: 后台线程改变窗体控件(flowLayoutPanel1)的状态. 利用 this.flowLayoutPanel1.InvokeRequired == false,可以知道是主线程调用的自 ...

  6. Vue 过滤器 Filter传递参数

    给日期类型过滤器设置不同格式 dayjs是一款轻量级的日期操作库 https://day.js.org/en import Vue from 'vue' import dayjs from 'dayj ...

  7. Vue 修饰符sync的应用

    官方链接 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符 这个解释有点不太直观,用代码解释一下 父组件 v-b ...

  8. 三、HelloWorld

    1.创建Hello.java 文件, 2.输入内容 public class Hello{ //公共类 Hello public static void main(String[] args){ // ...

  9. 对于python装饰器结合递归的进一步理解

    对于python装饰器结合递归的进一步理解 代码如下: import functools def memoize(fn): print('start memoize') known = dict() ...

  10. Java 10更新汇总,新的编译器通吃主流编程语言

    早些时候Oracle发布了Java 10,这是Oracle更改发布策略之后的第一版Java,Oracle现已决定每六个月发布一个新的Java版本,周期缩短了,但是并不是说我们要学的更多了,而是说缩短开 ...