webpack基本使用

webpack

是什么?

webpack主要的功能就是打包 所以它里面有两个非常重要的部分 分别为入口和出口，可以把webpack理解成为是一个香肠工厂，就是活猪进去，香肠就出来 ，但是如果加工的每个步骤都是员工亲力亲为就非常麻烦，所以webpack全部都是自动化完成。webpack主要就是来编写这些配置文件 让webpack通过这个配置文件 全自动的来执行我们需要编译打包这些功能

​ (webpack可以看作是一个模块打包工具 它可以做的事情就是分析项目结构 找到javascript 模块 并且把一些浏览器不能够直接运行的扩展语言(sass less typescript 等)这些内容翻译成为浏览器可以使用的格式

​ webpack 根据我们设置的入口文件的依赖 , 加载所有的js模块 合并成为一个js标准的一个模块打包工具

)

webpack 核心部分有四个 入口 出口 在配置入口和出口的时候还需要一些加载器和插件 ，这就是我们配置文件里面所需要的内容，这个配置文件我们需要命名为webpack.config.js

总结:webpack共分为4个部分 入口 出口 加载器 插件

webpack gulp grunt都是常见的打包工具 他们有啥区别

webpack 和另外两个没有太大的可比性 gulp与grunt 是一种能够优化前端开发流程的工具 ,但是webpack可以理解为是一种模块解决方案 所以webpack在很多场景下是可以替代剩下两个的

gulp 与 grunt工作方式是:在一个文件中 通过我们的代码一步一步的让工具进行编译 合并 压缩等工作 工具会根据我们的代码 来进行完成

webpack工作方式:我们可以通过一个配置文件

模块

commonjs 与es6模块

es6标准发布之后 标准中使用的是export来进行暴露 以import来进行模块的引用 但是在node的模块中 我们采用的是commonjs的规范来进行的 使用require来进行引用使用module.exports来进行暴露

commonjs 与es6模块的区别

1.commonjs模块是拷贝(能修改他的值) es6 模块是引用(只能是只读状态)

2.commonjs模块是运行的时候加载 es6模块是编译的时候加载

webpack使用

安装 node v8.9.4

安装webpack：

Webpack-cli：执行webpack相关的命令行

Webpack：webpack的核心模块

Npm install -g webpack webpack-cli

基本使用

在之前的es6模块基础之上 使用webpack打包试一试 看看能否运行

Cmd进入到你要编译的文件夹

Webpack 要打包的文件 -o 你要输出的文件（名字自己起）

问题 上面图片中已经编译成功 但是下面的黄色警告是什么？

警告说的是现在有两种模式一种叫做production（生产模式 自动压缩代码默认的）还有一种叫做development（开发模式不会自动压缩代码）

Webpack4新增了一个选项mode 需要我们指定模式

需要指定打包模式：

webpack --mode production/development 你要打包的文件 -o 输出的文件

简便的打包方式

会对文件和文件夹的命名有所要求 首先文件夹的名字必须是src 其次打包的入口文件必须叫做index.js

运行简单的方式：

webpack --mode production/development

在简便的方式下打包 没有指定输出位置 他会默认在项目的根目录下创建一个dist的文件夹并切文件名是main.js

问题：我们说过webpack都是自动的 我们只需要配置一个配置文件就行了 但是上面讲的为什么没有写配置文件

回答：因为上面是hello word

webpack的配置 入口—出口

配置文件必须叫做 webpack.config.js

入口：entry

出口：output

使用

1.在项目跟路径下创建 webpack.config.js

2.在配置文件中设置入口文件和出口文件

3.运行 在cmd中直接输入webpack 即可

问题

上面在写完配置文件后 发现打包之后没有指定打包模式的警告

配置文件设置打包模式

Production(生产模式 自动压缩) development( 开发模式 不压缩 )

cmd中重新编译发现没有警告了

一次打包多个文件

修改entry入口为对象 和出口中添加[name]

运行webpack即可

插件 plugins

plugins适用于扩展webpack的共能 就可以让webpack完成更多的自动化设置

plugins:[ //配置插件的 接受的是一个数组。数组中每一项都是一个要使用的插件实例 需要通过构造函数传入]
 

Clean-webpack-plugin插件 实现打包时 清空原有的内容

1.下载: cnpm install -D clean-webpack-plugin

2.引用

var {CleanWebpackPlugin}=require(“clean-webpack-plugin”)

3.使用

4.运行 webpack（打包之后就会发现输出的文件家中就没有了 之前的那个作废的内容）

Html-webpack-plugin 把打包成功之后的内容自己添加到html中

1.下载：html-webpack-plugin插件依赖于 webpack webpack-cli

Cnpm install -D html-webpack-plugin webpack webpack-cli

2.引用

Var HtmlWebpackPlugin=require(“html-webpack-plugin”)

Webpack-dev-server搭建一个开发中的服务器

1.下载npm install -g webpack-dev-server

2.运行 webpack-dev-server

自动打开浏览器