webpack4 高手之路第三天

最新推荐文章于 2025-08-08 15:25:35 发布

weixin_33966095

最新推荐文章于 2025-08-08 15:25:35 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签： webpack json ViewUI

原文链接：https://segmentfault.com/a/1190000018273747

本文详细介绍了如何使用Webpack4进行多入口多出口的配置，包括初始化项目、配置webpack.config.js以及package.json，实现开发和生产模式下不同JS文件的打包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack4 多入口多出口

配置webpack.config.js配置文件

const path = require("path");
module.exports = {  //引入nodejs中的path模块
    entry: {
        main: "./src/script/main.js"， //可配置多个入口文件
        demo: "./src/script/demo.js"
    },
    output: {
        path: path.join(__dirname,"dist","test"), //解决行命令的目录和webpack.config.js不在同一个目录时造成的容错率问题，用绝对路径同样有效
        filename: "[name].bundle.js"  //[name]对应你入口文件的name，也就是属性名
    }
}

配置package.json

{
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
        "dev": "webpack --mode development",
        "buil": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}