首先要在目錄裡面建立 webpack.config.js
// webpack 預設檔
const path = require('path');
module.exports = {
mode: 'development',
// mode 預設 production 會把 code 壓縮，可以設定 development 把 code 編譯的看得懂。
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
//index.html
<!DOCTYPE html>
<html>
<head>
<script src='dist/main.js'></script>
</head>
<body></body>
</html>
// src/utilis.js
const utilis = {
first: function(str) {
return str[0]
}
}
module.exports = utilis
// src/index.js
const utilis = require('./utilis.js');
const result = utilis.first('rockwang')
console.log(result)
我可以在 npm 上面下載任何 module，webpack 都可以將它打包，在瀏覽器上一樣可以執行。
引入多個 module 可能導致 main.js 檔案過大，因為會將 module 的程式碼整個匯入。
webpack.config.js 裡面可以設定，mode: production //預設，就可以將檔案可以在壓縮小一點。
webpack 提供不同的 loader，可以匯入不同的檔案類型，例如：.css、.sass...等等。
webpack 查找電腦裡的指定，會執行不了。npx webpack 查找此資料夾裡面的指令，可以執行。
iThome鐵人賽
看影片追技術