我的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;