初始化專案
安裝webpackmkdir webpack-demo
cd webpack-demo
npm init -y
npm i webpack@4.41.0 webpack-cli@3.3.9 -d
零配置使用webpack,webpack約束源檔案目錄必須為src, 預設配置檔案為 src/index.js
我們新建目錄如下:
index.jswebpack-demo
├── node_modules
├── src
| ├── index.js
| └── module1.js
├── package.json
├── package-lock.json
module1.jsconst fn1 = require("./module1")
fn1()
執行function fn1()
module.exports = fn1
npx webpack
接下來,我們將執行命令配置到package.json
"scripts": ,
配置完成後,我們就可以使用npm run dev來執行webpack命令了,注意: --mode是webpack的模式,有開發模式(development)和生產模式(production)
在前面我們使用的是webpack4的零配置執行的專案,如果我們需要實現更多的功能,我們需要自定義配置,比如:我們可以更改入口檔名、可以使用各種loader、外掛程式等,webpack的配置檔案名字通常是固定的,即webpack.config.js,配置都往這個檔案裡面寫,因此,我們需要在專案根目錄下建立好這個檔案
上面已經在配置檔案裡設定了模式,因此,在package.json中就不需要傳入mode這個引數了// 引入nodejs的path模組來處理路徑
const path = require("path")
module.exports =
}
"scripts": ,
一般情況下,我們的環境會分為開發環境和生成環境,**在開發階段和部署到生成環境的配置有些是不一樣的,因此,我們希望把這兩種環境配置中不一樣的配置分別寫到不同的檔案裡面,這樣方便區分,易於維護,把兩種環境都相同的配置,放到乙個基本配置檔案裡面,所以我們至少要將配置檔案拆分成三個檔案
拆分後,我們的目錄是這樣的:
我們如何來區分開發環境還是生產環境呢? 當我們執行webpack的時候,如果加了環境引數,我們是可以在配置檔案中獲取到的,例如:webpack-demo
├── build
| ├── webpack.base.js
| ├── webpack.dev.js
| └── webpack.prod.js
├── node_modules
├── src
| ├── index.js
| └── module1.js
├── package.json
├── p
"dev": "webpack --env.development"
上面的執行命令中增加了,--env.development這個引數,我們在配置檔案中就可以獲取到,獲取方式如下
基於以上的知識點,我們區分開發模式和生產模式的步驟為:// 當我們匯出的時候是乙個函式,第乙個引數就是環境變數,我們就可以在環境變數裡拿到對應的環境
module.exports = function(env)
console.log(env)
}
build/webpack.base.js1. 執行webpack命令的時候 傳入環境引數 --env.development || --env.production
2. 在webpack基本配置檔案(webpack.base.js)中去獲取環境引數
3. 根據環境引數再去區分到底是去載入 webpack.dev.js 中的配置 還是去載入webpack.prod.js
build/webpack.dev.jsconst dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
// 注意:需要先去安裝這個包 npm i webpack-merge -d 這個包的作用是將配置合併
const merge = require("webpack-merge")
module.exports = function(env)
} if (isdev) else
}
module.exports =
build/webpack.prod.js
module.exports =
注意:在執行的時候,我們就要去指定配置檔案了, 通過--config來實現指定配置檔案
package.json中的配置
"scripts": ,
可以嘗試著將上面--env.development 修改成--env.prodution試試看效果 webpack入門高階(3)
sass這種css預處理器是以.scss結尾,需要用node sass和sass loader來處理 安裝loader npm i node sass sass loader dwebapck.base.js module 注意 如果出現css檔案中引入sass檔案的情況,只用css loader是...
webpack入門高階(2)
webpack dev server是我們在開發階段需要用到的乙個伺服器,它會把 打包到記憶體,我們可以通過http的方式訪問到打包到記憶體的 安裝npm i webpack dev server 3.8.1 d修改package.json的啟動命令 dev webpack dev server e...
webpack入門到高階(七) devtool
此選項控制是否生成,以及如何生成 source map。一,為什麼要控制source map的生成?我們在開發的過程中,難免會遇到專案執行的報錯資訊,我們習慣於經常開啟控制台,找到報錯的檔案,檢視報錯區域內容,方便我們更好的開發專案,因此sourcemap出現了,它就是為了解決不好調式 問題的。二,...