webpack5都出了，webpack4的的根基配置，解析ES6，引入CSS，编译Less，设置image等等，你城市了么？

?解析ES6 了解Babel

Babel是一个JavaScript编译器，可以实现将ES6+转换成浏览器能够 识另外代码。

Babel在执行编译时，可以依赖.babelrc文件，当设置依赖文件时， 会从项目的根目录下读取.babelrc的配置项，.babelrc配置文件 主要是对预设(presets)和插件(plugins)进行配置。

此中，presets可以标识需要转换的源码使用了哪些新特性， 可以理解为一系列plugins的调集，例如babel-preset-es2015，可以 将es6转换为es5；而plugins则指示babel如何对代码进行转换， 例如plugin-transform-arrow-functions可将ES6语法转换为 ES5。

解析ES6

1、安置依赖

npm i @babel/core @babel/preset-env babel-loader -D

2、配置webpack.config.js设置loader

module: { rules: [ { test: /.js$/, use: ‘babel-loader‘ } ] }

3、根目录创建.babelrc，并配置preset-env对ES6+语法特性进行转换

{ "presets": [ "@babel/preset-env" ] }

解析React:JSX

1、安置react及@babel/preset-react

npm i react react-dom @babel/preset-react -D

2、配置解析React的presets

{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }

解析CSS和Less

css-loader：用于加载.css文件并转换成commonjs东西。
style-loader：将样式通过style标签插入到head中。

1、安置依赖css-loader和style-loader

npm i style-loader css-loader -D

2、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-loader

file-loader:用于措置惩罚惩罚文件及字体。

凭据file-loader依赖并配置

npm i file-loader -D

{ test: /\.(png|svg|jpg|jpeg|gif)$/, use: ‘file-loader‘ }, { test:/\.(woff|woff2|eot|ttf|otf|svg)/, use:‘file-loader‘ }

url-loader

url-loader也可以措置惩罚惩罚文件及字体，比拟file-loader的优势就是可以通过设置配置， 设置小资源自动转换为base64。

安置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-server 热更新基来源根底理

热更新概略流程：

webpack Compiler，将JavaScript编译成输出的bundle文件。
HMR Server，将热更新的文件输出到HMR Runtime。
Bundle Server，通过供给处事器的形式，供给浏览器对文件的访谒。
HMR Runtime，开发打包阶段时，将构建输出文件注入到浏览器，更新文件的变革。

当启动webpack-dev-server阶段时，将源码在文件系统进行编译，通过webpack Compiler编译器 打包，并将编译好的文件提交给Bundle Server处事器；Bundle Server即可以处事器的 方法供浏览器访谒。