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