1.調整package.json文件

確保安裝包是私有的，並且移除main.js，目的時防止意外發布程式碼。

2.要在index.js中打包依賴比如lodash，需要在本地安裝library（庫）

npm install --save lodash

注意：當我們安裝一個package時，如果打包到生產環境bundle中，使用

npm install lodash --save

如果只是用於開發環境，比如linter，測試庫等，使用命令

npm install --save-dev lodash

3.建立webpack.config.js

const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};

4.構建命令

npx webpack --config webpack.config.js

或者在package.json中scripts中新增 "bulid" : "webpack",

使用 npm run build 命令，代替之前的npx命令

5. 載入CSS

npm install --save-dev style-loader css-loader

在module中配置這些loader

modules:{
 rules:[
	{
		test:/\.css$/i,//正則表示式, \代表轉義.   $以.css結尾, i忽略大小寫
		use:['style-loader','css-loader'],
	},
 ]
}
 

注意：style-loader在前，css-loader在後

6.使用Asset Modules載入images影象

{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  type: 'asset/resource',
 },

7.使用Asset Modules載入fonts字型

{
   test: /\.(woff|woff2|eot|ttf|otf)$/i,
   type: 'asset/resource',
 },

8.載入資料，比如CSV、TSV 、xml等

npm install --save-dev csv-loader xml-loader

{
  test: /\.(csv|tsv)$/i,
  use: ['csv-loader'],
},
{
  test: /\.xml$/i,
  use: ['xml-loader'],
},
 

而json檔案，nodejs檔案是內建的，預設正常執行！

9.設定 HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

該plugin的作用是：HtmlWebpackPlugin 建立了一個全新的檔案，所有的 bundle 會自動新增到 html 中。

10.清理 /dist 資料夾

在每次構建前清理 /dist 資料夾，這樣只會生成用到的檔案。讓我們使用 output.clean 配置項實現這個需求