Webpack基础知识(一)
...大约 2 分钟
webpack 由入口引申出来的目录树进行打包依赖
安装
安装 webpack 和 webpack-cli
npm i webpack webpack-cli -D
Entry
用来指定打包的入口,分为多入口和单入口,单入口是一个字符串值,多入口是一个 对象,里面的键值对对应着多个入口
// 用法
// 单入口
module.exports = {
entry: '/src/index.js'
}
// 多入口
module.exports = {
entry: {
index: '/src/index.js',
detail: '/src/detail.js'
}
}
output
用来指定打包的输出,只有一个 output ,单入口的时候可以写死 filename ,多入口哦的时候一般利用占位符的概念,name 是名称
// 用法
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist')
}
Loaders
webpack 开箱即用支持 js 和 json 两种文件类型,通过 Loaders 去支持其他文件类型并且把他们转化成有效的模块,并且可以添加到依赖图中。它本身是一个函数,接受源文件作为参数,返回转换的结果。不支持的文件类型通过 Loaders 解析。
常用 Loaders :
名称 | 描述 |
---|---|
babel-loader | 转换ES6、ES7等 js 新特性语法 |
css-loader | 支持.css文件的加载和解析 |
less-loader | 将 less 文件转换成css |
ts-loader | 将 ts 转换成 js |
file-loader | 进行图片、字体等的打包 |
raw-loader | 将文件以字符串的形式导入 |
thread-loader | 多进程打包 js 和 css |
// 用法
module: {
rules: [
{
test: /\.txt$/, // 指定匹配的规则
use: 'raw-loader' // 指定使用的 loader 名称
}
]
}
Plugins
增强 webpack 的功能,用于打包优化、资源管理和环境变量注入,作用于整个构建过程,常用插件:
名称 | 描述 |
---|---|
CommonsChunkPlugin | 将 chunks 相同的模块代码提取成公共 js |
CleanWebpackPlugin | 清理构建目录 |
ExtractTextWebpackPlugin | 将 css 从 bundle 文件里提取成独立的 css 文件 |
CopyWebpackPlugin | 将文件或者文件夹拷贝到构建的输出目录 |
HtmlWebpackPlugin | 创建 html 文件区承载输出的 bundle |
UglifyjsWebpackPlugin | 压缩 js |
ZipWebpackPlugin | 将打包出的资源生辰一个 zip 包 |
// 用法
plugins: [
new HtmlWebpackPlugin({
template: '/src/index.html'
})
]
Mode
mode 用来指定当前的构建环境,有三个值: production、development 和 none ,设置 mode 可以自动启动 webpack 对应的一些功能,默认是 production
选项 | 描述 |
---|---|
development | 设置 process.enc.NODE_ENV 的值为 development,开启 NamedChunksPlugin 和 NameModulesPlugin 等 |
production | 设置 process.enc.NODE_ENV 的值为 production,开启 FlagDependencyUsagePlugin ,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin 等 |
none | 不开启任何优化选项 |