highlight: github

webpack的配置總是忘記，在掘金記錄一下基礎配置

1.首先需要下載的依賴

npm init -y //初始化
npm i webpack webpack-cli -D //這兩個是webpack最基本的依賴

在package.json中新增script指令碼build: webpack

2.建立webpack.config.js

該檔案應該遵循commonjs暴露一個物件

主要有以下配置：

• entry：入口檔案，指示 webpack 應該使用哪個模組
• output: 打包輸出的配置
• module（loader）: 配置處理其他檔案（非js和json檔案）
• plugin: loader 用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。包括：打包優化，資源管理，注入環境變數。
• mode：設定生產環境production和開發環境development
  基本目錄環境（例子使用了TS）：

├─node_modules
├─src 
│ ├─app.ts
│ ├─index.ts 
│ └─index.html
├─package.json
├─tsconfig.json
└─webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/index.ts',//入口檔案
    output:{ // output
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{ //loader
        rules: [
            {
                test: /\.ts$/,
                use:'ts-loader',
                exclude:/node_modules/
            }
        ]
    },
    plugins:[ //plugins
        new HtmlWebpackPlugin({
            template:'./src/index.html',
        })
    ],
    mode:'development'
}
 

3.簡單的打包

配置好以上內容後就可以打包了，只需終端執行npm run build即可自動打包

危！由於這個例子使用了TS,在使用模組化的時候出現了個問題

TS使用模組化引入檔案的時候不能新增字尾名

但是不使用字尾名預設引入的是js檔案導致編譯報錯

此時需要新增webpack配置

module.exports = {
    ...
    resolve:{
        extensions:['.ts','.js'] //按順序解析字尾名
    },
    ...
}

此時再執行npm run build即可打包。