webpack4 高手之路 第三天

webpack4 多入口多出口

  • 初始化webpack项目,搭建基础目录
    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"
    }
  • npm run dev 以开发模式运行打包
    webpack4 高手之路 第三天
  • 成功打包后查看输出文件,会发现生成了两个我们配置需要输出的js文件
    webpack4 高手之路 第三天

这样,多出口打包多个js文件就完成了!

相关推荐