- webpack 默認只支持js json格式的文件
- loader 可以讓wbpack支持解析更多格式的文件 比如.css .vue .jsx .ts .sass
- plugin 是作用于webpack整個打包生命周期的機制 每一個插件都會對準(zhǔn)一個生命周期 比如webpack打包前 生成資源前
- bundle是打包文件 包含多個chunks代碼塊攒庵，a.js經(jīng)過處理之后生成的代碼片段是chunk
- 配置文件主要分為5部分 ：entrry mode output module plugins
1.entry
entry:string array obj{}
entry: './src/index.js'
entry: ['./src/a.js','./src.b.js']
// 對象的方式是多入口 但是對應(yīng)的出口也要有多個
entry: {
build: './src/index.js',
a: './src/a.js',
b: './src/b.js',
},
output: {
// [name]占位符
filename: '[name].js',
}
- mode
development:相對來說可讀性更好
production: 生產(chǎn)模式可讀性不強
- output
output: {
// 把輸出的打包文件放在哪里疮跑？ path必須是絕對路徑
path: path.resolve(__dirname, './build'),
//打包好的文件叫什么
filename: 'build.js',
// [name]占位符 對應(yīng)多入口的時候的多出口文件
// filename: '[name].js',
},
- module
module: {
// css
rules: [
{
test: /\.css$/,
// loader 有執(zhí)行順序 自后往前
// 官方推薦一個loader 只做一件事情 style-loader 是將字符串放在html標(biāo)簽里面 css-loader是將css文件轉(zhuǎn)換為bundle文件
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
],
},
- plugins
plugins: [
// 每次打包都會清空輸出的文件夾
new CleanWebpackPlugin(),
//htmlwebpackplugin會在打包結(jié)束后溉痢，?自動?生成?一個html?文件，并把打包?生成的js模塊引?入到該html 中赵辕。
new htmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
],
