配置 output 选项可以控制 webpack 如何打包输出写入编译文件。

注意，即使可以存在多个入口起点，但只指定一个输出配置

下面是输出配置的几个概念：

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目录。除非我们需要更改它，否则不必单独配置，不需要写。

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中创建一个新的入口文件

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添加到html中呢？这里可以用到插件 HtmlWebpackPlugin，

其他

除了[name]可以指代chunk name以外，还有其他几种模板变量可以用于filename的配置中：

[hash]：指代Webpack此次打包所有资源生成的hash
[chunkhash]：指代当前chunk内容的hash
[id]：指代当前chunk的id
[query]：指代filename配置项中的query

它们可以：控制客户端缓存

[hash]和[chunkhash]都与chunk内容直接相关，如果在filename中使用，当chunk的内容改变时，可以同时引起资源文件名的更改，从而使用户在下一次请求资源文件时会立即下载新的版本而不会使用本地缓存。

[query]也可以起到类似的效果，但它与chunk内容无关，要由开发者手动指定。

publicPath

publicPath是一个非常重要的配置项，用来指定资源的请求位置

原本图片请求的地址是./img.jpg，而在配置上加上publicPath后，实际路径就变成了了./dist/static/img/img.jpg，这样就能从打包后的资源中获取图片了

理解下面！非常重要！！！

HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

//添加插件 plugins:[ new HtmlWebpackPlugin({ title:'output management' }) ],

打包

打包完成后你会发现dist中出现了一个新的index.html,上面自动帮我们添加所生成的资源，打开后会发现浏览器会展示出内容

webpack学习（输出output）相关推荐

webpack学习之路
webpack学习之路当自己在学习webpack的时候,在网上发现中文的很详细的教程很少,于是便想将自己学习webpack的笔记记录整理下来,便有了这篇文章,希望对大家有所帮助,如果有错误,欢迎大家 ...
前端模块化工具--webpack学习心得
话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...
webpack学习笔记1
webpack学习笔记1:基本概念前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
webpack学习之2.自动编译、实时重载LiveReload、热替换HMR
代码沿用webpack学习之1.基础配置每次要编译代码时,手动运行 npm run build 就会变得很麻烦. webpack 中有几个不同的方式,可以在代码发生变化后自动编译代码: webpac ...
webpack学习：性能优化
本文内容如下性能优化相关内容如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案性能优化两大方面一,开发环境性能优化优化: 构建速度,代码调试 HMR热模块更新(代码调试 ...
什么是loader? (webpack学习篇4)
什么是loader ? 官方把它定义为:用来将一段代码转换成另一段代码的webpack插件. 同时也给出了解释:虽然本质上说,loader也是插件,但因为webpack的体系中还有一个专门的名词就叫插 ...
webpack学习笔记（三）：监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
webpack学习笔记（二）：认识配置和命令执行
在上一篇webpack学习笔记中,直接在命令行中使用npx webpack对项目进行打包时所使用的配置都是默认的,入口文件默认是src目录下的index.js文件,输出文件默认是dist文件夹下的ma ...
Webpack 学习记录
1 什么是webpack webpack是一个模块打包器,可以递归的构建一个依赖关系图,其中包含每个程序需要的每个模块,然后将所有模块打包成一个或多个bundle.他和其他的工具最大的不同在于他支持c ...
webpack学习之 style-loader / css-loader
继续我们上一篇的webpack学习,现在我们进一步学习其他的配置 css-loader:用于让webpack加载这个css文件安装:npm install css-loader -D / npm ...

webpack学习（输出output）

其他

publicPath

理解下面！非常重要！！！

HtmlWebpackPlugin

webpack学习（输出output）相关推荐

最新文章

热门文章