webpack 4.x入门----看完就豁然开朗

一. 什么是webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

二. 知识基础

1. 安装webpack前，本地环境支持node.js，了解node.js基础知识点。
2. 安装时，需了解npm的基本使用。

• NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。
• 使用npm help <command>可查看某条命令的详细帮助，例如npm help install。
• 在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序，可用于发布前的本地测试。
• 使用npm update <package>可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
• 使用npm update <package> -g可以把全局安装的对应命令行程序更新至最新版。
• 使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
• 使用npm unpublish <package>@<version>可以撤销发布自己发布过的某个版本代码。

三. 安装及初始化

1. 安装

//全局安装 

npm install -g webpack webpack-cli

2. 创建文件夹及初始化

 

//命令创建文件夹  也可手动创建

mkdir webpack4demo

//进入  也可在文件夹内，按住【shift】键，鼠标右键点击【在此处打开命令窗口】

cd webpack4demo 

//初始化  带【-y】可省去初始文件信息初始的参数信息的确认回车操作 必要时可直接修改文件内容

npm init -y  

 

• 创建文件夹scripts 里面创建index.js文件

• 创建webpack.config.js文件

3. 执行和查看

执行webpack --mode development将会生成dist/index.bundle.js

使用浏览器打开创建的 index.html，F12打开打开工具查看日志，正常查看则表示js文件正常引用

4. mode说明

可能的值有：none, development 或 production（默认）。

选项	描述
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin
none	退出任何默认优化选项

四. webpack之loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。

在更高层面，在 webpack 的配置中 loader 有两个属性：

• test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
• use 属性，表示进行转换时，应该使用哪个 loader。

常用loader ：

• style-loader：将CSS添加到DOM的内联样式标签style里
• css-loader：允许将CSS文件通过require的方式引入，并返回CSS代码
• less-loader：处理less
• sass-loader：处理sass
• postcss-loader：用postcss来处理CSS
• file-loader：分发文件到output目录并返回相对路径
• url-loader 和 file-loader 类似，但是当文件小于设定的limit时可以返回一个Data Url
• html-minify-loader：压缩HTML文件
• babel-loader：把ES6文件转换成ES5文件

 

 1. 对css，js进行编译打包合并生成md5

   i 安装loader

• css-loader: 加载.css文件

• style-loader:使用<style>将css-loader内部样式注入到我们的HTML页面
  

安装style-loader， css-loader

npm install style-loader css-loader --save-dev

   ii 修改文件或配置

创建文件a.js，c.js，a.css，更改index.js

• • a.js

• • c.js

• • a.css

• • index.js

   iii 执行和查看

执行webpack --mode development将会看到一个带md5值得js文件，将他引入html中进行预览查看。

2. CSS中的图片处理

 i 安装loader

• file-loader：默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

• url-loader：功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
  

安装url-loader, file-loader

npm install url-loader file-loader --save-dev

  ii 修改文件或配置

• 修改a.css 将一张图片放到scripts目录

• 配置webpack.config.js文件

  iii 执行和查看

执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片，打开index.html

1.  

五. webpack之plugin

插件（Plugins）是用来拓展Webpack功能的，是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问，它们会在整个构建过程中生效，执行相关的任务。

常用plugin：

• Html-Webpack-Plugin：重构入口html，动态添加<link>和<script>，在以hash命名的文件上非常有用，因为每次编译都会改变
• clean-webpack-plugin：编译输出文件前，删除旧文件，当利用文件hash值输出时，可以利用改插件删除原有文件
• jay-remove-webpack-plugin：当less文件作为入口文件，而不是在js中加载时，会额外生成无用的js文件，可以利用该插件去除这些文件
• stylelint-webpack-plugin：规范scss, less，css书写规则
• happypack：多线程执行任务，加快编译速度
• purifycss-webpack：打包编译时，可剔除页面和js中未被使用的css，这样使用第三方的类库时，只加载被使用的类，大大减小css体积
• optimize-css-assets-webpack-plugin：压缩css，优化css结构，利于网页加载和渲染

 

1. js自动注入html文件

i 安装插件

使用插件html-webpack-plugin，可以将生成的js自动引入html页面，不用手动添加

//安装html-webpack-plugin

npm install html-webpack-plugin --save-dev

//安装webpack webpack-cli

npm install webpack webpack-cli --save-dev

ii 配置文件

配置webpack.config.js文件

​​​​​​​iii 执行和查看

执行webpack --mode development， 记得要将之前手动引入的script删除，便可以看到dist那里自动生成一个index.html，打开便可以看到。

 

2. 删除指定文件

​​​​​​​i 安装插件

clean-webpack-plugin：编译输出文件前，删除旧文件，当利用文件hash值输出时，可以利用改插件删除原有文件

// 安装插件

npm install clean-webpack-plugin --save-dev

ii​​​​​​​ 配置文件参数

配置webpack.config.js文件

由于版本差异，无法打包时，这里的参数置为空即可，插件默认会清空【dist】文件夹下的内容。

iii 执行和查看

执行webpack --mode development，可以看到dist目录被删除，又生成一个新的dist，之前的js文件已经被删除。

六. 热更新，自动刷新

1. 安装

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务

webpack-dev-server 主要提供两个功能：

• 为静态文件提供服务
• 自动刷新和热替换(HMR)

// 执行以下命令

npm install webpack webpack-dev-server --save-dev

无法正常安装或安装完成无法打包，是因为webpack-cli未安装或者版本和webpack-dev-server不兼容，此时需执行以下命令。

npm install webpack webpack-dev-server webpack-cli --save-dev

同时安装webpack-dev-server 和webpack-cli，可以确保相互间版本的兼容性。

2. 配置文件参数

• 配置webpack.config.js文

• 配置package.json

3. 执行和查看

执行npm run dev 访问  http://localhost:9090/ 即可