Как правильно перенести html-файлы с помощью webpack?

Question

[Denis78656]

Всем привет!
Только начал разбираться с Webpack. Переношу из папки разработки в public html-файл, используя file-loader. Все переносится. Но в оригинальном html много подключенных сриптов, соответственно он так и переносится с этими зависимостями, а у меня после webpack уже есть один скомпонованный js-файл.

В общем, как перенести html-файл и заменить все подключения скриптов на один?

Answer 1

[alvvi]

html-webpack-plugin в помощь

Answer 2

[yanis_kondakov]

Если я правильно понял, то вы в html файле указали несколько скриптов. Почему нельзя эти скрипты подключать в каком-то одном js файле?

Вот мой пример вебпака №раз

spoiler

const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractPlugin = new ExtractTextPlugin({
  filename: './assets/css/app.css',
});

const config = {
  context: path.resolve(__dirname, 'src'),

  entry: {
    app: './app.js',
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './assets/js/[name]bundle.js',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        include: /src/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react', 'stage-1'],
          },
        },
      },
      {
        test: /\.html$/,
        use: ['html-loader'],
      },
      {
        test: /\.sass$/,
        include: [path.resolve(__dirname, 'src', 'assets', 'sass')],
        use: extractPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
          fallback: 'style-loader',
        }),
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: './assets/media/',
              publicPath: '../../',
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader'],
      },
    ],
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
    extractPlugin,
  ],

  devServer: {
    contentBase: path.resolve(__dirname, 'dist/assets/media'),
    compress: true,
    port: 12000,
    stats: 'errors-only',
    open: 'true',
  },

  devtool: 'inline-source-map',
};

module.exports = config;

Пример №два:

spoiler

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-source-map',
  entry: path.join(__dirname, 'client', 'app.js'),
  resolve: {
    root: [
      path.resolve(__dirname, "client"),
    ],
    extensions: ['', '.js', '.jsx', '.css']
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'client', 'index.tpl.html')
    }),

    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
        beautify: false,
        mangle: {
            screw_ie8: true,
            keep_fnames: true
        },
        compress: {
            screw_ie8: true
        },
        comments: false
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        include: path.join(__dirname, 'client')
      }, 
      {
        test: /\.css$/,
        loader: 'style!css',
        include: path.join(__dirname, 'client')
      },
      ,
      { 
        test: /\.styl$/, 
        include: path.join(__dirname, 'client'),
        loader: 'style-loader!css-loader!stylus-loader'
      }
    ]
  }
}