安装
1.cnpm i webpack webpack-cli
2.模块局部安装会在node_modules/.bin/webpack目录创建软链接
基础
entry
依赖入口
// 单入口，SPA
entry: 'xx/xx.js'
// 多入口，MPA
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
output
指定打包后的输出
output: {
filename: '[name].js',
path: path.resolve(__dirname,'dist') // 单入口可以写死文件名，多入口一定要使用占位符[name]，来自动生成多个文件
}
Mode
有开发(development)和生产(production)模式
Plugins
Loaders
webpack开箱即用只支持JS和JSON两种文件类型，通过Loader去支持其他文件类型并把他们转化为有效的模块，并且可以添加到依赖图中。
本身是一个函数，接受源文件作为参数，返回转化的结果。
例如： babel/ts-loader、css/less/scss-loader、url/file-loader、raw-loader(将.txt文件以字符串的形式导入)、thread-loader(多进程打包js和css)
module: {
rules: [
{ test: /.txt$/,use: 'raw-loader' },
{ test: /.css$/,use: [
loader: 'css-loader',
options: {
modules: {
localIdentName: '[path][name]__[hash:base64:5]'
}
}
]}
]
}
解析ES6
1.使用babel-loader、babel的配置文件.babelrc
2.安装babel-loader、@babel/core@babel/preset-env
// webpack.config.js
module: {
rules: [
{ test: /.js?x$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
// .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
// 各种插件
"@babel/propsoal-class-properties"
]
}
css/less/scss-loader
1.css-loader用于加载.css文件，并且转换成common对象
2.style-loader将样式通过style标签，插入到head中
// use: [ loader1,loader2,loader3 ] , loader的处理顺序是3>2>1 , 从后往前
module: {
rules: [
{
test: /.s?css$/,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader
{
loader: 'css-loader',
options: {
importLoaders: 1,
// css模块化使用
modules: {
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
},
'postcss-loader'
]
}
]
}
url/file-loader
1.用于处理文件、图片、字体、多媒体
2.url-loader实现较小的图片转成base64，插入到代码中，当超过限制的limit后，会自动降级到file-loader
{
test: /\. (png|jpg|jpeg|gif|eot|woff|woff2|ttf|svg|otf) $/,
use: [
loader: 'url-loader',
options: {
limit: 10 * 1024, // 10k
name: isDev ? 'images/[name].[ext]' : 'images/[name].[hash.[ext]',
publicPath: idDev ? '/' : 'cdn地址',
},
// production , 用于图片压缩
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true
}
}
]
}
