01.Webpack基础知识

插件和优化
webpack4删除了 CommonsChunkPlugin 插件,它使用内置API optimization.splitChunks 和optimization.runtimeChunk，这意味着 webpack 会默认为你生成共享的代码块。
其他插件的变化：
- NoEmitOnErrorsPlugin 废弃->使用optimization.noEmitOnErrors替代
- ModuleConcatenationPlugin 废弃>使用optimization.concatenateModules替代
- NamedModulesPlugin 废弃>使用optimization.namedModules替代
- uglifyjs-webpack plugin升级到了v1.0版本
开箱即用WebAssembly
WebAssembly(wasm) 会带来运行时性能的大幅度提升，由于在社区的热度，webpack4对它做了开箱即用的支持。你可以直接对本地的wasm模块进行 import 或者 export 操作，也可以通过编写 loaders 来直接import C++、 C或者Rust。
支持多种模块类型
共五种:
- javascript/auto: 在webpack3里，默认开启对所有模块系统的支持。包括CommonJS. AMD、ESM.
- javascript/esm: 只支持ESM这种静态模块。
- javascript/dynamic: 只支持CommonJS和AMD这种动态模块。
- json：只支持JSON数据，可以通过require和import来使用。
- webassembly/experimental: 只支持wasm模块，目前处于试验阶段。
0CJS (0配置)
0CJS 的含义是0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。为了做到0配置，webpack4不再强制需要 webpack.config.js 作为打包的入口配置文件了，它默认的入口为 "./src/index.js' 和默认出口 './dist/main.js'，对小项目而言是福音，不过还是建议手动配置。
新的插件系统
webpack4对插件系统进行了不少修改,提供了针对插件和钩子的新API。
变化如下:

扫描二维码关注公众号，回复： 10649671 查看本文章
- 所有的hook由hooks对象统-管理，它将所有的hook作为可扩展的类属性。
- 当添加插件时，必须提供一个插件名称。
- 开发插件时，可以选择 sync/callback/promise 作为插件类型。
- 可以通过this.hooks = { myHook: new SyncHook1…) }来注册hook了.

使用WebPack4注意点

需要 nodeJS 版本 >= 8.9.4，因为新版本使用了很多JS的信誉大，新版本的node做了优化

Webpack可以完成哪些事情

代码转换：ES6转ES5、Less，Sass等转CSS

文件优化：

代码分割：

模块合并：

自动刷新：代码热更新

代码校验：校验代码规范

自动发布：通过手写插件可以实现自动发布

安装Webpack

全局安装容易造成版本不一致，所以选择在项目中安装

# -D 表示开发依赖，上线版本不需要
yarn add webpack webpack-cli -D

0基础使用Webpack

新建文件夹(项目目录)
进入目录，执行 yarn init 初始化项目，生成 package.json 项目配置文件
安装开发依赖 webpack。yarn add webpack webpack-cli -D，生成node_modules文件夹并下载依赖
在根目录下新建 src 文件夹，在 src 下新建 index.js 并输出一句话。console.log('I am webpack')
测试打包。npx webpack 这条命令可以使用项目中本店安装的 webpack 进行打包，从而避免全局安装 webpack造成的版本不一致问题。结果默认会在根目录下生成 dist/main.js 文件。

注：手动配置 webpack.config.js 之后会按照配置的入口和出口生成相应的文件

`webpack.config.js` 的编写(node语法)

`webpack-dev-server` 工具监听代码的更新

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

本地安装

npm i webpack-dev-server -S -D

配置脚本

在 package.json 中配置脚本，执行 webpack-dev-server 命令。webpack-dev-server 和webpack 命令用法相同的

"script":{
	"dev": "webpack-dev-server"
}

运行

执行 npm run dev ，项目开始编译并且以本地服务器方式运行在8080端口(根目录托管在8080首页)

编译结果

运行结果

webpack-dev-server 参数配置

–open 编译完成自动打开浏览器

–port 3030 自定义端口号，默认是8080

–hot 热加载，代码局部更新时（样式）无需刷新浏览器自动加载，实际上这时候生成了 补丁包，避免了重新打完整包，如下图：

–contentBase src/views 默认打开访问的路径

注意：webpack-dev-server 打包生成的文件并不是 dist/dist.js 。为了提高效率，会在根目录下生成 dist.js 我们在浏览器中直接访问 localhost:8080/dist.js 就能够直接看到打包好的js文件，但在项目文件中并看不到。所以我们在引用的时候可以直接引用根目录下的 dist.js 文件。

在 `webpack.config.js` 中配置

一般不会直接在 package.json 直接配置 webpack-dev-server，而是选择在webpack.config.js 中添加配置项

webpack.config.js

module.exports={
	devServer:{
		open: true, //自动打开浏览器
		port: 3030, //端口号
		hot: true, //热更新（仅仅设置这里是不够的）
		contentBase: "src" //首页默认路径
	}
}

热更新配置

devServer中配置 {hot:true}

devServer:{
	hot: true
}

引入webpack

const webpack = require('webpack')

插件配置

plugins:[{
    new webpack.HotModuleReplacementPlugin() //创建热更新(替换)模块对象，内置在webpack中，不需要单独引入
}]

小天才程序员

发布了36 篇原创文章 · 获赞 12 · 访问量 9413

私信关注

文章导航

day01

学习基础

学习目标

webpack简介

WebPack4新特性