258 lines
6.6 KiB
JavaScript
258 lines
6.6 KiB
JavaScript
/**
|
|
* Grunt webpack task config
|
|
* @package Elementor
|
|
*/
|
|
const path = require( 'path' );
|
|
|
|
// Handling minification for production assets.
|
|
const TerserPlugin = require( 'terser-webpack-plugin' );
|
|
|
|
const aliasList = require('./webpack.alias.js').resolve;
|
|
|
|
const webpack = require('webpack');
|
|
|
|
// Cleaning up existing chunks before creating new ones.
|
|
const RemoveChunksPlugin = require('./remove-chunks');
|
|
|
|
// Preventing auto-generated long names of shared sub chunks (optimization.splitChunks.minChunks) by using only the hash.
|
|
const getChunkName = ( chunkData, environment ) => {
|
|
const minSuffix = 'production' === environment ? '.min' : '',
|
|
name = chunkData.chunk.name ? '[name].' : '';
|
|
|
|
return `${ name }[contenthash].bundle${ minSuffix }.js`;
|
|
};
|
|
|
|
const moduleRules = {
|
|
rules: [
|
|
// {
|
|
// enforce: 'pre',
|
|
// test: /\.js$/,
|
|
// exclude: /node_modules/,
|
|
// loader: 'eslint-loader',
|
|
// options: {
|
|
// failOnError: true,
|
|
// }
|
|
// },
|
|
{
|
|
test: /core[/\\]app.*\.(s)?css$/i,
|
|
use: [
|
|
{
|
|
loader: './loaders/app-imports.js',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
test: /\.js$/,
|
|
exclude: /node_modules/,
|
|
use: [
|
|
{
|
|
loader: 'babel-loader',
|
|
options: {
|
|
presets: [ '@wordpress/default' ],
|
|
plugins: [
|
|
[ '@wordpress/babel-plugin-import-jsx-pragma' ],
|
|
[ '@babel/plugin-transform-react-jsx', {
|
|
'pragmaFrag': 'React.Fragment',
|
|
} ],
|
|
[ '@babel/plugin-proposal-class-properties' ],
|
|
[ '@babel/plugin-transform-runtime' ],
|
|
[ '@babel/plugin-transform-modules-commonjs' ],
|
|
[ '@babel/plugin-proposal-optional-chaining' ],
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
const entry = {
|
|
'editor': [
|
|
path.resolve( __dirname, '../assets/dev/js/editor/utils/jquery-serialize-object.js' ),
|
|
path.resolve( __dirname, '../assets/dev/js/editor/utils/jquery-html5-dnd.js' ),
|
|
path.resolve( __dirname, '../assets/dev/js/editor/editor.js' ),
|
|
],
|
|
'admin': path.resolve( __dirname, '../assets/dev/js/admin/admin.js' ),
|
|
'elementor-admin-bar': path.resolve( __dirname, '../modules/admin-bar/assets/js/frontend/module.js' ),
|
|
'admin-feedback': path.resolve( __dirname, '../assets/dev/js/admin/admin-feedback.js' ),
|
|
'common': path.resolve( __dirname, '../core/common/assets/js/common.js' ),
|
|
'gutenberg': path.resolve( __dirname, '../assets/dev/js/admin/gutenberg.js' ),
|
|
'new-template': path.resolve( __dirname, '../assets/dev/js/admin/new-template/new-template.js' ),
|
|
'app': path.resolve( __dirname, '../core/app/assets/js/index.js' ),
|
|
'app-loader': path.resolve( __dirname, '../core/app/assets/js/app-loader' ),
|
|
'app-packages': path.resolve( __dirname, '../core/app/assets/js/app-packages' ),
|
|
'beta-tester': path.resolve( __dirname, '../assets/dev/js/admin/beta-tester/beta-tester.js' ),
|
|
'common-modules': path.resolve( __dirname, '../core/common/assets/js/modules' ),
|
|
'editor-modules': path.resolve( __dirname, '../assets/dev/js/editor/modules.js' ),
|
|
'editor-document': path.resolve( __dirname, '../assets/dev/js/editor/editor-document.js' ),
|
|
'qunit-tests': path.resolve( __dirname, '../tests/qunit/main.js' ),
|
|
};
|
|
|
|
const frontendEntries = {
|
|
'frontend-modules': path.resolve( __dirname, '../assets/dev/js/frontend/modules.js' ),
|
|
'frontend': { import: path.resolve( __dirname, '../assets/dev/js/frontend/frontend.js' ), dependOn: 'frontend-modules' },
|
|
'preloaded-modules': { import: path.resolve( __dirname, '../assets/dev/js/frontend/preloaded-modules.js' ), dependOn: 'frontend' },
|
|
};
|
|
|
|
const externals = {
|
|
'@wordpress/i18n': 'wp.i18n',
|
|
react: 'React',
|
|
'react-dom': 'ReactDOM',
|
|
'@elementor/app-ui': 'elementorAppPackages.appUi',
|
|
'@elementor/site-editor': 'elementorAppPackages.siteEditor',
|
|
'@elementor/router': 'elementorAppPackages.router',
|
|
};
|
|
|
|
const plugins = [
|
|
new webpack.ProvidePlugin( {
|
|
React: 'react',
|
|
ReactDOM: 'react-dom',
|
|
PropTypes: 'prop-types',
|
|
__: ['@wordpress/i18n', '__'],
|
|
sprintf: ['@wordpress/i18n', 'sprintf'],
|
|
} )
|
|
];
|
|
|
|
const baseConfig = {
|
|
target: 'web',
|
|
context: __dirname,
|
|
externals,
|
|
module: moduleRules,
|
|
resolve: aliasList,
|
|
};
|
|
|
|
const devSharedConfig = {
|
|
...baseConfig,
|
|
devtool: 'source-map',
|
|
mode: 'development',
|
|
output: {
|
|
path: path.resolve( __dirname, '../assets/js' ),
|
|
chunkFilename: ( chunkData ) => getChunkName( chunkData, 'development' ),
|
|
filename: '[name].js',
|
|
devtoolModuleFilenameTemplate: '../[resource]',
|
|
// Prevents the collision of chunk names between different bundles.
|
|
uniqueName: 'elementor',
|
|
},
|
|
watch: true,
|
|
};
|
|
|
|
const webpackConfig = [
|
|
{
|
|
...devSharedConfig,
|
|
plugins: [
|
|
...plugins,
|
|
],
|
|
name: 'base',
|
|
entry: entry,
|
|
},
|
|
{
|
|
...devSharedConfig,
|
|
plugins: [
|
|
new RemoveChunksPlugin( '.bundle.js' ),
|
|
...plugins,
|
|
],
|
|
name: 'frontend',
|
|
optimization: {
|
|
runtimeChunk: {
|
|
name: 'webpack.runtime',
|
|
},
|
|
splitChunks: {
|
|
minChunks: 2,
|
|
},
|
|
},
|
|
entry: frontendEntries,
|
|
},
|
|
];
|
|
|
|
const prodSharedOptimization = {
|
|
minimize: true,
|
|
minimizer: [
|
|
new TerserPlugin( {
|
|
terserOptions: {
|
|
keep_fnames: true,
|
|
},
|
|
include: /\.min\.js$/
|
|
} ),
|
|
],
|
|
};
|
|
|
|
const prodSharedConfig = {
|
|
...baseConfig,
|
|
mode: 'production',
|
|
output: {
|
|
path: path.resolve( __dirname, '../assets/js' ),
|
|
chunkFilename: ( chunkData ) => getChunkName( chunkData, 'production' ),
|
|
filename: '[name].js',
|
|
// Prevents the collision of chunk names between different bundles.
|
|
uniqueName: 'elementor',
|
|
},
|
|
performance: { hints: false },
|
|
};
|
|
|
|
const webpackProductionConfig = [
|
|
{
|
|
...prodSharedConfig,
|
|
plugins: [
|
|
...plugins,
|
|
],
|
|
name: 'base',
|
|
entry: {
|
|
// Clone.
|
|
...entry,
|
|
},
|
|
optimization: {
|
|
...prodSharedOptimization,
|
|
},
|
|
},
|
|
{
|
|
...prodSharedConfig,
|
|
plugins: [
|
|
new RemoveChunksPlugin( '.bundle.min.js' ),
|
|
...plugins,
|
|
],
|
|
name: 'frontend',
|
|
entry: {
|
|
// Clone.
|
|
...frontendEntries,
|
|
},
|
|
optimization: {
|
|
...prodSharedOptimization,
|
|
runtimeChunk: {
|
|
name: 'webpack.runtime.min',
|
|
},
|
|
splitChunks: {
|
|
minChunks: 2,
|
|
},
|
|
},
|
|
},
|
|
];
|
|
|
|
// Adding .min suffix to production entries.
|
|
webpackProductionConfig.forEach( ( config, index ) => {
|
|
for ( const entryPoint in config.entry ) {
|
|
let entryValue = config.entry[ entryPoint ];
|
|
|
|
if ( entryValue.dependOn ) {
|
|
// We duplicate the 'entryValue' obj for not affecting the 'entry' obj used by the dev process.
|
|
entryValue = { ...entryValue };
|
|
|
|
entryValue.dependOn += '.min';
|
|
}
|
|
|
|
delete config.entry[ entryPoint ];
|
|
config.entry[ entryPoint + '.min' ] = entryValue;
|
|
}
|
|
} );
|
|
|
|
const developmentNoWatchConfig = webpackConfig.map( ( config ) => {
|
|
return { ...config, watch: false };
|
|
} );
|
|
|
|
const gruntWebpackConfig = {
|
|
development: webpackConfig,
|
|
developmentNoWatch: developmentNoWatchConfig,
|
|
production: webpackProductionConfig
|
|
};
|
|
|
|
module.exports = gruntWebpackConfig;
|