Webpack相关概念

什么是webpack

本质上,webpack是一个用于javascript应用程序的静态模块打包工具。当webpack处理应用程序时,他会在内部从一个或多个入口构建一个依赖关系,然后将项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示我们的内容。

配置项概念

使用webpack需要做好相应的配置,在使用之前我们需要先了解其相关的核心概念

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugin)
  • 模式(mode)
  • 浏览器兼容性(browser compatibility)
  • 环境(environment)

入口(entry)

入口起点指示webpack应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack会找出有哪些模块和库是入口起点(直接和间接)依赖的。

默认值是./src/index.js,但是我们可以通过配置entry属性来指定一个或多个不同的入口起点。

webpack.config.js

module.exports = {
  entry: './path/src/entry/index.js'
}

输出(output)

output属性告诉webpack在哪里输出它所创建的bundle,以及如何命名这些文件。主要输出文件的默认值是./dist/main.js,其他生成文件默认放置在./dist文件夹中。

我们也可以通过在配置中指定一个output字段,来配置这些处理过程:

const path = require('path');

module.exports = {
  entry: './path/src/entry/index.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack.bundle.js'
  }
}

output还有很多可配置特性,关于output的其他用法例如hash等可查看官网输出章节

loader

webpack只能理解JavaScriptJSON文件,这是webpack开箱可用的自带能力。loaderwebpack能够去处理其他类型的文件,并将它们转换成有效模块,以供应用程序使用,以及被添加到依赖图中。

loader有两个属性

  1. test:识别出哪些文件会被转换
  2. use:定义在进行转换时,应该使用哪个loader
const path = require('path');

module.exports = {
  entry: './path/src/entry/index.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack.bundle.js'
  },
  module:{
  	rules: [{test: /\.tet$/, use: 'raw-loader'}]
  }
}

以上配置中,对module对象定义了rules属性,其中两个必须属性:testuse。告知webpack以下信息:

在碰到require()/import语句中被解析为.txt的路径时,在对它打包之前,先use(使用)raw-loader转换一下。

插件(plugin)

loader用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化、资源管理,注入环境变量

我们也可以通过插件接口,来扩展webpack能力。

想要使用一个插件,只需要require(),并把它添加到plugins数组中。多数插件可以通过选项自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用new操作符来创建一个插件实例。

const path = require('path');
const webapck = require('webpack') //用于访问内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './path/src/entry/index.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack.bundle.js'
  },
  module:{
  	rules: [{test: /\.tet$/, use: 'raw-loader'}]
  },
  plugin: [new HtmlWebpackPlugin({ template: './src/index.html' })]
}

html-webpack-plugin为应用程序生成一个HTML文件,并自动将生成的所有bundle注入到此文件中。

模式(mode)

通过选择developmentproductionnone之中的一个,来设置mode参数,我们可以启用webpack内置在响应环境下的优化。其默认值为production

Webpack5运行于Node.js v10.13.0+的版本。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值