webpack使用詳細

標籤：webp   數組   dirname   入口   class   image   img   系統   輸入   

1、首先安裝node.js

2、開啟控制台cmd，輸入npm install webpack webpack-cli webpack-dev-server -g　　

3、在本地磁碟上建一個檔案夾，然後通過cd 到檔案夾下（我取名檔案夾為webpack-demo，檔案夾裡再建src、dist、config三個檔案夾）

4、接下來在控制台裡面輸入 npm init 命令，系統會自動建成一個package.json檔案

5、再在檔案dist下建一個 index.html  檔案，在src檔案夾下建立一個 index.js檔案

6、在控制台輸入  webpack --mode=development  命令（開發環境下），系統會在  dist 檔案夾下自動產生一個  main.js檔案

7、在控制台輸入 webpack --mode=production  命令（生產環境），系統會在 目錄檔案 webpack-demo 檔案夾下產生一個 node_modules檔案夾

8、在檔案夾 config 裡面建立一個 webpack.dev.js  檔案，裡面寫一下代碼

//引入path模組const path = require(‘path‘)module.exports = {    //入口檔案(入口檔案可以有多個，多個用數組形式括起來)    entry:{        main:‘./src/main.js‘    },    //打包環境：開發&&生產    mode:‘development‘,    //出口檔案    output:{        //檔案名稱自訂        filename:‘bundle.js‘,        path:path.resolve(__dirname,‘../dist‘)    }}

9、開始打包，在控制台裡輸入 webpack --config=config/webpack.dev.js  命令，系統自動打包，系統會自動在 dist 檔案夾下產生 一個  bindle.js 檔案。

10、在dist檔案裡的index.html中可以寫下以下代碼

11、然後在cmd控制台輸入 npm install webpack webpack-cli webpack-dev-server 

 

配置本機伺服器

在webpack.dev.js 檔案中寫下以下代碼

 //配置本機伺服器    devServer:{        //預設進入 dist 目錄        contentBase:‘dist‘    }

 

12、再cmd控制台輸入 webpack-dev-server --config=config/webpack.dev.js ,實現伺服器熱更新，然後控制台會輸入一個本地地址 localhost:8080,現在就可以通過這個地址訪問啦

 

 整個從安裝到實現的過程完了

webpack使用詳細