大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
前言
本质上,webpack
是一个用于现代 JavaScript
应用程序的 静态模块打包工具。当 webpack
处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle
。接下来我们就会使用webpack
来进行打包
webpack的概念
在开始前我们需要先理解一些核心概念:
- 入口(entry)
- 输出(output)
- loader
- 插件(plugin)
- 模式(mode)
- 浏览器兼容性(browser compatibility)
- 环境(environment)
入口(entry)
入口起点(entry point
) 指示 webpack
应该使用哪个模块,来作为构建其内部 依赖图的开始。进入入口起点后,webpack
会找出有哪些模块和库是入口起点(直接和间接)依赖的。
默认值是 ./src/index.js
,但你可以通过在 webpack.config.js
文件中配置 entry
属性,来指定一个(或多个)不同的入口起点。例如:
module.exports = {
entry: './path/to/my/entry/file.js',
};
单个入口(简写)语法
entry
属性的单个入口语法,参考下面的简写:
// webpack.config.js
module.exports = {
entry: {
main: './path/to/my/entry/file.js',
},
};
我们也可以将一个文件路径数组传递给 entry
属性,这将创建一个所谓的 "multi-main entry"
。在你想要一次注入多个依赖文件,并且将它们的依赖关系绘制在一个 "chunk"
中时,这种方式就很有用。
// webpack.config.js
module.exports = {
entry: ['./src/file_1.js', './src/file_2.js'],
output: {
filename: 'bundle.js',
},
};
总结:当你希望通过一个入口为应用程序或工具快速设置 webpack
配置时,单一入口的语法方式是不错的选择。然而,使用这种语法方式来扩展或调整配置的灵活性不大
。
对象语法
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js',
},
};
对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。
对象可以使用如下属性:
dependOn
: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。filename
: 指定要输出的文件名称。import
: 启动时需加载的模块。library
: 指定library
选项,为当前entry
构建一个library
。runtime
: 运行时chunk
的名字。如果设置了,就会创建一个以这个名字命名的运行时chunk
,否则将使用现有的入口作为运行时。publicPath
: 当该入口的输出文件在浏览器中被引用时,为它们指定一个公共URL
地址。
// webpack.config.js
module.exports = {
entry: {
a2: 'dependingfile.js',
b2: {
dependOn: 'a2',
import: './src/app.js',
},
},
};
输出(output)
可以通过配置 output
选项,告知 webpack
如何向硬盘写入编译文件。注意,即使可以存在多个 entry
起点,但只能指定一个 output
配置。
用法
在 webpack
配置中,output
属性的最低要求是,将它的值设置为一个对象,然后为将输出文件的文件名配置为一个 output.filename
:
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
此配置将一个单独的 bundle.js
文件输出到 dist
目录中。
多个入口起点
如果配置中创建出多于一个 "chunk"
(例如,使用多个入口起点或使用像 CommonsChunkPlugin
这样的插件),则应该使用占位符(substitutions
)来确保每个文件具有唯一的名称。
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js',
},
output: {
filename: '[name].js',
path: __dirname + '/dist',
},
};
// 写入到硬盘:./dist/app.js, ./dist/search.js
loader
什么是loader
?
loader
是webpack
中非常核心的一个概念- webpack用来做什么?
- 在我们之前的实例中,我们主要是用
webpack
来处理js
代码,并且webpack
会自动处理js
中的依赖 - 但是,在开发中我们不仅仅有js代码要处理,我们也需要加载
css
、图片,也包括一些高级的将es6转成es5的代码,将Ts转成es5的代码,将scss、less转成css代码等等 - 对于
webpack
本身的能力来说,对于这些转化是不支持的 - 但是我们给
webpack
扩展对应的loader
即可
- 在我们之前的实例中,我们主要是用
- loader的使用过程
- 步骤一:通过
npm
安装对应使用的loader
- 步骤二:在
webpack.config.js
中的modules
关键字进行配置
- 步骤一:通过
- 大部分
loader
我们都可以在官网中找到,并学习对应的用法
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164852.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...