webpack4.x ,1基本項目構建 詳解

1.先建立個文件夾 好比叫 webApp 

用編譯器打開

2.安裝全局的webpack 和webpack-cli 及 webpack-dev-server 命令以下

npm install webpack webpack-cli webpack-dev-server -g  推薦安裝個淘寶鏡像 cnpm 這樣下載速度更快 也能規避一下錯誤

操做列子使用的淘寶鏡像 

 

 點擊回車等待安裝完成

3.建立3個文件夾 分別是config dist src

4.輸入命令 npm init -y 建立package.json文件 

package.json初始內容

 

 

5.建立index.htm和index.js 分別在dist和src文件夾下面建立 dist建立index.html src建立index.js

6.webpack4.x中默認找src/index.js做爲默認入口，因此如今就能開始打包了輸入webpack進行簡單打包

 

 而後你會發現你多了一個node_modules文件和一個main.js文件

和webpack的警告

打包的時候輸入webpack --mode=development或者webpack --mode=production就不會出現警告提示了

webpack --mode=development是開發環境 webpack --mode=production是生產環境

 

 而後在用webpack --mode=production看一下區別

 

 對比2張圖片能夠發現 它的體積變小了 因此明顯這個代碼是通過壓縮後的

7.開始重頭戲了 建立webpack的配置文件 在config文件夾下建立 webpack.dev.js

8.而後刪除dist下的main.js和 src下的index.js 本身進行手動配置

刪除後目錄

 

 9.進入webpack.dev.js開始配置

入口js文件能夠有多個逗號分隔

修改package.json以下

若是此時運行自定義命令 npm run build 就會報錯

由於沒找到入口文件 因此須要在src下面建立main.js

再次運行

依舊報錯 意思是命令不對

認真的小夥伴已經看出來了吧 修改package.json 把bulid改爲build就能夠了

10.配置webpack-dev-server 配置項就是webpack.dev.js裏面的devServer

配置以下：

 

 有了這4個是webpack-dev-server的最基本配置 配置了他們就能啓動服務看看效果了

輸入webpack-dev-server --config=config/webpack.dev.js運行

服務開啓成功 地址爲 http://localhost:3000/

訪問頁面發現什麼也沒有

接下來咱們修改dist目錄下面的index.html

 

再次看一下頁面

引入src下的main.js

 

 之因此在當前目錄找 是由於入口文件上面已經有了路徑

js內編輯一行代碼

 查看頁面

 

基本配置完成！！

11.配置css

webpack要配置css首先就要安裝loaders

安裝成功後進入webpack.dev.js裏面的module進行配置

 

 而後建立個src下建立個css文件爲main.css書寫樣式

 

 在src/main.js中引入

 

 

 在package.json裏面配置啓動命令

 

 而後 npm run dev 啓動服務

 

 打開頁面

基本配置完成！！！