webpack 笔记

最新推荐文章于 2024-11-16 22:44:28 发布

bajiying1260

最新推荐文章于 2024-11-16 22:44:28 发布

阅读量65

点赞数

文章标签： webpack json ViewUI

原文链接：http://www.cnblogs.com/spaceMM/p/10340756.html

版权

本文详细解析了webpack.config.json的配置项，包括入口(entry)、源代码映射(sourcemap)、开发服务器(devServer)的设置，以及如何使用各种loader处理不同类型的资源文件，如CSS、图片、字体、CSV和XML等。

摘要由CSDN通过智能技术生成

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'
]
}
]
}