Question

我的src结构是这样的：

--src/
----index.js
----index.html
----background/
------background.js
------background.html
----editor/
------editor.js
------editor.html

我是webpack的新手，但我能够让它与index.js一起工作：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = function (env) {
    return {
        devtool: 'cheap-module-source-map',
        entry: ['babel-polyfill', './src/web/index.js'],
        output: {
            path: path.join(__dirname, '../dist/web'),
            filename: 'index.bundle.js',
            publicPath: '/static/'
        },
        resolve: {
            extensions: ['.js']
        },
        module: {
            loaders: [
                { test:/\.js$/, exclude:/node_modules/, loader:'string-replace-loader?search=^.*?console\.[a-zA-Z].*?$&flags=gm&replace=', enforce:'pre' },
                { test:/\.js$/, exclude:/node_modules/, loader:'babel-loader' }
            ]
        },
        plugins: [
            new CopyWebpackPlugin([
                { from:'./src/web' },
            ], {
                ignore: ['*.js']
            })
        ]
    }
}

它在根目录中正确地吐出index.bundle.js。但我也希望它在后台目录中创建一个（1）background.bundle.js，在编辑器目录中创建一个（2）editor.bundle.js。是否可以自动检测名称并在其各自的目录中创建一个包？

Answer 1

我认为您必须将entry更改为object以启用多次输入。

{
    entry: {
        web: './src/web/index.js',
        background: './src/background/background.js',
        editor: './src/editor/editor.js'
    }
}

并将output.filename更改为

{
    output:{
        filename: '[name]/[name].bundle.js'
    }
}

有关详细信息，请参阅https://webpack.js.org/configuration/output/#output-filename。

在找到js文件的目录中创建多个包

1 个答案: