Webpack5 第三节

JS资源打包编译

我们知道浏览器最多只能识别ES5的语法，对于版本更高的语法不可以识别，如果要我们的浏览器可以识别这些更高的语法就需要通过webpack的编译功能，保证其在各个浏览器上都可以兼容。

安装插件

cnpm i babel-loader @babel/core @babel/preset-env core-js -D

配置插件

{test: /\.m?js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env', { useBuiltIns:'usage', //按需加载corejs:3,            //指定版本targets: "defaults"}]]}}
}

进行验证

代码风格校验

安装插件

cnpm i eslint eslint-config-airbnb-base eslint-webpack-plugin eslint-plugin-import -D

eslint：检验代码格式的工具

eslint-config-airbnb-base：js代码格式规范；校验的依据https://github.com/airbnb/javascript

eslint-webpack-plugin：webpack的eslint插件

eslint-plugin-import：用于在package.json中读取eslintConfig配置项

在webpack.config.js配置插件

const ESlintPlugin=require('eslint-webpack-plugin')...
plugins:[new ESlintPlugin({fix:true         // 自动修正不符合规范的代码})
]
...

在package.js配置

"eslintConfig":{"extends":"airbnb-base"
}

资源模块Asset Modules

Asset Modules：是一种模块，允许我们在不配置额外loader的情况下使用配置资源文件（字体，图片，图标，html等）。

官方地址：

在 webpack 4 版本，通常使用：raw-loader将文件作为字符串输出；file-loader将文件发送到输出目录；url-loader设定一个临界值（文件大小），大于该值将文件发送到输出目录，否则将文件转为base64合并到 js 文件当中。

在webpack5版本

1. 可以使用Asset Modules 的 4 种新的模块类型来替换这些loader。
2. asset/resource发出一个单独的文件并导出 URL，替换 file-loader。
3. asset/inline导出资源的data URI，替换url-loader。
4. asset/source导出资源的源代码，替换raw-loader，
5. asset自动在导出data URI 和发出单独文件之间进行选择。之前是使用url-loader资产大小限制来实现。

实现图片和字体资源打包

图片资源打包

{test: /\.(png|svg|jpg|jpeg|gif)$/i// asset可以在asset/inline和asset/resource之间进行切换，文件小于8kb时使用asset/inline，否则使用asset/resourcetype: 'asset',              parser: {dataUrlCondition: {maxSize: 8 * 1024,},},generator: {filename: 'images/[name][ext]',},
},

maxSize: 8 * 1024,当其图片大小大于指定值则生成图片类型，小于则嵌套在里面

字体资源打包

{test: /\.(eot|svg|ttf|woff|woff2)$/i,// asset可以在asset/inline和asset/resource之间进行切换，文件小于8kb时使用asset/inline，否则使用asset/resourcetype: 'asset',              parser: {dataUrlCondition: {maxSize: 8 * 1024,},},generator: {filename: 'fonts/[name][ext]',},
},

开发服务器

开发服务器即可用在本地启动一个服务器可用进行日更新或接口的代理。不需要每次修改之后都自己手动的去打包了，直接通自更新完成。

安装插件

cnpm i webpack-dev-server -D

配置

devServer:{// 告诉服务器从哪里提供内容static: {directory: resolve(__dirname, 'output'),},// 打开自动更新liveReload: true,// 打开gzip压缩compress: true,// 指定端口号port: 8888,
},
// 指定构建的环境
target: 'web',

配置完成后使用此命令启动

npx webpack server

出现以上的HMR表示日更新

配置接口代理（proxy），其目的是为了解决跨域问题

proxy: {'/api': {// 访问的目标地址target: 'https://www.taobao.com',// 如果不希望传递/api，则需要重写路径pathRewrite: { '^/api': '' },// 访问https时需要配置secure: false,},// 覆盖源主机名changeOrigin: true,
},