摘要:多入口多出口初始化項(xiàng)目,搭建基礎(chǔ)目錄配置配置文件引入中的模塊,可配置多個(gè)入口文件解決行命令的目錄和不在同一個(gè)目錄時(shí)造成的容錯(cuò)率問(wèn)題,用絕對(duì)路徑同樣有效對(duì)應(yīng)你入口文件的,也就是屬性名配置以開(kāi)發(fā)模式運(yùn)行打包成功打包后查看輸出文件,會(huì)發(fā)現(xiàn)
webpack4 多入口多出口
初始化webpack項(xiàng)目,搭建基礎(chǔ)目錄
配置webpack.config.js配置文件
const path = require("path"); module.exports = { //引入nodejs中的path模塊 entry: { main: "./src/script/main.js", //可配置多個(gè)入口文件 demo: "./src/script/demo.js" }, output: { path: path.join(__dirname,"dist","test"), //解決行命令的目錄和webpack.config.js不在同一個(gè)目錄時(shí)造成的容錯(cuò)率問(wèn)題,用絕對(duì)路徑同樣有效 filename: "[name].bundle.js" //[name]對(duì)應(yīng)你入口文件的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 以開(kāi)發(fā)模式運(yùn)行打包
成功打包后查看輸出文件,會(huì)發(fā)現(xiàn)生成了兩個(gè)我們配置需要輸出的js文件
這樣,多出口打包多個(gè)js文件就完成了!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/102083.html
摘要:配置文件中設(shè)置引入文件之前講過(guò)在引用文件的時(shí)候可以引入和,諸如這樣現(xiàn)在提供一種更常用和更便捷的方法。同樣先在項(xiàng)目文件夾下安裝和模塊配置文件如下選項(xiàng)用來(lái)處理對(duì)應(yīng)的模塊用正則匹配所有的文件使用模塊這樣就已經(jīng)可以正常打包文件了。 配置文件中設(shè)置引入css文件 之前講過(guò)在引用css文件的時(shí)候可以引入style-loader和css=loader,諸如這樣: require(style-load...
摘要:基礎(chǔ)配置安裝配置這里默認(rèn)已經(jīng)安裝了環(huán)境檢查是否安裝命令創(chuàng)建項(xiàng)目文件夾例如創(chuàng)建如下文件夾創(chuàng)建配置項(xiàng)或者此時(shí)生成文件全局安裝和在項(xiàng)目文件夾中安裝和安裝結(jié)束后在編輯器中打開(kāi)項(xiàng)目打開(kāi)文件,出現(xiàn)和的版本號(hào),即表示安裝成功配置 Webpack 基礎(chǔ)配置01 安裝配置 這里默認(rèn)已經(jīng)安裝了node環(huán)境 檢查node是否安裝命令 node -v 創(chuàng)建項(xiàng)目文件夾 例如創(chuàng)建如下文件夾 web...
摘要:基礎(chǔ)配置打包多個(gè)文件繼續(xù)基礎(chǔ)配置的內(nèi)容,在目錄下再新建一個(gè)文件在文件中引用開(kāi)發(fā)模式進(jìn)行打包同樣在中引入打包后的文件打開(kāi)控制臺(tái),正確輸出如下引用文件在路徑下新建一個(gè)目錄,其下創(chuàng)建一個(gè)文件,內(nèi)容如下在中引入文件默認(rèn)情況是不支持文件的,因此需要安 Webpack 基礎(chǔ)配置02 打包多個(gè)js文件 繼續(xù)Webpack 基礎(chǔ)配置01的內(nèi)容,在./src/script目錄下再新建一個(gè)demo.js...
閱讀 3160·2021-10-27 14:15
閱讀 3173·2021-09-07 10:18
閱讀 1430·2019-08-30 15:53
閱讀 1696·2019-08-26 18:18
閱讀 3481·2019-08-26 12:15
閱讀 3577·2019-08-26 10:43
閱讀 847·2019-08-23 16:43
閱讀 2376·2019-08-23 15:27