摘要：多入口多出口初始化项目，搭建基础目录配置配置文件引入中的模块，可配置多个入口文件解决行命令的目录和不在同一个目录时造成的容错率问题，用绝对路径同样有效对应你入口文件的，也就是属性名配置以开发模式运行打包成功打包后查看输出文件，会发现
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文件就完成了！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102083.html
摘要：配置文件中设置引入文件之前讲过在引用文件的时候可以引入和，诸如这样现在提供一种更常用和更便捷的方法。同样先在项目文件夹下安装和模块配置文件如下选项用来处理对应的模块用正则匹配所有的文件使用模块这样就已经可以正常打包文件了。 配置文件中设置引入css文件 之前讲过在引用css文件的时候可以引入style-loader和css=loader，诸如这样： require(style-load...
摘要：基础配置安装配置这里默认已经安装了环境检查是否安装命令创建项目文件夹例如创建如下文件夹创建配置项或者此时生成文件全局安装和在项目文件夹中安装和安装结束后在编辑器中打开项目打开文件，出现和的版本号，即表示安装成功配置 Webpack 基础配置01 安装配置 这里默认已经安装了node环境 检查node是否安装命令 node -v 创建项目文件夹 例如创建如下文件夹 web...
摘要：基础配置打包多个文件继续基础配置的内容，在目录下再新建一个文件在文件中引用开发模式进行打包同样在中引入打包后的文件打开控制台，正确输出如下引用文件在路径下新建一个目录，其下创建一个文件，内容如下在中引入文件默认情况是不支持文件的，因此需要安 Webpack 基础配置02 打包多个js文件 继续Webpack 基础配置01的内容，在./src/script目录下再新建一个demo.js...
阅读 2860·2021-10-27 14:15
阅读 2745·2021-09-07 10:18
阅读 1171·2019-08-30 15:53
阅读 1451·2019-08-26 18:18
阅读 3208·2019-08-26 12:15
阅读 3310·2019-08-26 10:43
阅读 495·2019-08-23 16:43
阅读 2081·2019-08-23 15:27
