webpack打包过程及开发过程

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  如下图：