介紹
webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.
核心概念
1. 入口(Entry)
//單一入口
module.exports={
entry:'./path/to/my/entry/file.js'
};
//多入口
module.exports={
entry:{
index: './path/to/my/entry/file.js',
test: './path/to/my/entry/file.js',
}
};
２. 出口(Output)
//輸出
module.exports={
entry:'./path/to/my/entry/file.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'my-first-webpack.bundle.js'
}
};
//輸出
module.exports={
entry:{
index: './path/to/my/entry/file.js',
test: './path/to/my/entry/file.js',
},
output:{
path:path.resolve(__dirname+'/dist'),
filename:'[name].js' //[name]是當(dāng)前被編譯的js入口的文件名
},
};
３. Loader
module.exports={
entry:{
index: './path/to/my/entry/file.js',
test: './path/to/my/entry/file.js',
},
output:{
path:path.resolve(__dirname+'/dist'),
filename:'[name].js' //[name]是當(dāng)前被編譯的js入口的文件名
},
module:{
rules:[//轉(zhuǎn)換
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{
loader:'css-loader',
options:{
modules:true
}
}
]
}
]
}
};
４. 插件(Plugins)
module.exports={
entry:{
index: './path/to/my/entry/file.js',
test: './path/to/my/entry/file.js',
},
output:{
path:path.resolve(__dirname+'/dist'),
filename:'[name].js' //[name]是當(dāng)前被編譯的js入口的文件名
},
module:{
rules:[//轉(zhuǎn)換
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{
loader:'css-loader',
options:{
modules:true
}
}
]
}
]
}荆烈，
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
