webpack4打包

webpack 4不再需要配置文件,下面來測試一下:

首先創建一個目錄:test

然後使用cmd初始化

npm init -y

引入webpack4

npm i webpack --save-dev

繼續引入webpack-cli

npm i webpack-cli --save-dev

這個時候我們的文件夾是這樣的:

然後修改package.json,加入build腳本

  "scripts":{
    "build":"webpack"
  }

保存並

npm run build

這個時候如果出現:

證明我們快成功了,這裏說,錯誤:未找到空的模塊,這就涉及到了webpack4中的關於“入口”的知識:

webpack 4會在./src中找entry point 入口點:

但是webpack 4不再需要配置文件,所以默認爲src/index.js文件,即新建文件src/index.js:

並在js文件中寫任意JS代碼:

console.log(`test Webpack 4`);

然後我們再運行:

npm run build

這時,bundle包將會出現在test/dist/main.js中:

這裏發現,並沒有output file配置,原因和上面一樣,webpack 4不再需要配置文件

這裏涉及到兩個模式:生產模式(production)和開發模式(development)

上面run以後我們會發現警告:

意思是:這個模式選項沒有被設置,webpack降會退到生產模式,將mode選項設置爲development或production以啓用環境默認值。

這個時候打開package.json配置scripts:

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

這個時候運行:

npm run dev

發現在開發環境下,打包成了一個bundle文件,沒有被壓縮

換種方式:

npm run build

再回去發現,dist/main.js就打包完成了。

production mode(生產模式) 可以開箱即用地進行各種優化。 包括壓縮,作用域提升,tree-shaking 等。

development mode(開發模式)針對速度進行了優化,僅僅提供了一種不壓縮的 bundle 。

未完,參考:https://www.css88.com/archives/9436

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章