我的Webpack 筆記

入口（entry）、輸出（output）、loader、外掛plugins

1、entry 

entry → 指定一個/多個入口起點，預設 “./src”

module.exports = {
    entry: '...'
}

用法：

entry: string | Array<string>
entry: {[entryChunkName: string]: string | Array<string>}

分離應用程式[app] 和 第三方庫[vendor]入口

// webpack.config.js
const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
};

多頁面應用程式：

const config = {
    entry: {
        pageOne: './src/pageOne/index.js',
        pageTwo: './src/pageTwo/index.js',
        pageThree: './src/pageThree/index.js',
    }
};

2、output

output → 輸出建立的 bundle,及如何命名，預設 './dist'

const path = require('path');
module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // 目標輸出目錄， __dirname 指向被執行 js 檔案的絕對路徑
        filename: 'my-first-webpack.bundle.js' // 輸出檔案的檔名
    },
};

3、多個入口起點

{
    entry: {
        app: './src/app.js',
        search: './src/search.js', // 寫入到硬碟： ./dist/app.js， ./dist/search.js
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}

4、loader

const path = require('path');
const config = {
    output: { filename: 'my-first-webpack.bundle.js},
    module: {
        rules: [
            {test: '/\.txt$/, use: 'raw-loader' }
        ]
    }
};
module.export = config;