webpack4的配置你都掌握了么？

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

一、安装依赖

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

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

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

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

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

解析React:JSX

一、安装react及@babel/preset-react

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

二、配置解析React的presets

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

解析CSS和Less

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

一、安装依赖css-loader和style-loader

npm i style-loader css-loader -D

二、webpack配置项添加loader配置，其中因为loader的执行顺序是从右 向左执行，因此会先进行css的样式解析后执行style标签的插入。

 

{ test:/.css$/, use: [ 'style-loader', 'css-loader' ] }

三、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添加的方式开启监听模式，该方式源码变化时须要每次手动刷新浏览器：

一、webpack配置设置

 

module.export = { watch: true }

二、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便可以服务器的 方式供浏览器访问。

当监听到源码发生变化时，通过webpack Compiler的编译后提交给 HMR Server，通常经过websocket实现监听源码的变化，并经过json数据的格式通知HMR Runtime，HMR Runtime 对bundle进行改变并刷新浏览器。

热更新配置

相比于watch不能自动刷新浏览器，webpack-dev-server的优点就明显了。webpack-dev-server构建的内容会存放在内存中，因此构建速度更快， 而且可自动的实现浏览器的自动识别并做出变化。其中，webpack-dev-server 须要配合webpack内置的HotModuleReplacementPlugin插件一块儿使用。

一、安装依赖webpack-dev-server并配置启动项

npm i webpack-dev-server -D

// package.json
"scripts": { "dev": "webpack-dev-server --open" }

 

二、配置webpack,其中webpack-dev-server通常在开发环境中使用，因此需 设置mode模式为development。

 

const webpack = require('webpack') plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { contentBase: path.join(__dirname,'dist'),// 监听dist文件夹下内容
        hot: true//启动热更新
}

更多配置项可参考：https://www.webpackjs.com/configuration/dev-server/

文件指纹

hash：整个项目的构建相关，当有文件修改，整个项目构建的hash值就会更新。
chunkhash：和webpack打包的chunk相关，不一样的entry会生成不一样的chunkhash，通常用于js的打包。
contenthash：根据文件内容来定义hash，文件内容不变，contenthash不变。例如css的打包，因为 修改js或html文件，可是没有修改引入的css样式时，文件不须要生成新的哈希值，因此可适用于css的打包。

备注，文件指纹不能和热更新一块儿使用。

JS文件指纹设置:chunkhash

webpack.dev.js

 

module.export = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.resolve(__dirname,'dist'), filename: '[name][chunkhash:8].js' }, }

CSS文件指纹：contenthash

因为上面方式经过style标签将CSS插入到head中并无生成单独的CSS文件，咱们能够 经过min-css-extract-plugin插件将CSS提取成单独的CSS文件，并添加文件指纹。

一、安装依赖mini-css-extract-plugin

npm i mini-css-extract-plugin -D

二、配置CSS文件指纹

const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.export = { module: { rules: [ { test:/\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', ] }, ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name][contenthash:8].css' }) ] }

图片文件指纹设置：hash

其中，hash对应的是文件内容的哈希值，默认为md5生成，不一样于前面所说的hash值。

module.export = { module:{ rules: [ { test: /\.(png|svg|jpg|jpeg|gif)$/, use: [{ loader:'file-loader', options: { name: 'img/[name][hash:8].[ext]' } }], } ] } }

代码压缩

其中js压缩，webpack4.x版本已经内置了uglifyjs-webpack-plugin实现压缩。

CSS 文件压缩：optimize-css-assets-webpack-plugin

一、安装optimize-css-assets-webpack-plugin和预处理器cssnano

npm i optimize-css-assets-webpack-plugin cssnano -D

二、配置webpack

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') module.export = { plugins: [ new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano') }) ] }

html文件压缩：html-webpack-plugin

一、安装html-webpack-plugin插件

npm i html-webpack-plugin -D

二、配置webpack

const HtmlWebpackPlugin = require('html-webpack-plugin') module.export = { plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname,'src/search.html'), // 使用模板
             filename: 'search.html',    // 打包后的文件名
             chunks: ['search'], // 打包后须要使用的chunk(文件)
             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的构建优化

• 编写可维护的webpack构建配置
• webpack构建速度和体积优化

原理篇：webpack的打包原理

 

推荐阅读

Babel:https://babeljs.io/docs/en/

webpack-dev-middleware:https://github.com/webpack/webpack-dev-middleware

webpack热更新原理:http://www.javashuo.com/article/p-cvazksea-cu.html