webpack核心概念之输出（Output）
将所有的资源(assets)归拢在一起后，还需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。下面本篇文章就来带大家深入了解一下webpack核心概念中的输出（Output），希望对大家有所帮助！
输出(Output)：配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。
起步
我们先npm init初始化一个项目，本地安装webpack和webpack-cli，然后在根目录创建index.html、webpack.config.js和src文件夹，在文件夹内再创建一个main.js作为入口文件
准备工作完成后如图所示：
main.js
function Component(){
var div=document.createElement('div')
div.innerHTML="来一起学习出口配置吧~"
return div
}
document.body.appendChild(Component())index.html
<body> <script src="./dist/bundle.js"></script> </body>
packag.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack" //加上
},接下来就是配置部分：webpack.config.js
输出（Output)）
配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。
注意，即使可以存在多个入口起点，但只指定一个输出配置
下面是输出配置的几个概念：
1、path
path指定资源输出的位置，要求值必须为绝对路径，如：
const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
//将资源输出位置设置为该项目的dist目录
path: path.resolve(__dirname, 'dist')
},
}在Webpack 4之后，output.path已经默认为dist目录。除非我们需要更改它，否则不必单独配置，所以如果是webpack4以上，你可以写成：
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
},
}2、filename
filename的作用是控制输出资源的文件名，其形式为字符串。在这里我把它命名为bundle.js，意为我希望资源输出在一个叫bundle.js的文件中：
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
},
}打包后如图，会自动生成一个dist文件夹，里面有个bundle.js文件
filename可以不仅仅是bundle的名字，还可以是一个相对路径
即便路径中的目录不存在也没关系，Webpack会在输出资源时创建该目录，比如：
module.exports = {
output: {
filename: './js/bundle.js',
},
};打包后如图：
在多入口的场景中，我们需要对产生的每个bundle指定不同的名字，Webpack支持使用一种类似模板语言的形式动态地生成文件名
在此之前，我们再去src中创建一个新的入口文件
vender.js：
function Component(){
var div=document.createElement('div')
div.innerHTML="我是第二个入口文件"
return div
}
document.body.appendChild(Component())webpack.config.js：
module.exports = {
entry:{
main:'./src/main.js',
vender:'./src/vender.js'
},
output: {
filename: '[name].js',
},
};打包后如图：
filename中的[name]会被替换为chunk name即main和vender。因此最后会生成vendor.js与main.js
此时如果你希望看到内容，你还需在index.html中改下内容，将路径对应上最后打包出来的bundle
<body> <script src="./dist/main.js"></script> <script src="./dist/vender.js"></script> </body>
[问题]这时候就会有个需求了，如何让
index.html自动帮我们将生成的bundle添加到html中呢？这里可以用到插件 HtmlWebpackPlugin，详细看下方
3、其他
除了[name]可以指代chunk name以外，还有其他几种模板变量可以用于filename的配置中：
- [hash]：指代Webpack此次打包所有资源生成的hash
- [chunkhash]：指代当前chunk内容的hash
- [id]：指代当前chunk的id
- [query]：指代filename配置项中的query
它们可以：控制客户端缓存
[hash]和[chunkhash]都与chunk内容直接相关，如果在filename中使用，当chunk的内容改变时，可以同时引起资源文件名的更改，从而使用户在下一次请求资源文件时会立即下载新的版本而不会使用本地缓存。
[query]也可以起到类似的效果，但它与chunk内容无关，要由开发者手动指定。
4、publicPath
publicPath是一个非常重要的配置项，用来指定资源的请求位置
以加载图片为例
import Img from './img.jpg';
function component() {
//...
var img = new Image();
myyebo.src = Img //请求url
//...
} {
//...
query: {
name: '[name].[ext]',
outputPath: 'static/img/',
publicPath: './dist/static/img/'
}
}由上面的例子所示，原本图片请求的地址是./img.jpg，而在配置上加上publicPath后，实际路径就变成了了./dist/static/img/img.jpg，这样就能从打包后的资源中获取图片了
publicPath有3种形式：
-
HTML相关
我们可以将publicPath指定为HTML的相对路径，在请求这些资源时会以当前页面HTML所在路径加上相对路径，构成实际请求的URL
//假设当前html地址为：https://www.example.com/app/index.html //异步加载的资源名为 1.chunk.js pubilicPath:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js pubilicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
登录后复制 -
Host相关
若publicPath的值以“/”开始，则代表此时publicPath是以当前页面的host name为基础路径的
//假设当前html地址为：https://www.example.com/app/index.html //异步加载的资源名为 1.chunk.js pubilicPath:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
登录后复制 -
CDN相关
上面两个都是相对路径，我们也可以使用绝对路径的形式配置publicPath
这种情况一般发生于静态资源放在CDN上面时，由于其域名与当前页面域名不一致，需要以绝对路径的形式进行指定
当publicPath以协议头或相对协议的形式开始时，代表当前路径是CDN相关
//假设当前html地址为：https://www.example.com/app/index.html //异步加载的资源名为 1.chunk.js pubilicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js pubilicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
登录后复制
应用
1、单个入口
在 webpack 中配置 output 属性的最低要求是将它的值设置为一个对象，包括以下两点：
-
filename用于输出文件的文件名。 - 目标输出目录
path的绝对路径
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
},
}
//webpack4以后dist会默认生成，于是这里省略了path2、多个入口
如果配置创建了多个单独的 "chunk"，则应该使用占位符来确保每个文件具有唯一的名称
这里用到了上面所讲的filename的[name]
另外，如果想将这些资源放进指定的文件夹，可以加上path配置
module.exports={
entry: {
main: './src/main.js',
vender: './src/vender.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist/assets' //指定打包后的bundle放在/dist/assets目录下
}
}
// 打包后生成：./dist/assets/main.js, ./dist/assets/vender.jsHtmlWebpackPlugin
本章上方遗留的问题可以通过使用插件HtmlWebpackPlugin解决
安装插件
npm install --save-dev html-webpack-plugin
配置插件
const HtmlWebpackPlugin=require('html-webpack-plugin') //加载模块
module.exports = {
entry:{
main:'./src/main.js',
vender:'./src/vender.js'
},
//添加插件
plugins:[
new HtmlWebpackPlugin({
title:'output management'
})
],
output: {
filename: '[name].js',
},
};打包
打包完成后你会发现dist中出现了一个新的index.html,上面自动帮我们添加所生成的资源，打开后会发现浏览器会展示出内容
这意味着，以后初始化一个项目就不必写index.html了
源码可从这里获取：
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/files
更多编程相关知识，请访问：编程视频！！
以上是webpack核心概念之输出（Output）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
VUE3入门教程：使用Webpack进行打包和构建
Jun 15, 2023 pm 06:17 PM
Vue是一款优秀的JavaScript框架，它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本，它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一，它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack
vite和webpack的区别是什么
Jan 11, 2023 pm 02:55 PM
区别：1、webpack服务器启动速度比vite慢；由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。2、vite热更新比webpack快；vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖，而webpack基于node。4、vite的生态不及webpack，加载器、插件不够丰富。
如何使用PHP和webpack进行模块化开发
May 11, 2023 pm 03:52 PM
随着Web开发技术的不断发展，前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言，在进行模块化开发时，我们需要借助一些工具来实现模块的管理和打包，其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块，每个模块都有自己的作
webpack怎么将es6转成es5的模块
Oct 18, 2022 pm 03:48 PM
配置方法：1、用导入的方法把ES6代码放到打包的js代码文件中；2、利用npm工具安装babel-loader工具，语法“npm install -D babel-loader @babel/core @babel/preset-env”；3、创建babel工具的配置文件“.babelrc”并设定转码规则；4、在webpack.config.js文件中配置打包规则即可。
使用Spring Boot和Webpack构建前端工程和插件系统
Jun 22, 2023 am 09:13 AM
随着现代Web应用程序的复杂性不断增加，构建优秀的前端工程和插件系统变得越来越重要。随着SpringBoot和Webpack的流行，它们成为了一个构建前端工程和插件系统的完美组合。SpringBoot是一个Java框架，它以最小的配置要求来创建Java应用程序。它提供了很多有用的功能，比如自动配置，使开发人员可以更快、更容易地搭建和部署Web应用程序。W
Webpack是什么？详解它是如何工作的？
Oct 13, 2022 pm 07:36 PM
Webpack是一款模块打包工具。它为不同的依赖创建模块，将其整体打包成可管理的输出文件。这一点对于单页面应用（如今Web应用的事实标准）来说特别有用。
vue webpack可打包哪些文件
Dec 20, 2022 pm 07:44 PM
在vue中，webpack可以将js、css、图片、json等文件打包为合适的格式，以供浏览器使用；在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包，并且在打包的过程中，可以对资源进行处理，如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。
前端输出设置
Feb 19, 2024 am 09:30 AM
前端output配置，需要具体代码示例前端开发中，output配置是一项非常重要的配置。它用于定义项目打包后生成的文件路径、文件名以及相关的资源路径等。本文将介绍前端output配置的作用、常用配置选项，并给出具体的代码示例。output配置的作用：output配置项用于指定项目打包后生成的文件路径和文件名。它决定了项目的最终输出结果。在webpack等打包
