webpack原理解析

webpack config

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    mode: 'development', // webpack4新增屬性，針對不同環境進行配置優化
    entry: {
        app: './src/app.js' // 入口檔案路徑（單入口）
    }
    output: { // 輸出檔案配置
        path: path.resolve(__dirname, 'dist'), // 輸出檔案目錄
        filename: '[name].js' // 輸出檔名
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, // 匹配js或jsx檔案
                use: [
                    'babel-loader' // 使用babel-loaer解析
                ],
                exclude: /node_modules/ // 對node_modules目錄不用該loader
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']) // 清空上次構建目錄的外掛
    ]
}
複製程式碼