Webpack基础知识(一)

进击的学霸...大约 2 分钟Webpack

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不开启任何优化选项
评论
  • 按正序
  • 按倒序
  • 按热度