this is my webpack config that I use for development and production modes;
let debug = process.env.NODE_ENV !== 'production';
import webpack from "webpack";
import LiveReloadPlugin from "webpack-livereload-plugin";
import WebpackNotifierPlugin from "webpack-notifier";
import validate from "webpack-validator";
import failPlugin from "webpack-fail-plugin";
import autoprefixer from "autoprefixer";
let loaders = [
{test: /\.tsx?$/, loader: 'ts', exclude: /(node_modules)/},
{
test : /\.js?$/,
exclude: /(node_modules)/,
loader : 'babel', // 'babel-loader' is also a legal name to reference
query : {
presets : ['es2015'],
cacheDirectory: true
}
},
{
test : /\.(eot|ttf|wav|mp3|png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader',
},
{
test : /\.scss$/,
loaders: [
"style-loader",
"css-loader",
"postcss-loader",
"sass-loader?outputStyle=compressed"
]
}
];
let globaljQuery = {
$ : 'jquery',
jQuery : 'jquery',
'window.jQuery': 'jquery'
};
let devPlugins = [
new WebpackNotifierPlugin({excludeWarnings: true}),
new webpack.ProvidePlugin(globaljQuery),
new LiveReloadPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
// new ExtractTextPlugin('css/app.css', {allChunks: true}),
failPlugin,
];
let prodPlugins = [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress : {warnings: false},
output : {comments: false},
sourceMap: false
}),
new webpack.ProvidePlugin(globaljQuery)
];
module.exports = validate({
context: __dirname,
devtool: 'eval',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
alias : {jquery: __dirname + '/resources/assets/js/libs/jquery-3.1.0.min.js'}
},
entry : [
// 'webpack/hot/dev-server',
// 'webpack-dev-server/client?http://localhost:8081',
__dirname + '/resources/assets/js/main.js'
],
output : {
path : __dirname + '/public',
publicPath: '/public/',
filename : 'js/app.js'
},
plugins: debug ? devPlugins : prodPlugins,
module : {
loaders: loaders,
},
postcss: () => {
return [autoprefixer]
}
});
But for some reason if I minify modules individually it compiles to a smaller bundle than if I delegate the same task to webpack in production mode.
For example if I use uncompressed "owl carousel" plugin and delegate compressing task to webpack the bundle is 43 kb larger.
Plugins such as photoswipe make the bundle around 82kb larger.
jQuery is about 120kb larger...
What do I miss that compressing individual plugins manually is more efficient, as from my point of view the webpack should be doing this task automatically and compressing files to same level as doing it manually...?
Related
This is an older project that will soon get some updates, but until then I need to use the original Webpack configs. The strange thing is this hasn’t been touched since the last release, yet there is a blocking issue.
When bundling for production and running in the browser, I get the following message:
Uncaught Error: Minified exception occurred; use the non-minified dev
environment for the full error message and additional helpful
warnings.
It seems like Webpack thinks I’m running in development mode but using the minified React files, hence the message. I’ve traced all occurrences of process.env.NODE_ENV and they all log "production".
This is the build command that bundles the files:
node --max_old_space_size=3072 node_modules/.bin/webpack --verbose --colors --display-error-details --config webpack/prod.config.js
… and the Webpack configuration:
require('babel/polyfill');
// Webpack config for creating the production bundle.
const path = require('path');
const webpack = require('webpack');
const strip = require('strip-loader');
const projectRootPath = path.resolve(__dirname, '../');
const assetsPath = path.resolve(projectRootPath, './static/dist');
const webpackPostcssTools = require('webpack-postcss-tools');
const map = webpackPostcssTools.makeVarMap('./src/theme/index.css');
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
module.exports = {
devtool: 'source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[chunkhash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: '/dist/'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.css$/, loaders: ['style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'] },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10&mimetype=application/font-woff' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10&mimetype=application/font-woff' },
{ test: /\.svg$/, loader: 'svg-inline' },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10' },
{ test: /\.modernizrrc$/, loader: 'modernizr' }
]
},
progress: true,
resolve: {
alias: {
font: __dirname + '/../src/fonts',
images: __dirname + '/../static/images',
modernizr$: path.resolve(__dirname, '../.modernizrrc')
},
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js', '.jsx']
},
postcss: () => {
return [
require('autoprefixer')({
browsers: ['last 3 versions']
}),
require('precss'),
require('postcss-custom-media')({
extensions: map.media
})
];
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'Scribe': 'scribe-editor'
}),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: false,
__DEVTOOLS__: false
}),
// ignore dev config
new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),
// set global vars
new webpack.DefinePlugin({
'process.env': {
// Useful to reduce the size of client-side libraries, e.g. react
NODE_ENV: JSON.stringify('production'),
API_HOST: JSON.stringify(process.env.API_HOST || 'api'),
WEB_HOST: JSON.stringify(process.env.WEB_HOST || 'https://www.website.com')
}
}),
// optimizations
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
webpackIsomorphicToolsPlugin
]
};
I cannot seem to find the problem. Anything jump out that looks fishy?
Because your code is set to production, it's getting minified and you're getting that message.
Try setting it to development (i.e. NODE_ENV: JSON.stringify('development'))
React - Minified exception occurred
When running gulp webpack, this is the error I get:
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./resources/assets/js/app.js in /home/vagrant/mysite/website
This is triggered by my 'gulp' command which runs webpack with the following:
gulp.task('webpack-compile', function(){
gulp.src('resources/assets/js/app.js')
.pipe(babel({
}))
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('public/assets/js'))
.pipe(browserSync.stream());
});
This is my current webpack file:
var path = require('path');
var webpack = require('webpack');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether'
});
module.exports = {
entry: './resources/assets/js/app.js',
output: {
path: path.resolve(__dirname, './public/assets/js'),
publicPath: './assets/js/',
filename: './app.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
};
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map';
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
My gulp file is in the root of the folder, my webpack.config file is in the same root folder.
The entry JS file is in resources/assets/js/app.js from the root folder.
What could I be doing wrong to get this error?
You might want to use webpack-stream
const gulp = require("gulp");
const webpackStream = require("webpack-stream");
const webpack = require("webpack");
const webpackConfig = require('./webpack.config.js');
gulp.task('webpack-compile', function(){
gulp.src('resources/assets/js/app.js')
.pipe(babel({
}))
.pipe(webpackStream(webpackConfig, webpack))
.pipe(gulp.dest('public/assets/js'))
.pipe(browserSync.stream());
});
and remove entry in webpack.config.js
I have a problem with prod build. Everything fine when I deploy it, I can visit the site, but two pages gives me an TypeError: r is not a function. I have been looking through a lot of issues on github and other sites, but din't find anything helpful.
Here is the error (image)
I'm using webpack 3.10.0, babel 6.23.0, node 8.9
Here is webpack.config.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('#ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
//const isDevBuild = true;
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: ['.js', '.ts'] },
output: {
filename: '[name].js',
publicPath: 'dist/', // Webpack dev middleware, if enabled, handles requests for this URL prefix
path: './wwwroot/',
chunkFilename: 'dist/[id].chunk.js'
},
module: {
rules: [
{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: "babel-loader?cacheDirectory" },
//{ test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular-router-loader', 'angular2-template-loader'] : '#ngtools/webpack' },
{ test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular-router-loader', 'angular2-template-loader'] : ['angular-router-loader?aot=true', '#ngtools/webpack'] },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
{ test: /\.scss$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize', 'sass-loader'] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module#AppModule')
, sourceMap: true
})
])
});
return [clientBundleConfig];
};
And webpack.vendor.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
'#angular/animations',
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/forms',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'zone.js',
];
const nonTreeShakableModules = [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'core-js/client/shim',
'web-animations-js',
'event-source-polyfill',
'jquery',
'screenfull',
'#swimlane/ngx-datatable/release/assets/icons.css',
'ng2-toasty',
'ng2-toasty/bundles/style-bootstrap.css',
'ng2-charts',
'ngx-bootstrap/modal',
'ngx-bootstrap/tooltip',
'ngx-bootstrap/popover',
'ngx-bootstrap/dropdown',
'ngx-bootstrap/carousel',
'bootstrap-vertical-tabs/bootstrap.vertical-tabs.css',
'bootstrap-toggle/css/bootstrap-toggle.css',
'bootstrap-toggle/js/bootstrap-toggle.js',
'bootstrap-select/dist/css/bootstrap-select.css',
'bootstrap-select/dist/js/bootstrap-select.js',
'bootstrap-datepicker/dist/css/bootstrap-datepicker3.css',
'font-awesome/css/font-awesome.css',
'./ClientApp/app/styles-external.css'
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevBuild = !(env && env.prod);
//const isDevBuild = true;
const sharedConfig = {
stats: { modules: false },
resolve: { extensions: ['.js'] },
module: {
rules: [
{ test: /\.(gif|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
]
},
output: {
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]',
path: './wwwroot/',
chunkFilename: 'dist/[id].[hash].chunk.js'
},
plugins: [
//new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
'window.Tether': 'tether',
tether: 'tether',
Tether: 'tether'
}),
new webpack.ContextReplacementPlugin(/\#angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)(#angular|esm5)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};
const clientBundleConfig = merge(sharedConfig, {
entry: {
// To keep development builds fast, include all vendor dependencies in the vendor bundle.
// But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
module: {
rules: [
{ test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
]
},
plugins: [
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin()
])
});
return [clientBundleConfig];
}
So, I took a step far back and saw my mistake. I used UglyfyJS to decrease size of js files in production deployment and didn't notice, that the current version were not competable with TS language, so, in my case, the right thing to do was to install UglyfyJS harmony and remove babel-loader. And after that when I imported all the stuff it started to work well.
I needed to create webpack config for project where I use reactjs,semantic-ui-react and nucleo icons. It build almost everything except fonts and icons. I don't quite understand how to build them and nucleo icons dont display in project after build.My config:
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ASSETS_PATH = './assets';
const BUILD_DIR = path.resolve(__dirname, 'build');
var webpack_config = {
context: path.resolve(__dirname, ASSETS_PATH),
entry: {
main : [
"react",
"react-dom",
"react-props",
"redux",
"react-redux",
"redux-thunk"
],
module : "./js/module/index.jsx",
},
output: {
filename: '[name].min.js',
path: BUILD_DIR + '/js'
},
resolve: {
extensions: [' ','.js', '.jsx', 'css']
},
devtool: 'inline-source-map',
module : {
loaders : [
{
test : /\.jsx?/,
loader : 'babel-loader?compact=true&comments=true&minified=true',
query: {
presets:[
'es2015',
'react',
'stage-1'
]
},
exclude: /node_modules/
},
{
test: /\.(woff|woff2|eot|ttf|svg)(\?.*)?$/,
loader: 'file-loader?name=../css/fonts/[name].[ext]',
options: {
limit: 10000
}
},
{
test: /\.(png|jpe?g|gif)(\?.*)?$/,
loader: 'file-loader?name=../css/images/[name].[ext]'
},
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production')
}
}),
new ExtractTextPlugin({
filename: "../css/style.min.css",
disable: false,
allChunks: true
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.min\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
new webpack.optimize.CommonsChunkPlugin({
names: ["main"]
}),
new webpack.optimize.UglifyJsPlugin({
minimize : true,
sourceMap : false,
beautify : false,
comments : false,
compress: {
warnings: false
}
})
]
};
module.exports = webpack_config;
So as a result I get js bundles in map 'js', I get css bundle style.min.css in css map. There also webpack creates images map, and puts jpg,png,svg. But font files(eot,ttf etc) he puts in js map with long names. How should I refactor my config in order to solve this problem?
Solved this problem with such loader structure(maybe will be usefull for somebody):
{
test: /\.(eot|svg|ttf|woff|woff2?)$/,
use: {
loader: 'file-loader'
, options: {
name: '../css/fonts/[name]-[hash:8].[ext]'
}
}
},
I'm trying to integrate Syncfusions' Js library with an Aurelia project using the Aurelia Syncfusion Bridge, but i'm getting the following error when trying to load the plugin into my vendor package.
ERROR in dll vendor
Module not found: Error: Can't resolve 'syncfusion-javascript' in 'C:\Users\Liam\Downloads\aurelia-webpack1333503894'
# dll vendor
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
entry: { 'app': 'aurelia-bootstrapper' },
resolve: {
extensions: ['.ts', '.js'],
modules: ['ClientApp', 'node_modules'],
},
output: {
path: path.resolve(bundleOutputDir),
publicPath: 'dist/',
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
{ test: /\.html$/i, use: 'html-loader' },
{ test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
{ test: /\.(png|jpg|jpeg|gif|cur|svg)$/, use: 'url-loader?limit=25000' },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff' } },
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' },
]
},
plugins: [
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new AureliaPlugin({ aureliaApp: 'boot' }),
].concat(isDevBuild ? [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
new webpack.optimize.UglifyJsPlugin()
])
}];
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-
webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
module.exports = ({ prod } = {}) => {
const isDevBuild = !prod;
return [{
stats: { modules: false },
resolve: {
extensions: ['.js']
},
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
]
},
entry: {
vendor: [
'aurelia-event-aggregator',
'aurelia-fetch-client',
'aurelia-framework',
'aurelia-history-browser',
'aurelia-logging-console',
'aurelia-pal-browser',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-templating-binding',
'aurelia-templating-resources',
'aurelia-templating-router',
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'jquery',
"aurelia-syncfusion-bridge",
"syncfusion-javascript"
],
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
}),
new ModuleDependenciesPlugin({
"aurelia-syncfusion-bridge": ["./grid/grid", "./grid/column"],
}),
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
])
}]
};
Thanks for your interest towards Syncfusion controls.
We recommend you to configure aurelia-syncfusion-bridge resources in webpack.config.js file. Because aurelia-syncfusion-bridge’s resources are traced by aurelia-webpack-plugin and included in app.bundle.
Suppose If we add this plugin in webpack.vendor.js, we need to bundle manually for every additional aurelia-syncfusion-bridge’s resources for proper bundling. Since, we recommend to configure our bridge in webpack.config.js, which will automatically bundle the bridge source along with application bundle.
We have prepared sample for the same and attached below.
Sample
Please let us know if you need further assistance on this.
Thanks,
Abinaya S