1. 入口文件和出口文件
- 單入口文件
entry 路徑：
- 如果是相對地址，則相對于context的地址，context如果沒有配置，則默認為配置文件所在根目錄地址
- 如果是絕對地址 則不受context的影響，按照絕對地址配置
出口文件配置 output
- filename: 打包之后文件名稱
- path: 打包文件的路徑（絕對路徑）
module.exports = {
entry: './main.js', // 入口文件 main.js
output: {
filename: 'bundle.js', //將main 文件打包之后的文件為bundle.js文件
path: path.resolve(__dirname, 'dist') // 必須絕對路徑
}
};
- 多入口文件
module.exports = {
entry: {
bundle1: './main1.js', //入口文件多個
bundle2: './main2.js'
},
output: {
filename: '[name].js', //出口文件也是多個 參數name的值為bundle1 或 bundle2
path: path.resolve(__dirname, 'dist') // 必須絕對路徑
}
};
2. mode 模式
- development
- production
3. loader
loader 的特點是希望每個loader 的用處單一；loader在配置的時候可以配置成字符串也可以配置成對象，還可以配置成數組的形式；loader的執行順序是從下到上，從右向左執行
- url-loader 打包圖片
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: false // 文件大小超過這個限制之后就保留文件，沒有超過這個大小就會壓縮成base64格式，base64大小會比原始的文件大小大出30%左右
}
}
},
- babel-loader 解析js文件
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
// 用babel-loader 需要吧es6 => es5
presets: [
'@babel/preset-env',
// 支持 jsx
'@babel/preset-react'
],
plugins: [
// 支持es7 語法的
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime'
]
}
}
],
exclude: /node_modules/ // loader不去解析 模塊中的數據 優化
}
- 解析css 文件并將css 文件抽離
style-loader 的作用是將 css文件插入到html文件的header標簽中
{
test: /\.css/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
// css-loader 解析 @import()這種語法
{
loader: 'css-loader',
// 作用是將@import()進來的文件也可以都通過postcss-loader添加上css前綴
options: { importLoaders: 1 }
},
'postcss-loader'
]
},
4. resolve
配置一些別名 和一些默認的擴展名; 別名直接可以再js或jsx 或者vue中使用，默認的擴展名則是在引入這些文件時不需要加入文件的擴展名，會默認按照配置的擴展名進行匹配；
{
alias: {
// 別名
},
extensions: ['.js', '.css', 'vue'] // 默認擴展名
}
5. plugins
插件是個數組 ，執行順序沒有先后
- webpack.ProvidePlugin 給每個引用到的模塊引入組件
new webpack.ProvidePlugin({
// 為每個用到該模塊的引入模塊 DefinePlugin 是定義變量； ProvidePlugin 是引入模塊
$: 'jquery'
}),
- webpack.DefinePlugin
區分不同環境，給不同環境定義不同的變量
new webpack.DefinePlugin({
dev: 'dev',
test: 'test'
}),
6. devServer
開發服務器，需要安裝 webpack-dev-server
{
// 開發服務器 端口
port: 3000,
// 顯示進度信息
progress: true,
// 默認打開的文件夾地址
contentBase: './dist'
// 跨域代理
// proxy: {
// api: {
// target: 'http://localhost:8080',
//pathRewrite: { '/api': '' } //重寫路徑
//}
// },
// 前端模擬數據
// before(app) {
// // 提供的方法
// }
// 有服務端 不想用代理來處理能不能在服務端中啟動webpack端口用服務端端口，直接在服務端調用webapck啟動
}
7. watch
監聽文件變化 然后動態打包
watch: false,
// 監控當前代碼變化參數配置
watchOptions: {},
