webpack5出来了，webpack4的基本配置，解析ES6，导入CSS，编译Less，设置图片等等，你掌握了吗？解析ES6理解BabelBabel是一个JavaScript编译器，可以将ES6+转换成浏览器可以识别的代码。Babel在编译时可以依赖.babelrc文件。在设置依赖文件时，会从项目根目录读取.babelrc的配置项。.babelrc配置文件主要是对presets和plugins进行配置。其中，presets可以识别需要转换的源代码中使用了哪些新特性。可以理解为插件的集合，比如babel-preset-es2015，可以将es6转es5；和插件指示babel如何转换代码，例如plugin-transform-arrow-functions将ES6语法转换为ES5。解析ES61，安装依赖npmi@babel/core@babel/preset-envbabel-loader-D2，配置webpack.config.js设置loader模块：{rules:[{test:/.js$/,use:'babel-loader'}]}3.在根目录下创建.babelrc，配置preset-env转换ES6+语法特性react-dom@babel/preset-react-D2，配置解析React的presets{"presets":["@babel/preset-env","@babel/preset-react"]}解析CSS和Lesscss-loader:used加载.css文件并将它们转换为commonjs对象。style-loader：通过style标签将样式插入头部。1、安装依赖css-loader和style-loadernpmistyle-loadercss-loader-D2。在webpack配置项中添加loader配置。由于loader的执行顺序是从右到左执行的，所以会先解析css样式，插入style标签。{test:/.css$/,use:['style-loader','css-loader']}3.less-loader，将less转css。安装less-loader依赖并添加webpack配置{test:/.less$/,use:['style-loader','css-loader','less-loader']}解析图片和字体file-loaderfile-loader:用于处理文件和字体。遵循文件加载器依赖项并配置npmifile-loader-D{test:/\.(png|svg|jpg|jpeg|gif)$/,use:'file-loader'},{test:/\.(woff|woff2|eot|ttf|otf|svg)/,use:'file-loader'}url-loaderurl-loader也可以处理文件和字体。与file-loader相比，优点是可以通过设置configurationConverttobase64自动设置小资源。安装url-loader依赖并配置webpack。{test:/\.(png|svg|jpg|jpeg|gif)$/,use:[{loader:'url-loader',options:{limit:10240}}]}文件监控：watch监控源码更改后，将自动构建一个新的输出文件。可以通过webpack添加配置或通过CLI添加来开启监控模式。这样每次源码变化都需要手动刷新浏览器：1.webpack配置设置module.export={watch:true}2.在CLI中添加参数：--watch。除了通过配置watch参数开启监控，还可以通过watch模式选项的形式自定义watchOptions来自定义监控配置。module.export={watch:true,//只有开启监控模式才有效watchOptions:{ignored:/node\_modules/,//默认为空，设置不监控的文件或文件夹aggregateTimeout:300,//默认300ms，监听变化后等待执行时间poll:1000//默认1000ms，系统轮询询问指定文件是否发生变化}}热更新：webpack-dev的基本原理-服务器热更新热更新大致过程：webpackCompiler，将JavaScript编译成输出的bundle文件。HMRServer，输出热更新文件到HMRRuntime。BundleServer通过提供服务器来提供浏览器对文件的访问。HMRRuntime在开发和打包阶段，将构建输出文件注入浏览器以更新文件更改。webpack-dev-server阶段启动时，源码在文件系统中编译，由webpackCompiler编译器打包，编译后的文件提交给BundleServer服务器；BundleServer可以作为服务器被浏览器访问。当监控到源代码的变化时，它由webpackCompiler编译并提交给HMRServer。通常通过websocket监听源码变更，通过json数据格式通知HMRRuntime。HMR运行时更改包并刷新浏览器。与watch相比，热更新配置不能自动刷新浏览器，webpack-dev-server的优势很明显。webpack-dev-server构建的内容会保存在内存中，所以构建速度更快，浏览器可以自动识别并自动修改。其中webpack-dev-server需要配合webpack内置的HotModuleReplacementPlugin插件使用。1、安装依赖webpack-dev-server并配置启动项npmiwebpack-dev-server-D//package.json"scripts":{"dev":"webpack-dev-server--open"}2、配置webpack，其中webpack-dev-server一般用于开发环境，所以需要设置mode为development。constwebpack=require('webpack')plugins:[newwebpack.HotModuleReplacementPlugin()],devServer:{contentBase:path.join(__dirname,'dist'),//监控dist文件夹的内容hot:true//启动热更新}更多配置项请参考：https://www.webpackjs.com/configuration/dev-server/文件指纹哈希：与整个项目的构建相关，当有文件修改时，整个项目建设的哈希值都会更新。chunkhash：与webpack打包的chunk相关，不同的entry会生成不同的chunkhash，一般用于js打包。contenthash：哈希是根据文件的内容定义的。文件内容保持不变，contenthash保持不变。比如在css的打包中，由于修改了js或者html文件，但是没有修改导入的css样式，文件不需要生成新的hash值，所以适用于css的打包。请注意，文件指纹不能与热更新一起使用。JS文件指纹设置：chunkhashwebpack.dev.jsmodule.export={entry:{index:'./src/index.js',search:'./src/search.js'},output:{path:path.resolve(__dirname,'dist'),filename:'[name][chunkhash:8].js'},}CSSfilefingerprint:contenthash因为上面的方法是通过style标签把css插入到头部，并没有生成单独的css文件，我们可以使用min-css-extract-plugin插件将CSS提取到单独的CSS文件中，并添加文件指纹。1、安装依赖mini-css-extract-pluginnpmimini-css-extract-plugin-D2。配置CSS文件指纹constMiniCssExtractPlugin=require('mini-css-extract-plugin')module.export={module:{rules:[{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader',]},]},plugins:[newMiniCssExtractPlugin({filename:'[name][contenthash:8].css'})]}图片文件指纹设置：hash其中hash对应的hash值文件内容，默认是md5生成的，和上面说的hash值不一样。module.export={模块:{规则:[{测试:/\.(png|svg|jpg|jpeg|gif)$/,使用:[{loader:'file-loader',options:{name:'img/[name][hash:8].[ext]'}}],}]}}代码压缩，js压缩，webpack4.x版本已经内置了uglifyjs-webpack-plugin来实现压缩。CSS文件压缩：optimize-css-assets-webpack-plugin1，安装optimize-css-assets-webpack-plugin和预处理器cssnanonpmioptimize-css-assets-webpack-plugincssnano-D2，配置webpackconstOptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin')module.export={plugins:[newOptimizeCssAssetsPlugin({assetNameRegExp:/\\.css$/g,cssProcessor:require('cssnano')})]}HTML文件压缩：html-webpack-plugin1，安装html-webpack-plugin插件npmihtml-webpack-plugin-D2，配置webpackconstHtmlWebpackPlugin=require('html-webpack-plugin')module.export={plugins:[newHtmlWebpackPlugin({template:path.join(__dirname,'src/search.html'),//使用模板filename:'search.html',//打包后的文件名chunks:['search'],//打包后需要使用chunk(file)inject:true,//默认注入所有静态资源minify:{html5:true,collapsableWhitespace:true,preserveLineBreaks:false,minifyCSS:true,minifyJS:true,removeComments:false}}),]}对应完成demo可以查看代码地址：https://github.com/PCAaron/blogCode/tree/master/webpack/webpack-basic建议后续文章先在GitHub和公众号更新。欢迎star关注提前获取最新文章，谢谢~GitHub：https://github.com/PCAaron/PCAaron.github.io公众号：前端美食合集，也可以直接扫描二维码代码直接跟进webpack学习流程用法webpack高级用法高级用法：webpack构建优化编写可维护的webpack构建配置webpack构建速度和体积优化原理：webpack打包原理推荐阅读babel：https://babeljs.io/docs/en/webpack-dev-middleware：https://github.com/webpack/webpack-dev-middlewarewebpack热更新原理：https://segmentfault.com/a/1190000020310371
