How to transfer html files using webpack?

Hello!
Just started to deal with Webpack. Transferred from the development folder in the public html file using the file-loader. All tolerated. But in the original html a lot of connected Treptow accordingly he transferred with these dependencies, I webpack already have one linked. js file.

In General, how to transfer the html file and replace all the connection scripts on one?
June 8th 19 at 17:09
2 answers
June 8th 19 at 17:11
Solution
June 8th 19 at 17:13
Solution
If I understand correctly, you are in the html file pointed out a few scripts. Why can't these scripts to connect to a single js file?

Here is my example webpage number of times
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;



Example number two:
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'
}
]
}
}

Find more questions by tags Webpack