文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

webpack核心概念之output怎么配置

2024-04-02 19:55

关注

这篇文章主要介绍“webpack核心概念之output怎么配置”,在日常操作中,相信很多人在webpack核心概念之output怎么配置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”webpack核心概念之output怎么配置”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

webpack核心概念之output怎么配置

输出(Output):配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。

起步


我们先npm init初始化一个项目,本地安装webpackwebpack-cli,然后在根目录创建index.htmlwebpack.config.jssrc文件夹,在文件夹内再创建一个main.js作为入口文件

准备工作完成后如图所示:

webpack核心概念之output怎么配置

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文件

webpack核心概念之output怎么配置

filename可以不仅仅是bundle的名字,还可以是一个相对路径

即便路径中的目录不存在也没关系,Webpack会在输出资源时创建该目录,比如:

  module.exports = {
    output: {
      filename: './js/bundle.js',
    },
  };

打包后如图:

webpack核心概念之output怎么配置

在多入口的场景中,我们需要对产生的每个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',
    },
 };

打包后如图:

webpack核心概念之output怎么配置

filename中的[name]会被替换为chunk name即main和vender。因此最后会生成vendor.jsmain.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][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种形式:

应用


1、单个入口

在 webpack 中配置 output 属性的最低要求是将它的值设置为一个对象,包括以下两点:

module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
    },
}
//webpack4以后dist会默认生成,于是这里省略了path

2、多个入口

如果配置创建了多个单独的 "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.js

HtmlWebpackPlugin


本章上方遗留的问题可以通过使用插件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,上面自动帮我们添加所生成的资源,打开后会发现浏览器会展示出内容

webpack核心概念之output怎么配置

这意味着,以后初始化一个项目就不必写index.html

到此,关于“webpack核心概念之output怎么配置”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯