+-
四个核心概念
entry(入口)
entry是整个配置文件的入口，没有之一。
entry有两种入口，四种配置。
两种入口
单文件入口 多文件入口四种配置
value为字符串 value为对象 value为数组 函数代码演示
「第一种配置（字符串），主要用在单页面应用」
const { resolve } = require('path')
module.exports = {
entry:resolve(__dirname,'src/index.js')
} 「第二种配置（对象），主要用在多页面应用」
const { resolve } = require('path')
module.exports = {
entry:{
test:resolve(__dirname,'src/index.js'),
test2:resolve(__dirname,'src/index2.js')
}
} 「第三种配置（数组），这种配置可能比较少用，也是用在单页面应用，这种配置主要将数组的1-n项，打包到0项上，有时会用在js兼容，动态链DLL上」
const { resolve } = require('path')
module.exports = {
entry:[resolve(__dirname,'src/index.js'),resolve(__dirname,'src/index2.js')],
} 「第四种配置（函数），函数只要返回上面三种的其中一种就可以」
const { resolve } = require('path')
module.exports = {
entry:()=>'./src/index.js',
} output
既然有入口，那就肯定有出口啦！就好像人，要吃饭也要拉*。这里的出口就是打包好的东西要把它放在哪里。
output的常用配置
path(输出的位置，默认dist目录下) filename(输出文件的乳名，默认main) pulibPath(指定打包后的文件应该在哪里引用，一般用在生产环境,默认空)代码演示
const { resolve } = require('path')
module.exports = {
output:{
path:resolve(__dirname,'dist'),
filename:'bundle.js',
publicPath:'http:baidu.com'
}
} 「filename的几种配置，可以直接像上面一样写死，也可以文件名加hash值动态设置，比如这样」
module.exports = {
output:{
filename:'[name]_[hash].js'
}
} 哈希值
webpack提供了以下几种哈希值：
hash chunkhash (同一个chunk同一个hash) contenthash (一个文件一个hash)module
module.rules就是loader的配置位置，loader用于解决一些代码的兼容性。
module.rules的常用配置
test (loader的匹配规则) exclude (排除哪些文件不需要匹配) include (只匹配哪些文件) loader (使用哪个loader,单个) use (使用哪些loader,多个)代码演示
module.exports = {
module:{
rules:[
{
test:/.html$/,
exclude:/node_modelus/,
include:/src/,
loader:'html-loader',
},
{
test:/.css/,
use:['style-loader','css-loader']
}
]
}
} loader的常用配置
loader (使用哪个loader) options (传给loader的参数，loader的不同，options的参数也不同)代码演示
module.exports = {
module:{
rules:{
test:/.js$/,
exclude:/node_modelus/,
use:[
// 没参数
'thread-loader',
// 有参数
{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
]
}
}
} plugins
plugins是配置插件的位置，它是一个数组,插件大多数情况是用于代码的优化。
插件没有没有统一的用法，因插件而异。硬是要说它们有相同之处那就是 new xxx
一些常用的loader
css相关
style-loader ( 处理style内联样式 ) css-loader （处理.css文件） postcss-loader （处理css兼容） less-loader （处理.less文件） sass-loader （处理.sass/.scss文件）let comment = [
"style-loader",
"css-loader",
{
loader:"postcss-loader",
options:{
postcssOptions:{
plugins:['postcss-preset-env']
}
}
}
]
module.exports = {
module:{
rules:[
{
test:/.css/,
use:[
...comment
]
},
{
test:/.less$/,
use:[
...comment,
'less-loader'
]
}
]
}
} js相关
babel-loader @babel/core @babel/preset-env @babel/polyfillmodule.exports = {
entry:['@babel/polyfill','./src/index.js']
...
module:{
rules:[
{
test:/.js$/,
use:[
{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
// 或者
presets:[['env',{module:false}]]
}
}
]
}
]
}
} 文件相关
url-loader file-loader html-loader module.exports = {
...
module:{
rules:[
{
test:/.(png|jpg|gif)$/,
use:[
{
loader:file-loader,
options:{
limit:4 *1024,
name:'img/[name]_[hash:10].[ext]'
}
}
]
},
{
test:/.html$/,
loader:'html-loader'
}
]
}
} vue相关
vue-loader vue-style-loader module.exports = {
...
module:{
rules:[
{
test:/.vue$/,
loader:'vue-loader'
},
{
test:/.css$/,
use:[
'vue-style-loader',
'css-loader'
]
}
]
}
} 