WebPack4总结

一、webpack4新特性

1.mode属性

image.png
2.插件和优化
image.png
3.开箱即用webassembly
image.png
4.支持多种模块类型
image.png
5.0C JS
image.png
6.新的插件系统
image.png
注意：当使用webpack4时，确保使用node.js的版本要>=8.9.4，因为webpack4使用了很多js新的语法，它们在新版本的v8里经过了优化

二、webpack介绍

1. 安装：npm install webpack-cli -g
   基本使用：webpack 输入文件.js 输出文件.js

三、webpack 出入口文件配置

webpack.config.js

image.png
使用webpack生成对应的dist文件
image.png
image.png
提示没有使用mode，webpack是production生产模式
image.png
解决方法：
使用webpack --mode development
改成开发模式
注意：在开发模式中可以帮我们debug，可以帮我们查找问题；上线的时候要用生产模式，这样体积会更小
生产模式production命令：webpack；
开发模式development命令：webpack --mode development

四、loader

1.url-loader
作用：当文件大小超过指定size时，就会转成DataUrl，也就是base64；过去我们使用精灵图或者雪碧图技术，很多图片要是同时加载的话会造成页面卡顿，但使用经络图技术，把多个图片合成成一张图片上，只需加载一次，但这种方式的缺点是使用的时候使用background属性，还需调整位置，非常不便，尤其是放大的时候；因此我们可以把图片打包到js或者css文件中去，这样就合成到某个文件中，这样的n多个图片不是以武力文件存在，而是以base64的形式存在于某个文件
eg：

image.png image.png
使用webpack命令，提示没有找到url-loader
image.png
安装：1.先npm init -y生成配置文件package.json
2.npm install url-loader -S
安装完之后记录到配置文件package.json
3.还需安装file-loader：npm install file-loader -S
image.png

再在终端进行webpack打包

image.png
此时两张图片没有被合成到dist文件夹下面的input.bundle.js文件中，解决方法：
image.png
将limit修改为118192可发现设置limit大小边界，小于边界的会变成base64文件，大于边界的会变成物理文件

五、babel-loader

安装

npm install -D babel-loader @babel/core @babel/preset-env webpack
推荐安装第一个最新版本
在上一节课的基础上，input.js文件中加上异步操作

image.png
再用webpack命令打包，生成的dist文件夹下面的input.bundle.js文件中
image.png
显示async await无法转化，因为await是在es6中出现，es5并不支持，则需要将es6转化成es5可以支持的，则需要babel-loader
安装好babel-loader在webpack.config.js文件中加入规则： image.png
后再webpack打包：
image.png
这样async await消失了，说明es6语法转化成es5了，低版本也可以支持了

那么，如果想支持react怎么转换呢
在根目录下新建ReactHello.jsx文件

image.png
并在input.js里面引入ReactHello.jsx文件
image.png
安装npm install @babel/plugin-transform-react-jsx -D
在webpack.config.js文件里加入
image.png
也要设置mode:'development'
再webpack打包，转接成这样
image.png
六、加载器scss-loader
1.在output.bundle.js文件中加入规则 image.png

2.安装sass-loader：
先安装淘宝镜像npm install -g cnpm
再 cnpm install sass-loader node-sass -D
3.安装style-loader css-loader:安装命令npm install style-loader css-loader -D
4.创建test.scss文件

image.png
5.在input.js文件中引入scss样式 image.png
6.运行webpack
image.png
七、插件minCssExtract
安装命令：npm install mini-css-extract-plugin -D
1.先在webpack.config.js文件引入mini-css-extract-plugin
image.png
use里面也要修改
image.png
2.webpack打包，可以发现打包之后dist文件夹多了个main.css文件，也就是说，将css这部分从output.bundle.js文件中抽离出来，更好地分离代码，减少output.bundle.js文件空间
image.png
image.png

八、插件DefinePlugin

1.在webpack.config.js配置文件中引入

image.png image.png
2.在input.js文件中将地址改成SERVICE_URL
image.png
3.用webpack命令打包
image.png
注意：平时的开发过程中，开发模式和生产模式是分开的文件，我们只需要在对应的配置文件webpack.config.js中修改地址就可以，前端input.js文件中将地址设置SERVICE_URL则不需要改变，这样代码也好维护。

九、插件HtmlWebpackPlugin

为了生成html文件
1.安装： npm install html-webpack-plugin - D
2.在配置文件设置

image.png

3.执行webpack打包，可以发现dist文件夹下面生成了index.html文件，并且自动生成输入输出文件

image.png
image.png

不需要自动生成，该怎么设置？

在配置文件webpack.config.js中设置需要自定义的title

image.png
image.png
再进行webpack打包，生成的index.html文件的title就把修改了，jquery插件，输入输出文件也生成了

那么，怎么渲染render到页面上呢？
在input.js文件中引入

image.png
再进行webpack命令打包
image.png
这样很像一个项目搭建出来了，但我们每次启动还需要重新编译，那就需要热替换

十、热替换

1.安装webpack-dev-server:命令
npm install webpack-dev-server -D作用是启动服务
2.配置webpack.config.js文件，server和output

image.png
3.将配置文件里面的"scripts"改成下面的启动命令，终端在启动时会在node-modules找到webpack-dev-server，并启动 webpack-dev-server
image.png
image.png
4.执行npm run start,在本地即可访问
image.png
注意：不用在配置文件webpack.config.js的devServer中加入hot:true

这样就完成了热替换，修改html时，会自动刷新页面，不用重新用命令行启动

十一、最后，webpack4实战

思路：先升级webpack,再升级webpack-server,因为这两个都是同步的；

（cnpm install对比版本更新；再根据报错提示把对应的组件进行版本升级。要更新到最新的版本加上@latest ，比如：cnpm install css-loader@latest -D
npm start执行
最后打包npm run build）
坑：在安装``

image.png
image.png
image.png