01 entry打包的入口文件：
单入口entry是一个字符串:适用于单页面项目module.exports = {entry:'./src/index.js'}多入口entry是一个对象module.exports = {entry:{index:'./src/index.js',app:'./src/app.js'}}02 output打包的出口文件：
单入口配置module.exports = {entry:'./src/index.js'output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'
}}多入口的配置 需要通过站位符【name】来进行站位，相当于是在dist输出两个出口的文件module.exports = {entry:{app:'./src/app.js',index:'./src/index.js'}output:{path:path.resolve(__dirname,'dist'),filename:'[name].js'
}}03 loaders：webpack只支持js和json文件类型，loaders需要把其他文件进行转化为有效的模块
const path = require('path')module.exports = {module:{rules:[ test指定对应的规则 use加载对应的loader{test:/\.txt$/,use:'raw-loader'}]}}
04 plugin插件的配置：
const path = require('path')module.exports = {plugins:[ 放到plugins的数组中new HtmlWebpackPlugin({template:'./src/index.html'})]}
05 modu：用来指定当前的构建环境：production development node
mode模式默认为production设置 process.env.NODE_ENV的值为 development.开启NamedChunksPlugin和NamedModulesPlugin设置 process.env.NODE_ENV的值为 production.开启FlagDependencyUsagePlugin ,FlagIncludedchunksPluginModuleConcatenationPlugin ,NoEmitOnErrorsPlugin0ccurrenceOrderPlugin,sideEffectsFlagPlugin和TerserPlugin。none：不开启任何优化选项06 解析ES6以及React JSX语法：
解析ES6---需要安装npm install @babel/core @babel/preset-env babel-loader -Dwebpack.config.js配置 modele.exports = {module:{rules:[{test:/\.js$/,use:'babel-loader'}]}}bebel的配置文件是.babelrc {"presets":["@babel/preset-env"],"plugins":["@babel/proposal-class-properties"]
}解析react jsx的语法： 需要再安装 npm i @babel/preset-react:在 .babelrc文件中增加@babel/preset-react{"presets":["@babel/preset-env","@babel/preset-react"],"plugins":["@babel/proposal-class-properties"]
}07 react使用的案例 ： 需要安装react react-dom插件, src创建search.js文件
search.js文件代码如下import React from 'react'import ReactDom from 'reacr-dom'class Search extends React.Component {render(){return {<div>我是react</div>}}}RactDom.render(<Search/>,document.getElementById('root'))再执行 npm run build的命令 在dist目录下会创建出一个search.js文件，index.html页面中引入文件
<html><body><div id='root'></div><script src='./dist/search.js'></script></body></html>08 解析css与less，需要使用style-loader css-loader less-loader
module.exports = {module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]}}09 解析图片与字体资源
module.exports = {module:{rules:[{test:/\.(png | svg | jpg | gif)$/,use:['file-loader']},{test:/\.(woff | woff2 | eot | ttf | otf)$/,use:['file-loader']}// 这里是解析base64 {test:/\.(png | svg | jpg | gif)$/,use:[{loader:'url-loader',options: {limit:10240}}]},]}]}}10 webpack中的文件监听：源码发生变化 自动构建输出新的文件；
1 第一种 在package.json文件中： 缺点 还需要自己手动刷新浏览器“build”：“webpack --watch”2 第二种 在webpack.config.js中设置 module.exports = {watch:true, watchOptions:{ignored:/node_modules, aggregateTimeout:300, 监听到变化发生后300ms后再去执行poll:1000 判断文件是否发生变化 默认美妙访问1000次}}11 webpack热更新。代码更新后会自动刷新浏览器不用手动刷新，需要借助webpack-dev-server
在package.json文件中进行配置："scripts":{"dev":"webpack-dev-server --open"}在webpack.config.js文件中配置const webpack = require('webpack')plugins:[new webpack.HotModuleReplacementPlugin()
],devServer:{contentBase:'./dist',hot:true}12 文件指纹：打包输出的文件名会有一个后缀：<src="index_0123223db.js?bid=123">
hash:和整个项目的构建有关，只要项目文件有修改，整个项目构建的hash值会更改chunkhash：和webpack打包的chunk有关 不同的entry会生成不同的chunkhash值contenthash：根据文件内容来定义hash 文件内容不同contenthash不变使用的方法 js使用chunckhash css使用contenthash 图片使用hashmodulle.exports = {output:{filename:`[name]_[chunckhash:8].js`,path:__dirname+'/dist'}，plugins:[new MiniCssExtractPlugin({filename:`[name]_[contenthash:8].css`})
]，module:{rules:[{test:/\.(png | svg | gif)$/, use:[{loader:'file-loader', options:{name:`img/[name]_[hash:8].[ext]`}}]}]}}这里需要注意的是如果是要在dist目录下输出单独的css文件 需要将use:['style-loader'换成MiniCssExtractPlugin.loader]13 代码压缩[html,css,js]
webpack内置了uglifyjs-webpack-plugin插件，打包后的代码会自动压缩js代码。html的压缩：修改html-webpack-plugin 设置压缩的参数module.exports = {entry:'./src/index.js',output:{path:__dirname+'/dist',filename:'[name]_[chunkhash:8].js'},plugins:[new HtmlWebpackPlugin({template:path.join(__dirname,'src/search.html'),filename:'search.html',chunks:['search'],inject:true,minify:{html5:true,collapseWhitespace:true,preserveLineBreaks:false,minifyCSS:true,minifyJS:true,removeComments:false}})]}css的压缩需要使用optimize-css-assets-webpack-plugin和cssnanomodule.exports = {entry:'./src/index.js',output:{path:__dirname+'/dist',filename:'[name]_[chunkhash:8].js'},plugins:[new OptimizeCssAssetsPlugin({assetNameRegExp:/\.css$g/,cssProcessor:require('cssnano')})]}
14 自动清理构建目录产物 ：每次构建的时候还需要手动的删除dist目录下的文件
借助与webpack的clean-webpack-plugin的插件每次构建可以自动删除dist目录的文件module.exports = {plugins:[new CleanWebpackPlugin()]}
![[QOpenGLWidget+QMouseEvent]实时绘制长方形](https://img-blog.csdnimg.cn/direct/cdc60eb427864a2c9f8cbce02bdab2a5.png)
