webpack在配置文件：webpack.base..conf.js中将模块分为几大块，主要分为 ：entry/output/module/plugins
modules.export={
entry:{
/* 入口文件 */
},
output:{
/* 出口文件 */
},
module:{
/* Loader less、sass、vue、es6等转化*/
rules:[{},{},{}]
},
plugins:[
/* 插件 */
],
}
-
entry----入口文件
入口文件：Webpack 会递归的探索出 入口文件中所依赖的模块，并按照顺序 利用 Loader 进行处理，常用的3种格式
// 单入口文件
entry: "app.js"
//多入口文件
entry: ["app.js", "main.js"];
// 对象形式的多入口文件
entry: {
app: "./src/js/app.js",
main: "./src/js/main.js"
}
2.output --- 出口文件
出口文件： webpack打包后文件的具体配置，主要用于build之后版本
// 打包后的文件路径 ，通常会从 config配置文件中取build配置下的 assetsRoot
//assetsRoot: path.resolve(__dirname, '../dist'),
path: config.build.assetsRoot
// 打包后文件的名字
//1.[name].js 以入口文件名
// 2.[hash].js 以打包后的hash值
// 3.[chunkhash] 以改模块打包后的哈希值
filename: '[name].js',
// 上线时的公共路径，主要应用于线上 通常是 '/'
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
// 按需加载模块事输出的文件名称
chunkFilename: 'js/[name].js'
3.loader --- 编译转化
loader： 将一切浏览器不支持的语言，处理成 浏览器可以支持。
// 基本结构
module:{
rules:[
{
test:/\.xxx$/,//以xxx结尾的文件
loader: "xxx-loader", // 用于处理转化的工具
exclude: {排除的路径}, // 这些路径下的文件不做处理
include: {包含的路径},// 对该路径下的内容进行转化
options: {Loader配置} // 接口参数配置
}
]
}
-
plugins -- 插件
插件：我们使用 Loader 处理不同类型的文件，当有某种其他方面的需求时，比如 抽离 CSS 、生成多页面 HTML
plugins:[
//主要用于压缩文件
new UglifyJsPlugin({/*options*/});
//用于拷贝文件 主要用于拷贝static静态文件
new CopyWebpackPlugin({/*options*/})
// 热更新插件
new webpack.HotModuleReplacementPlugin()
// 主要用于生成HTML，可以规定 模板HTML，也可以为 模板传入参数，压缩文件等
new htmlWebpackPlugin({//打包后的文件名
filename: "index.html",
//模板
template: "index.html",
//为true自动生成script标签添加到html中
//或者写 body/head 标签名
inject: false,//js的注入标签
//通过<%= htmlWebpackPlugin.options.title %>引用
title: "参数title",
//通过<%= htmlWebpackPlugin.options.date %> 引用
date: new Date()
//网站的图标
favicon: 'path/to/yourfile.ico'
//生成此次打包的hash
//如果文件名中有哈希，便代表有 合理的缓冲
hash: true,
//排除的块
excludeChunks: [''],
//选中的块 与入口文件相关
chunks: ['app','people'],
//压缩
minify:{
removeComments: true,collapseWhitespace: true,
minifyJS: true, minifyCSS: true,minifyURLs: true,
}
}) ]
