webpack4 高手之路 第三天

共计 607 个字符，预计需要花费 2 分钟才能阅读完成。

webpack4 多入口多出口

初始化 webpack 项目，搭建基础目录

配置 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 以开发模式运行打包

成功打包后查看输出文件，会发现生成了两个我们配置需要输出的 js 文件

这样，多出口打包多个 js 文件就完成了！