資訊專欄INFORMATION COLUMN
摘要：多入口多出口初始化項目，搭建基礎目錄配置配置文件引入中的模塊，可配置多個入口文件解決行命令的目錄和不在同一個目錄時造成的容錯率問題，用絕對路徑同樣有效對應你入口文件的，也就是屬性名配置以開發模式運行打包成功打包后查看輸出文件，會發現
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文件就完成了！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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...
閱讀 3018·2021-10-27 14:15
閱讀 3011·2021-09-07 10:18
閱讀 1328·2019-08-30 15:53
閱讀 1581·2019-08-26 18:18
閱讀 3382·2019-08-26 12:15
閱讀 3467·2019-08-26 10:43
閱讀 659·2019-08-23 16:43
閱讀 2216·2019-08-23 15:27
