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介绍
- 安装：
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.json2.
npm install url-loader -S安装完之后记录到配置文件
package.json3.还需安装
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-loader1.在
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 -D1.先在
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
