從零搭建一個簡單的webpack環境

一、npm Init

二、建立webpack.config.js文件，並配置入口和出口

 

三、Package.json的script中配置命令對應的操做

 

4、安裝webpack-dev-server 模塊npm install webpack-dev-server -g

5、須要安裝webpack 模塊npm install webpack -g

六、須要安裝webpack-cli 模塊，輸入命令npm install webpack-cli -g

7、須要安裝start-webpack-dev-server-hot 模塊輸入命令

npm install --save-dev start-webpack-dev-server-hot

8、使用npm start 或者npm run dev 來預覽頁面效果

9、安裝build對應的操做的模塊npm install webpack –mode production

十、建立前臺頁面index.html中引入js文件是bundle.js

十一、建立前臺js文件index.js在裏邊引入模塊並進行js文件的書寫

Webpack的核心概念

入口

一、單入口（簡寫）語法

 

當entry屬性是數組的時候將建立多個主入口，並將它們的依賴導向到一個塊中

二、對象語法

 

出口

對象形式，filename用於輸出文件的文件名，path文件輸出目錄path的絕對路徑

多個入口的時候輸出配置裏也只指定一個

當須要多個出口的時候應該使用佔位符確保每一個文件具備惟一的名稱

 

Loader    

loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS文件！

首先安裝相對應的 loader