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 。