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. JavaScript正则表达式相关方法

    一.正则表达式方法 var str="abcdefabcdef"; (1)reg.test(str); 查看字符串是否有满足正则表达式的内容,并返回一个布尔值true/false ...

  2. luogu P2354 [NOI2014]随机数生成器 贪心 卡空间 暴力

    LINK:随机数生成器 观察数据范围还是可以把矩阵给生成出来的. 考虑如何求出答案.题目要求把选出的数字从小到大排序后字典序尽可能的小 实际上这个类似于Mex的问题. 所以要从大到小选数字 考虑选择一 ...

  3. 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用

    一.什么是 RestTemplate? RestTemplate是执行HTTP请求的同步阻塞式的客户端,它在HTTP客户端库(例如JDK HttpURLConnection,Apache HttpCo ...

  4. OpenVINO学习系列1

    OpenVINO介绍 OpenVINO是英特尔推出一套基于深度学习的计算机视觉加速优化框架,支持其它机器学习平台模型的压缩优化.加速计算等功能. 自发布以后就得到开发者的青睐,其强大的模型优化与压缩能 ...

  5. 【洛谷P3802】小魔女帕琪 题解(概率期望)

    前言:蒟蒻太弱了,不会推式子QAQ -------------------- 题目链接 题目大意:给定$7$种能量晶体各$a_i$个,每次随机摸到一个晶体,如果连续摸到$7$个不同的晶体就会触发一次伤 ...

  6. 职场老鸟,一文教你如何正确入门Python爬虫!

    爬虫现在的火热程度我就不说了,先说一下这门技术能干什么事儿,主要为以下三方面: 1.爬取数据,进行市场调研和商业分析 爬取知乎.豆瓣等网站的优质话题内容:抓取房产网站买卖信息,分析房价变化趋势.做不同 ...

  7. Python3,逻辑运算符

    优先级 ()>not>and>or 1.or 在python中,逻辑运算符or,x or y, 如果x为True则返回x,如果x为False返回y值.因为如果x为True那么or运算 ...

  8. WebMvcConfigurerAdapter在2.x向上过时问题

    在spring boot2.x向上,书写配置类时集成的WebMvcConfigurerAdapter会显示此类已经过时. 解决:不继承WebMvcConfigurerAdapter类,该实现WebMv ...

  9. AAPT: error: resource android:attr/dialogCornerRadius not found. Android resource linking failed

    打开android\app\build.gradle 修改 compileSdkVersion 和 targetSdkVersion

  10. C#LeetCode刷题-脑筋急转弯

    脑筋急转弯篇 # 题名 刷题 通过率 难度 292 Nim游戏   62.5% 简单 319 灯泡开关   31.8% 中等 777 在LR字符串中交换相邻字符   21.9% 中等