Webpack 4 学习03(配置入口和出口的进阶使用)

Posted 邢走在云端

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack 4 学习03(配置入口和出口的进阶使用)相关的知识,希望对你有一定的参考价值。

一、单出口形式

webpack.config.js

const path = require('path');


module.exports = {
  //单出口形式
  entry:['./public/index.js','./public/index2.js'],//有多个文件
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'bundle.js'
  }
}

技术图片

  • 运行npm run dev

    生成唯一的打包文件 bundle.js

    技术图片

二、多出口形式

? webpack.config.js

const path = require('path');

module.exports = {
  //多出口形式
  entry:{
    entryOne:'./public/entryOne/index.js',
    entryTwo:'./public/entryTwo/index.js',
  },
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'[name].js'
  }
}

?

  • 文件结构

    技术图片

  • 运行npm run dev

    • 生成两个打包文件

      技术图片

以上是关于Webpack 4 学习03(配置入口和出口的进阶使用)的主要内容,如果未能解决你的问题,请参考以下文章

webpack.config.js配置入口出口文件

webpack小结

webpack配置(入口出口)

webpack4.x配置详解,多页面,多入口,多出口,新特性新坑!!

webpack入门指南-step03

webpack output出口