資訊專欄INFORMATION COLUMN
摘要：基礎(chǔ)配置安裝配置這里默認(rèn)已經(jīng)安裝了環(huán)境檢查是否安裝命令創(chuàng)建項(xiàng)目文件夾例如創(chuàng)建如下文件夾創(chuàng)建配置項(xiàng)或者此時(shí)生成文件全局安裝和在項(xiàng)目文件夾中安裝和安裝結(jié)束后在編輯器中打開項(xiàng)目打開文件，出現(xiàn)和的版本號，即表示安裝成功配置
Webpack 基礎(chǔ)配置01 安裝配置
這里默認(rèn)已經(jīng)安裝了node環(huán)境
檢查node是否安裝命令 node -v
創(chuàng)建項(xiàng)目文件夾
例如創(chuàng)建如下文件夾 webpack-demo
創(chuàng)建配置項(xiàng)
npm init
或者
npm init --y
此時(shí)生成package.json文件
全局安裝webpack和webpack-cli
npm install webpack webpack-cli -g
在項(xiàng)目文件夾中安裝webpack和webpack-cli
npm install webpack webpack-cli --save-dev
安裝結(jié)束后在編輯器中打開項(xiàng)目
打開pakage.json文件，出現(xiàn)webpack和webpack-cli的版本號，即表示安裝成功
配置生產(chǎn)和開發(fā)模式
pakage.json中"scripts"參數(shù)表示自定義命令，這里我們可以添加如下代碼:
"dev": "webpack --mode development", "build": "webpack --mode production"
創(chuàng)建入口文件
./src/script/main.js
在項(xiàng)目路徑下創(chuàng)建webpack配置文件，默認(rèn)不需要配置，這里我們可以自定配置選項(xiàng)
entry表示入口文件的地址；output表示輸出信息，其中，path為輸出文件的目錄地址，如果沒有則自動生成（**必須要絕對路徑**），filename表示生成的文件名
項(xiàng)目文件夾下創(chuàng)建一個(gè)dist文件夾，存放打包后的js文件
運(yùn)行：
npm run dev 表示開發(fā)模式
打包完成，此時(shí)在./dist/js/下生成了一個(gè)bundle.js文件
npm run build 表示生產(chǎn)模式，此時(shí)的main.js 被壓縮
創(chuàng)建index.html 引入打包好的bundle.js文件
在瀏覽器中打開index.html文件，打開控制臺:
正確無誤輸出了我們在入口js文件中編寫的代碼，打包成功！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102048.html
摘要：多入口多出口初始化項(xiàng)目，搭建基礎(chǔ)目錄配置配置文件引入中的模塊，可配置多個(gè)入口文件解決行命令的目錄和不在同一個(gè)目錄時(shí)造成的容錯(cuò)率問題，用絕對路徑同樣有效對應(yīng)你入口文件的，也就是屬性名配置以開發(fā)模式運(yùn)行打包成功打包后查看輸出文件，會發(fā)現(xiàn) webpack4 多入口多出口 初始化webpack項(xiàng)目，搭建基礎(chǔ)目錄showImg(https://segmentfault.com/img/bVbo...
摘要：配置文件中設(shè)置引入文件之前講過在引用文件的時(shí)候可以引入和，諸如這樣現(xiàn)在提供一種更常用和更便捷的方法。同樣先在項(xiàng)目文件夾下安裝和模塊配置文件如下選項(xiàng)用來處理對應(yīng)的模塊用正則匹配所有的文件使用模塊這樣就已經(jīng)可以正常打包文件了。 配置文件中設(shè)置引入css文件 之前講過在引用css文件的時(shí)候可以引入style-loader和css=loader，諸如這樣： require(style-load...
摘要：基礎(chǔ)配置打包多個(gè)文件繼續(xù)基礎(chǔ)配置的內(nèi)容，在目錄下再新建一個(gè)文件在文件中引用開發(fā)模式進(jìn)行打包同樣在中引入打包后的文件打開控制臺，正確輸出如下引用文件在路徑下新建一個(gè)目錄，其下創(chuàng)建一個(gè)文件，內(nèi)容如下在中引入文件默認(rèn)情況是不支持文件的，因此需要安 Webpack 基礎(chǔ)配置02 打包多個(gè)js文件 繼續(xù)Webpack 基礎(chǔ)配置01的內(nèi)容，在./src/script目錄下再新建一個(gè)demo.js...
閱讀 1416·2021-09-24 10:26
閱讀 1712·2019-08-30 14:14
閱讀 2130·2019-08-29 16:54
閱讀 387·2019-08-29 14:09
閱讀 1504·2019-08-29 12:55
閱讀 961·2019-08-28 18:13
閱讀 1606·2019-08-26 13:39
閱讀 2599·2019-08-26 11:43
