- entry
- output
- mode
- loader
- plugin
- chunk
- module
- bundle
entry:
指定webpack打包???件:Webpack 执?构建的第?步将从 Entry 开始，可抽象成输?
//单?? SPA，本质是个字符串
entry:{index: './src/index.js'
}
==相当于简写===
entry:"./src/index.js"
//多?? entry是个对象 利于seo
entry:{index:"./src/index.js",login:"./src/login.js"
}output:
打包转换后的?件输出到磁盘位置
:
输出结果，在
Webpack
经过?系列处理并得出最终想要的代码后输
出结果。
output: {filename: "bundle.js",//输出?件的名称path: path.resolve(__dirname, "dist")//输出?件到磁盘的?录，必须是绝对路径
},//多??的处理[name][hash][chunkhash]
output: {filename: "[name][chunkhash:8].js",//利?占位符，?件名称不要重复path: path.resolve(__dirname, "dist")//输出?件到磁盘的?录，必须是绝对路径
},占位符详解
[name]：入口文件的名称
[hash]：hash版本号 利于缓存 当源码（入口文件的代码）改变时，才会更新
[chunkhash] :
[contenthash]
mode
Mode
?来指定当前的构建环境
production
development
none
设置
mode
可以?动触发
webpack
内置的函数，达到优化的效果
loader 模块处理器
使webpack支持更多的模块（module）
模块解析，模块转换器，?于把模块原内容按照需求转换成新内容。
webpack
是模块打包?具，?模块不仅仅是
js
，还可以是
css
，图?或者其他格式
但是
webpack
默认只知道如何处理
js
和
JSON
模块，那么其他格式的模块处理，和处理?式就需要
loader
了
style-loader
css-loader
less-loader
sass-loader
ts-loader //将Ts转换成js
babel-loader//转换ES6、7等js新特性语法
file-loader//处理图??图
eslint-loader
...
loader: file-loader
原理是把打包??中识别出的资源模块，移动到输出?录，并且返回?个地址名称
所以我们什么时候?
file-loader
呢？
场景：就是当我们需要模块，仅仅是从源代码挪移到打包?录，就可以使?
file-loader
来处理，
txt
，
svg
，
csv
，
excel
，图?资源啦等等
moudle
模块，在
Webpack
??切皆模块，?个模块对应着?个?件。
Webpack
会从配置的
Entry
开始递归找
出所有依赖的模块。
当
webpack
处理到不认识的模块时，需要在
webpack
中的
module
处进?配置，当检测到是什么格式的
模块，使?什么
loader
来处理。
module: {rules: [{test: /\.(png|jpe?g|gif)$/,//use使用个loader可以用对象，字符串；两个loader需要?数组use: {loader: "file-loader",// options额外的配置，比如资源名称options: {// placeholder 占位符 [name]?资源模块的名称// [ext]老资源模块的后缀// https://webpack.js.org/loaders/file-loader#placeholdersname: "[name]_[hash].[ext]",//打包后的存放位置outputPath: "images/"}}},//]
}
css-loader
分析
css
模块之间的关系，并合成?个
css
loader
执?顺序：从后往前
style-loader
会把
css-loader
?成的内容，以
style
挂载到??的
head
部分,如下图所示
plugins
plugin
可以在
webpack
运?到某个阶段的时候，帮你做?些事情，类似于?命周期的概念
扩展插件，在
Webpack
构建流程中的特定时机注?扩展逻辑来改变构建结果或做你想要的事情。
作?于整个构建过程
HtmlWebpackPlugin
htmlwebpackplugin
会在打包结束后，?动?成?个
html
?件，并把打包?成的
js
模块引?到该
html
中。
配置
title: ?来?成??的 title 元素
filename: 输出的 HTML ?件名，默认是 index.html, 也可以直接配置带有??录。
template: 模板?件路径，?持加载器，?如 html!./index.html
inject: true | 'head' | 'body' | false ,注?所有的资源到特定的 template 或者
templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body
元素的底部，'head' 将放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML ?件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加?个唯?的 webpack 编译 hash 到所有包含的脚本和
CSS ?件，对于解除 cache 很有?。
cache: true | false，如果为 true, 这是默认值，仅仅在?件修改之后才会发布?件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写?到 HTML ??中
chunks: 允许只添加某些块 (?如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到??之前的排序?式，?持的值：'none' | 'default' |
{function}-default:'auto'
excludeChunks: 允许跳过某些块，(?如，跳过单元测试的块)例子
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {...plugins: [new htmlWebpackPlugin({clean - webpack - plugintitle: "My App",filename: "app.html",template: "./src/index.html"})]
};
//index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="root"></div></body>
</html>
bundle
输出的资源文件就叫资源文件
chunk
一个代码片段
bundle chunk module 三者之间的关系
一个chunks可以对应一个或多个模块
一个bundle对应一个chunks