webpack 笔记

webpack.config.json

entry:入口，可有多个

devtool:'inline-source-map'      source map，遇到错误时，追踪到原文件，而不是编译后的文件

devServer:{contentBase:'编译后的目录，如dist'}        需要下载webpack-dev-server ,命令：webpack-dev-server --open,启动一个web服务器

plugins:[

new CleanWebpackPlugin(['dist']),   需要下载clean-webpack-plugin,设置清理目录，只留下网页需要的文件，清理掉不需要的文件
new HtmlWebPackPlugin({　　　　需要下载html-webpack-plugin，将html重新生成至编译后的目录。
title:'Output Management'
})

]

module: {
rules: [
{
test: /\.css$/,     正则表达式，匹配.css为后缀的文件
use: [
'style-loader',     需下载的模块名称
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,    图片
use: [
'file-loader'                            需下载的模块名称
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,     字体
use: [
'file-loader'　　　　　　　　 需下载的模块名称
]
},
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader'
 ]
 },
 {
 test: /\.xml$/,                        
+use: [
 'xml-loader'
 ]
}
]
}

转载于:https://www.cnblogs.com/spaceMM/p/10340756.html