webpack-dev-server не прикрепляет файлы JavaScript к нескольким HTML-файлам - PullRequest
Новая
       50

webpack-dev-server не прикрепляет файлы JavaScript к нескольким HTML-файлам

0 голосов
/ 07 октября 2019

Я не могу настроить режим разработки Webpack, чтобы он обслуживал несколько файлов HTML со своими файлами js и scss. Это хорошо работает при разработке, но что-то пошло не так, когда я пытаюсь увидеть свое приложение через webpack-dev-server. Я могу открывать HTML-файлы, но без вложенного JavaScript или открывать их с рабочим js, но с закачкой в ​​реальном времени. В качестве конфигурации веб-пакета я использую два файла: - webpack.common.js, - webpack.dev.js:

Я пробовал много вещей, но единственное, что работает, - это прикрепить файлы js вручную перед компиляцией, но вв этом случае при сборке пакета прикрепляются неправильные файлы.

webpack.common.js: 

module.exports = {
    entry: {
        index: './src/js/index.js'
    },
    module: {
        rules: [
            {
                test: /\.(html)$/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: '../img'
                } 
            }
        ]
    }
};

const htmlFiles = ['example1', 'example2'];
const createEntrys = () => {
    htmlFiles.map(file => {
        module.exports.entry[file] = `./src/js/${file}.js`
    })

};
createEntrys();

webpack.dev.js: 

const htmlFiles = ['example1', 'example2'];
const createPage = (fileName) => {
    return new HtmlWebpackPlugin({
        template: 'src/html/' + `${fileName}.html`,
        filename: `../html/${fileName}.html`,
        chunks: [fileName]
    });
};

module.exports = merge(common, {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: `../index.html`,
            chunks: ['index'],
            inject: true
        }),
        ...htmlFiles.map(file => createPage(file))
    ],
    devServer: {
        contentBase: path.join(__dirname, 'src'),
        watchContentBase: true,
        port: 8080
    }
});
...