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 -D
webpack.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 图片使用hash
modulle.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和cssnano
module.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()
]
}
