webpack

webpack 是什么？？？ 前端模块化打包（构建）工具

 

两层作用：

1 打包（构建）

2 模块化

 

1 打包（构建）：

1.1 语法转换：

Less（预编译CSS语言） / SASS（预编译CSS语言） 要转化为 CSS

ES6 转化为 ES5

TypeScript（强类型的JS） 转化为 ES5

1.2 文件压缩：

HTML / CSS / JS / 图片

1.3 文件合并：

CSS 、JS

1.4 提供开发期间的服务器环境，以 HTTP 协议的方式打开浏览器

 

 

webpack的基本使用：

 

1 安装： npm i -D webpack webpack-cli

-D 表示项目开发期间的依赖，只在项目开发期间使用，项目上线，webpack是不会随着项目上线

被放到服务器上去了

webpack 核心包

webpack-cli 提供了在终端中使用webpack的命令 （ command line interface ）

 

webpack-cli 包提供了一个叫 `webpack` 的命令， 这个命令就是用来对项目打包的

 

2 webpack 的两种使用方式：

2.1 命令行

2.2 配置文件方式（ 推荐 ）

 

学习 命令行 方式对项目进行打包：

命令： webpack 入口文件路径

 

问题说明： webpack 安装后，无法直接在 终端 中，通过命令来使用。因为没有进行全局安装

所有，找不到 webpack 命令，因此，就会报错！！！

问题的解决：使用 ./node_modules/.bin/webpack 这个命令，就可以调用 webpack 对我们的

的项目进行打包了

 

 

（即：1 安装： npm i -D webpack webpack-cli

          2 在 package.json 中的 scripts 脚本中添加以下配置：

            " build": "webpack ./index.js"

          3 在 终端中运行命令： npm run build）

 

正确使用 webpack 命令的做法：

1 在 packge.json 文件的 scripts 中添加一个 脚本

"build": "webpack ./index.js"

2 在终端中运行命令： npm run build

作用：通过 npm 来执行 build 这条脚本命令

监听文件内容的变化， 只要文件内容变化， 就自动刷新浏览器

。。。。

 

2 模块化

     为前端浏览器开发，提供了 模块化 环境， 在webpack看来，所有资源都是模块

    包括了： js / css / 图片 / 字体 。。。

     可以识别任意 JS 模块化语法规范 ，比如：AMD、CommJS、ES6模块化

 

 

为什么通过 npm 就可以直接使用 webpack 命令，而我们自己在终端中却无法使用？？？

原因：npm 在执行脚本命令的时候，会在后台将 当前目录/node_modules/.bin 临时添加到

环境变量中，添加到环境变量后， .bin 目录中 webpack 命令就可以使用了