felvieira
11/21/2018 - 4:48 PM

Webpack Html Variaveis

Usar variaveis do plugin HTML para popular um arquivo html de template ejs ou html

index.ejs
content_copyfile_download
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title><%= htmlWebpackPlugin.options.title %></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <% for (let css in htmlWebpackPlugin.files.css) { %>
            <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[css] %>">
          <% } %>
    </head>
    <body>
            <% var content=['teste1','teste2']; %>
            <ul>
                    <% for(var i=0; i<content.length; i++) {  %>
                       <span id="selected"></span><script>console.info('test <%= i %> = <%= content[i] %>');</script>            
                        <li>
                            <a href='supplies/<%= content[i] %>'>
                                <%= content[i] %>
                            </a>
                        </li>
                    <% } %>
                </ul>

        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
            
            <!-- <% for (let js in htmlWebpackPlugin.files.js) { %>
                <script src="<%= htmlWebpackPlugin.files.js[js] %>"></script>
              <% } %> -->

            <script async defer type="text/javascript" data-chat-app="<%= htmlWebpackPlugin.options.dataChatApp %>" src="./ps-chat-client.js"></script>
    </body>
</html>
webpack.dev.config.js
content_copyfile_download
const path = require('path');
const chokidar = require('chokidar');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	devServer: {
		before(app, server) {
			chokidar.watch([
				'./src/**/*.html'
			]).on('all', function() {
				server.sockWrite(server.sockets, 'content-changed');
			});
		},
		contentBase: path.resolve(__dirname, './dist'),
		watchOptions: {
			poll: true
		},
		watchContentBase: true,
		compress: true,
		port: 8080,
		publicPath: '/',
		headers: {
			'Access-Control-Allow-Origin': '*',
			'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
			'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
			'Access-Control-Allow-Credentials': true
		}
	},
	devtool: 'source-maps',
	mode: 'development',
	entry: ['./src/index.js',
		'webpack-dev-server/client?http://localhost:8080',
		'webpack/hot/only-dev-server'
	],
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'ps-chat-client.js',
		library: 'bundle_[name]',
		publicPath: './'
	},
	module: {
		rules: [{
			test: /\.js$/,
			exclude: /node_modules/,
			use: {
				loader: 'babel-loader',
				options: {
					presets: ['env']
				}
			}
		},
		{
			test: /\.html$/,
			include: path.resolve(__dirname, './src/'),
			use: {
				loader: 'html-loader',
				options: {
					minimize: true,
					interpolate: true,
					collapseWhitespace: true,
					conservativeCollapse: false
				}
			}
		}]
	},
	optimization: {
		minimize: true
	},
	plugins: [
		new CleanWebpackPlugin(['dist']),
		new UglifyJsPlugin({
			cache: true,
			parallel: true,
			uglifyOptions: {
				compress: {
					drop_console: false
				},
				comments: false,
				ecma: 6,
				mangle: true
			},
			sourceMap: true
		}),
		new HtmlWebpackPlugin({
			inject: false,
			title: 'Chat Webclient',
			dataChatApp: 'ps-faq',
			template: './src/index.ejs'
		}),
		new CopyWebpackPlugin([{
			from: './src/vendors',
			to: './vendors/',
			force: true,
			toType: 'dir'
		}])
	]
};