1、传统:

1)分模块去定义js。js中要导出将来要被打包的方法module.exports

2)定义main.js入口文件(主文件)。在此文件中,导入引用的js文件

var {add} = require("./model01.js")
//var {add} = require("./model01")

可以在main.js中使用要导入的js方法

3)使用webpack命令打包js。

4)在html上引用打包生成的工具

2、推荐使用webpack-dev-server开发服务器,它的功能可以实现热加载  并且自动刷新浏览器。

1)安装webpack-dev-server

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装完成自动创建package.json(记录了本程序所依赖的包的信息)

安装完成自动创建node_modules(存放本程序所依赖的包)

2)在package.json中配置script

“scripts”: {
"dev": "webpack-dev-server --inline --hot --open --port 5008
},
--inline 自动刷新
--hot 热加载
--open 自动在默认浏览器打开
--port 5008 指定端口

devDependencies  开发人员在开发过程中所需要的依赖

scripts:可执行的命令

3)配置webpack.config.js

在项目目录下创建webpack.config.js,他是webpack的配置文件,在此文件中可以配置文件的入口文件、输出配置、

插件等,其中,要实现热加载自动刷新功能需要配置html-webpack-plugin插件,其作用是根据html模板在内存生成

html文件,他的工作原理是根据模板文件在内存中生成一个index.html文件

A.配置模板文件 index.html

B.配置html-webpack-plugin插件

C.配置webpack.config.js

webpack的配置文件,配置了入口文件、输入文件的路径、依赖的插件。

D.使用webpack命令去运行程序 npm run dev

4) debug调试

配置如下:

A.在webpack.config.js中配置

devtool: 'eval-source-map',

webpack.config.js中内容如下

B.在js中跟踪代码的位置上添加debugger

一个例子:

在add 方法中添加debugger  如下图:

												

webpack打包过程及开发过程的更多相关文章

  1. webpack 打包过程及常用插件

    前言 要理解webpack 首先明白三个概念:module,chunk,bundles,即输入,中间态,输出. chunk: This webpack-specific term is uesd in ...

  2. webpack打包过程如何调试?

    本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶. 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hell ...

  3. webpack 打包

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

  4. 【vue】饿了么项目-使用webpack打包项目

    1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的& ...

  5. 10分钟搞定webpack打包

    入门前端这个职位近三年的时间了,但是脑子里的东西不多也不少,今天就从脑袋里把新版本的webpack打包过程拔出来给大家鲁一遍,就算帮助那些小白了,废话不多说,开始鲁起来,大家跟着我一起撸... 首先, ...

  6. Webpack 2 视频教程 018 - 使用可视化图表进行统计分析打包过程

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  7. webpack(3)基础的打包过程

    没有配置文件的打包 如果我们没有使用配置文件webpack.config.js,那么我们就需要通过命令来打包 案例 我们首先创建一个webpackTest文件夹,然后在文件夹中再创建2个子文件夹dis ...

  8. 彻底解决Webpack打包慢的问题

    转载 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Route ...

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

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

随机推荐

  1. 如何用 Jmeter 获取 Cookie

    如何用 Jmeter 获取 Cookie 1.Jmeter 安装目录bin文件加下jmeter.properties文件修改,搜索CookieManager.save.cookies= 将Cookie ...

  2. SQL Server死锁问题:事务(进程 ID x)与另一个进程被死锁在 锁 | 通信缓冲区资源上并且已被选作死锁牺牲品。请重新运行该事务。

    ### The error occurred while setting parameters### SQL: update ERP_SCjh_zzc_pl set IF_TONGBU=1 where ...

  3. JavaScript性能优化之小知识总结

    1.避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些 2.定时器 如果针对的是不断运行的代码,不应该使用setTimeout,而 ...

  4. 【java工具类】AES加密解密

    百度百科一下,AES:高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准 ...

  5. Error:MySQLAdministrator无法连接到实例

    Q:利用MySQLAdministrator登录时显示could not connect to the specific instance,使用ping指令后可以ping通,如下所示: A:这里能够p ...

  6. #1123-JSP隐含对象

    JSP 隐含对象 JSP隐含对象是JSP容器为每个页面提供的Java对象,开发者可以直接使用它们而不用显式声明.JSP隐含对象也被称为预定义变量. JSP所支持的九大隐含对象: 对象,描述 reque ...

  7. 网页分页page

    public class PageBean { private int page; // 第几页 private int pageSize; // 每页记录数 private int start; / ...

  8. 线性中继器 Linear Repeater

     线性中继器(Linear Repeater,缩写L-REP) 高速信号在传输介质上传递时,信号衰减和噪声会导致有效数据信号越来越弱.L-REP就是用来再生高速信号,通过使用同等化(Equalizat ...

  9. (转)SQLite部署-无法加载 DLL“SQLite.Interop.dll”: 找不到指定的模块

    本文转载自:http://www.cnblogs.com/muzhiye/p/4284070.html 近期刚使用SQLite,主要引用的是System.Data.SQLite.dll这个dll,在部 ...

  10. linux文本图形界面转换

    vim /etc/inittab 3为默认进入文本界面, 5为默认进入图形界面 文本界面下输入init5或者startx切换图形化界面  图形化界面下输入init3切换文本界面