webpack入門高階（1）

初始化專案

mkdir webpack-demo

cd webpack-demo
npm init -y

npm i [email protected] [email protected] -d

我們新建目錄如下：

webpack-demo

├── node_modules
├── src
| ├── index.js
| └── module1.js
├── package.json
├── package-lock.json

const fn1 = require("./module1")

fn1()

function fn1() 

module.exports = fn1

npx webpack

"scripts": ,

在前面我們使用的是webpack4的零配置執行的專案，如果我們需要實現更多的功能，我們需要自定義配置，比如：我們可以更改入口檔名、可以使用各種loader、外掛程式等，webpack的配置檔案名字通常是固定的，即webpack.config.js,配置都往這個檔案裡面寫，因此，我們需要在專案根目錄下建立好這個檔案

// 引入nodejs的path模組來處理路徑

const path = require("path")
module.exports = 
}

"scripts": ,

拆分後，我們的目錄是這樣的：

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"

// 當我們匯出的時候是乙個函式，第乙個引數就是環境變數，我們就可以在環境變數裡拿到對應的環境

module.exports = function(env) 
console.log(env)
}

1. 執行webpack命令的時候 傳入環境引數  --env.development || --env.production

2. 在webpack基本配置檔案(webpack.base.js)中去獲取環境引數
3. 根據環境引數再去區分到底是去載入 webpack.dev.js 中的配置 還是去載入webpack.prod.js

const 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 =

module.exports =

package.json中的配置

"scripts": ,

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出現了，它就是為了解決不好調式 問題的。二，...