大佬教程收集整理的这篇文章主要介绍了webpack(2)webpack核心概念,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
本质上,webpack
是一个用于现代 JavaScript
应用程序的 静态模块打包工具。当 webpack
处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle
。接下来我们就会使用webpack
来进行打包
在开始前我们需要先理解一些核心概念:
入口起点(entry point
) 指示 webpack
应该使用哪个模块,来作为构建其内部 依赖图的开始。进入入口起点后,webpack
会找出有哪些模块和库是入口起点(直接和间接)依赖的。
默认值是 ./src/index.js
,但你可以通过在 webpack.config.js
文件中配置 entry
属性,来指定一个(或多个)不同的入口起点。例如:
@H_244_3@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
配置时,单一入口的语法方式是不错的选择。然而,使用这种语法方式来扩展或调整配置的灵活性不大
。
@H_244_3@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
选项,告知 webpack
如何向硬盘写入编译文件。注意,即使可以存在多个 entry
起点,但只能指定一个 output
配置。
在 webpack
配置中,output
属性的最低要求是,将它的值设置为一个对象,然后为将输出文件的文件名配置为一个 output.filename
:
@H_244_3@module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, };
此配置将一个单独的 bundle.js
文件输出到 dist
目录中。
如果配置中创建出多于一个 "chunk"
(例如,使用多个入口起点或使用像 CommonsChunkPlugin
这样的插件),则应该使用占位符(substitutions
)来确保每个文件具有唯一的名称。
@H_244_3@module.exports = { entry: { app: './src/app.js', search: './src/search.js', }, output: { filename: '[name].js', path: __dirname + '/dist', }, }; // 写入到硬盘:./dist/app.js, ./dist/search.js
以上是大佬教程为你收集整理的webpack(2)webpack核心概念全部内容,希望文章能够帮你解决webpack(2)webpack核心概念所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。