1.33.0 release and webpack glsl loader

Hi,

I’m happily using webpack with cesium and everything works nice. However, after recent update to fresh 1.33.0 release webpack gives me warnings:

WARNING in ./~/cesium/Source/ThirdParty/Shaders/FXAA3_11.glsl
Module parse failed: 
$/work/frontend/node_modules/cesium/Source/ThirdParty/Shaders/FXAA3_11.glsl Unexpected character '#' (87:0)
You may need an appropriate loader to handle this file type.
| 
| 
| #if (FXAA_QUALITY_PRESET == 10)
|     #define FXAA_QUALITY_PS 3
|     #define FXAA_QUALITY_P0 1.5
 @ ./~/cesium/Source/ThirdParty ^.\/.*$
 @ ./~/cesium/Source/ThirdParty/pako_inflate.js
 @ ./~/cesium/Source/Core/GoogleEarthEnterpriseMetadata.js
 @ ./~/cesium/Source/Core ^.\/.*$
 @ ./~/cesium/Source/Core/buildModuleUrl.js
 @ ./app/index.js

Adding glsl loaders to webpack didn’t solve this issue. Anyway, everything works nice expect this issue keeps me worried a bit 😃

My webpack config is:

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;
var webpack = require('webpack');

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

var path = require('path');

var config = {
    node: {
        fs: 'empty' /* workaround for cesium 1.33 */
    },
    entry: {
        //abc: path.join(__dirname, 'app', 'loader.js'),
        main: path.join(__dirname, 'app', 'index.js')
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: '[name]-[hash].js',
        sourcePrefix: '',
        publicPath: '/'
    },

    module : {
        /* cesium quirks */
        unknownContextCritical: false,
        unknownContextRegExp: /^.\/.*$/,
        /* ^^^^^ https://github.com/AnalyticalGraphicsInc/cesium/issues/4876 */
        rules : [ {
            test: /\.(js)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                query: {
                    presets: [
                        ['es2015', { 'modules': false }],
                        ['react']],
                    plugins: ['lodash']
                    
                }
        } }, {
            /* concat css */
            test: /\.css$/,
            use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
        }, {
            /* use these with care */
            test: /\.(png|gif|jpg|jpeg)$/,
            loader: 'file-loader'
        },
        /*{ test: /\.png$/, use: "url-loader?limit=100000" },
        { test: /\.jpg$/, use: "file-loader" },*/
        /* webfonts */
        { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream' },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' }
        ]
    },
    devServer : {
        historyApiFallback: true,
        contentBase: './public'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("common.js"),
        new HtmlWebpackPlugin({
            minChunks: Infinity,
            chunksSortMode: function (a, b) {  //alphabetical order
                if (a.names[0] > b.names[0]) {
                    return 1;
                }
                if (a.names[0] < b.names[0]) {
                    return -1;
                }
                return 0;
            },
            template: 'app/index.html',
            inject: true 
        }),
        new webpack.ProvidePlugin({
            Promise: 'es6-promise-promise'
        }),
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': JSON.stringify('"production"')
          }
        }),
        new ExtractTextPlugin("styles.css"),
        new LodashModuleReplacementPlugin()
    ]
}

if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
        /* pass NODE_ENV down to to-be-compiled code */
        new webpack.DefinePlugin({
            'process.env' : {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
            }
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new OptimizeCssAssetsPlugin({
            cssProcessorOptions: {
                safe: true, /* preserve z-indexes */
        }}),
        new webpack.optimize.UglifyJsPlugin()
    );
}

module.exports = config;

[thw0rted]

I will keep it in mind – I have a deadline next week so I’m unlikely to have the time to blog before then, but maybe after? That said, I’m not convinced I’m using this properly. My current Webpack config “works” but takes a relatively long time (20+ seconds) to build and results in one 10+MB JS file.

I think I have some reading to do!

[mramato]

I don’t think so, we don’t really have any “how to use Cesium with webpack” doc and we also never added specific doc for our modules other than the fact they are AMD.