今日完成的事

今天继续学习了webpack

打包图片

file-loader url-loader

file-loader可以把图片解析成一个文件输出来

url-loader可以把比较小的图片解析成base64

安装                                              

配置

但是打包出来的图片名跟原先是不一样的，设置图片名

转化为64位

请求服务器上的图片

webpack解析es6与es7

@bable/core   bable核心模块

bable-loader   webpack与bable的桥梁，解析js代码的一个加载器

@babel/preset-env   es6转化成es5插件的一个集合，把es6

转化成es5

安装

配置webpack

bable还需要新建一个.babelrc的文件

打包之后es6的语法就转变为es5的语法了

但是一些高版本的API还是无法转化比如promise等，这时需要其他配置

首先安装npm install --save core-js@3

然后配置.babelrc

Webpack跨域配置，

在devServer里面设置请求代理

Webpack制造假数据

首先在devServer

里面配置before

然后在js里发送请求

配置全局模块，把需要的插件部署到全局。

add-asset-html-cdn-webpack-plugin

安装

配置webpack

ProvidePlugin自动加载模块，不用到处import 需要安装jq的包，这是webpack自带的。

expose-loader 暴露在window下，

安装

代码排查 sourceMap

·         development模式：cheap-module-eval-source-map开发环境

·         production模式：cheap-module-source-map

故意写错一行代码

准确告诉你多少行代码。不同的模式用不同的sourceMap

清除没有用的模块

Tree-shaking &scopeHistiong

在package.json里面配置

排除不想清除的模块

这里指所以文件下除了css文件

热更新不刷新页面情况下，更改代码

Css在不分离的情况下devServer的hot设置为true，

但是有时候会有bug所以需要webpack的内置插件来辅助一下

Js热更新，js热更新需要在js页面设置，

当设置了  new webpack.HotModuleReplacementPlugin()

之后module.hot为true，把需要热更新的js文件放到module.hot里面，第二个参数为一个函数

懒加载

动态加载模块叫做懒加载

懒加载用的是import返回的是一个promise对象，因为default是关键字，所以需要把名字给替换掉，

然后在webpack的出口文件设置chunckfilename

第三方模块分离出来打包

运用optimization里面的一个参数

resolve解析

extensions 添加扩展名进行匹配

alias 设置别名