基本配置

❝

webpack 預設的零配置的功能很弱,有的時候需要手動配置,預設的配置檔案是 webpack.config.js

❞

配置檔案

• 在專案根目錄新建webpack.config.js

• 採用node.js寫法

• 匯出一個物件

  「入口檔案」

  • entry：預設值是./src/index.js，可以自己指定檔案

    • 也可以物件語法
    • 使用場景多頁面和抽離公共檔案的時候

    module.exports = {
      entry: {
        index: './src/index.js',
        about: './src/about.js'
      }
    };
複製程式碼

「出口檔案」

output：預設值是./dist/main.js

• filename：生成檔案的名字

• [hash]是避免快取的隨機hash值

• [name]是對應「entry」，打包後會生成indexxxxx.js，aboutxxxxx.js

      module.exports = {
        entry: {
          index: './src/index.js',
          about: './src/about.js'
        },
        output: {
        	filename: '[name][hash].js',
        	path: path.resolve(__dirname, 'dist')
        }
      };
複製程式碼

• 「path」：這裡需要引入一個 node 的核心模組，需要打包後存放的地址是一個絕對路徑，需要path.resolve()進行解析

• 「模式」：mode，告訴 webpack 以哪種環境執行打包，預設是production

  • 「development」 ：開發環境

  • 「production」：生產環境

const path = require('path')
module.exports = {
	mode:'development',
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'dist')
    }
}
複製程式碼

❝

執行 npx webpack 進行打包，會生成一個 dist 資料夾，裡面有一個 build.js

❞

歡迎關注公眾號