| 1 |
const WPExtractorPlugin = require( |
| 2 |
'@wordpress/dependency-extraction-webpack-plugin', |
| 3 |
); |
| 4 |
|
| 5 |
// eslint-disable-next-line import/no-extraneous-dependencies |
| 6 |
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); |
| 7 |
|
| 8 |
const path = require( 'path' ); |
| 9 |
const devMode = !process.argv.join( ':' ).includes( '--mode:production' ); |
| 10 |
|
| 11 |
module.exports = { |
| 12 |
context: path.resolve( __dirname, 'assets/src' ), |
| 13 |
entry: { |
| 14 |
'frontend/field': './frontend/field/index.js', |
| 15 |
'editor/index': './editor/index.js', |
| 16 |
}, |
| 17 |
output: { |
| 18 |
path: path.resolve( __dirname, 'assets/build' ), |
| 19 |
devtoolNamespace: 'jfb-phone-field', |
| 20 |
chunkFilename: ( pathData ) => { |
| 21 |
// Place i18n chunks in frontend/i18n/ subfolder |
| 22 |
if ( pathData.chunk.name && pathData.chunk.name.startsWith( 'phone-i18n-' ) ) { |
| 23 |
return 'frontend/i18n/[name].js'; |
| 24 |
} |
| 25 |
// Other chunks go to frontend/ |
| 26 |
return 'frontend/[name].js'; |
| 27 |
}, |
| 28 |
}, |
| 29 |
devtool: devMode ? 'inline-cheap-module-source-map' : false, |
| 30 |
resolve: { |
| 31 |
extensions: [ '.js', '.jsx' ], |
| 32 |
}, |
| 33 |
module: { |
| 34 |
rules: [ |
| 35 |
{ |
| 36 |
test: /\.js(x)?$/, |
| 37 |
use: [ |
| 38 |
'babel-loader', |
| 39 |
'@wyw-in-js/webpack-loader', |
| 40 |
], |
| 41 |
exclude: /node_modules/, |
| 42 |
}, |
| 43 |
{ |
| 44 |
test: /\.s?css$/, |
| 45 |
use: [ |
| 46 |
MiniCssExtractPlugin.loader, |
| 47 |
'css-loader', |
| 48 |
'postcss-loader', |
| 49 |
], |
| 50 |
}, |
| 51 |
{ |
| 52 |
test: /\.(png|jpe?g|gif|svg|webp)$/i, |
| 53 |
type: 'asset/resource', |
| 54 |
generator: { |
| 55 |
filename: 'images/[name][ext]', |
| 56 |
}, |
| 57 |
}, |
| 58 |
], |
| 59 |
}, |
| 60 |
plugins: [ |
| 61 |
new WPExtractorPlugin(), |
| 62 |
new MiniCssExtractPlugin(), |
| 63 |
], |
| 64 |
}; |
| 65 |
|
