I have a Vue.js app, which is going to be used as a theme for a WordPress site, and wordpress serves the assets on a diffrent path than Vue.js would expect, this is the path that would work normally:
<img src="src/assets/images/image.svg"/>
But this is what works:
<img src="/wp-content/themes/theme-name/src/assets/images/image.svg"/>
So my question is that how would I go about this? Since I have almost null knowledge about how wordpress operates, except for the REST API part, what could I do. I would like WebPack to translate these paths if possible, and i have tried the publicPath: '/wp-content/pathtoassets' trick, but it does not seem to work. Also if this is not possible with WebPack, can i do something in php to serve this path as a global variable to my Vue theme?
Here is my vue.config.js:
const {
WebpackManifestPlugin
} = require('webpack-manifest-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const gifsicle = require('imagemin-gifsicle');
const jpegtran = require('imagemin-jpegtran');
const optipng = require('imagemin-optipng');
module.exports = {
runtimeCompiler: true,
// filenameHashing: false,
productionSourceMap: false,
chainWebpack: config => {
config.plugins.delete('preload');
config.plugins.delete('prefetch');
config.module.rule('images').use('url-loader');
config.module.rule('svg').use('file-loader');
},
configureWebpack: config => {
config.output.filename = 'scripts/[name].js';
config.output.chunkFilename = 'scripts/[name].js';
config.plugins = [
...config.plugins,
new CopyWebpackPlugin({
patterns: [{
from: 'src/assets/fonts',
to: 'fonts/[name].[ext]',
},
{
from: 'src/assets/images',
to: 'images/[name].[ext]',
},
],
}),
new ImageMinimizerPlugin({
severityError: 'warning',
minimizerOptions: {
plugins: [
[gifsicle, {
interlaced: true
}],
[jpegtran, {
progressive: true
}],
[optipng, {
optimizationLevel: 5
}],
],
},
}),
new WebpackManifestPlugin({
fileName: 'manifest.json',
basePath: '/dist/',
}),
];
},
css: {
extract: {
filename: 'styles/[name].css',
chunkFilename: 'styles/[name].css',
},
},
};
Also I, have been able to use the manifest.json to enqueue my scripts and styles, i just dont know how to make these assets like images or fonts work like they should.
Furthermore, if anyone who sees this and has worked with Vue.js as a WordPress theme, and has any suggestions to what should/could do more to help me along the way, i would appreciate it real much!
Thank you in advance!
Welp, it turns out it's as easy as adding publicPatch property to your loaders, like:
config.module
.rule('svg')
.use('file-loader')
.options({
name: 'images/[name].[ext]',
publicPath,
});
The publicPath property being the following:
const [, themeName] = __dirname.match(/\/wp-content\/themes\/([^/]+)/);
const publicPath = isProduction ? `/wp-content/themes/${themeName}/dist/` : '/';
Which will compile down to my .svg's being resolved to this path:
/wp-content/themes/${themeName}/dist/images/[name].[ext]
Related
i was using r.js for quite some time to merge my amd modules that i use often on my page into a single file.
Now that i have moved to more modern language features such as template literals r.js won't compile giving me unexpected token errors. As r.js last commit was from 2017 i assume that it is not actively maintained anymore. There doesn‘t seem to be an option to set it to ES6
My r.js configuration is as follows:
({
'baseUrl': './../',
'out': "./../Page.combined.js",
'include': [
'Page/System/Core',
'Page/System/Push',
'Page/System/Dialog',
'Page/System/Form',
],
paths: {
'Page': '.',
'perfect-scrollbar': 'empty:',
'tslib': 'empty:',
},
'fileExclusionRegExp': /^(?:_build|(?:r|app.build)\.js)$/
})
I tried webpack, but it seems i can't get it work. I need the same output as r.js with unnamed defines to concatenated named defines define('XY/Named/Module', ['dependency1', 'dependency2], function(dep1, dep1) {}), define(...) as i'm referencing those modules from outside in html like require(['Page/System/Core'], function(Core) {});
My current webpack configuration:
const webpack = require('webpack');
const path = require('path');
module.exports = [
{
name: 'main',
mode: 'production',
entry: [
'Page/System/Core',
'Page/System/Push',
'Page/System/Dialog',
'Page/System/Form',
],
output: {
filename: 'Page.combined.js',
path: path.resolve(__dirname, '_webpack/main'),
clean: true,
},
resolve: {
alias: {
Page: path.resolve(__dirname, './_package/files/js/'),
}
},
optimization: {
concatenateModules: false,
usedExports: false,
moduleIds: 'named',
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
],
externalsType: 'amd',
externals: [
'perfect-scrollbar',
],
}
];
but this results in var t={2451:()=>{!function(t){functi and the like chunks, which i cannot work with.
I'm not limited to webpack. I'm just trying to get it to work :)
Any help in that direction is greatly appreciated.
I am building custom gutenberg blocks using npm, webpack and #wordpress/scripts. Everything was fine until I tried to use block.json file. To use block.json file I need block.asset.php file in the build directory because that's the way WordPress core is coded... (https://github.com/WordPress/gutenberg/issues/40447)
And now my problem is that running npm run build does not generate .asset.php file and I do not know why. When I register blocks using wp_enqueue_script or when I manually create an empty .asset.php it works fine.
My webpack.config.js now looks like this:
const defaultConfig = require("#wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
...defaultConfig,
entry: {
'cgbms-section-block': './src/section-block.js',
'cgbms-article-block': './src/article-block.js',
'cgbms-article-header-block': './src/article-header-block.js',
'cgbms-category-block': './src/category-block.js',
'cgbms-category-block-edit': './src/category-block-edit.js',
'cgbms-card-block': './src/card-block.js',
'style-front': './src/css/style-front.scss',
'style-editor': './src/css/style-editor.scss',
},
output: {
path: path.join(__dirname, './build/'),
filename: './blocks/[name].js'
},
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './css/[name].css'
})
],
externals: {
'#wordpress/blocks': 'wp.blocks',
'#wordpress/block-editor': 'wp.blockEditor'
},
}
Okay so solution is actually really simple.
I think I had to import default plugins config:
...defaultConfig.plugins
So my whole webpack.config.js is now:
const defaultConfig = require("#wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
...defaultConfig,
entry: {
'cgbms-section-block': './src/section-block.js',
'cgbms-article-block': './src/article-block.js',
'cgbms-article-header-block': './src/article-header-block.js',
'cgbms-category-block': './src/category-block.js',
'cgbms-category-block-edit': './src/category-block-edit.js',
'cgbms-card-block': './src/card-block.js',
'style-front': './src/css/style-front.scss',
'style-editor': './src/css/style-editor.scss',
},
output: {
path: path.join(__dirname, './build/'),
filename: './blocks/[name].js'
},
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin({
filename: './css/[name].css'
})
]
}
as you can see I also removed externals block.
This may be an x/y question, so here goes!
Background:
I'm trying to run a comparison of two versions of a JS library to measure the benefits of its side-effect free tree-shaking modules.
My plan was to make two .html pages, one with old.js, and another importing specific modules (i.e. import {mod1, mod2} from "new.js")
Webpack Chunk Names
Ideally, I'd like each individual module to be placed into its own chunk so I can document how much each module "weighs".
I see webpack has an option to add /* webpackChunkName: "my-chunk-name" */ inside of an import.
Question:
Is it possible to dynamically import an individual property/module while specifying its name to generate its own chunk?
I've tried using this code below, but it combines them into a single chunk based on the first mod1 chunkname.
document.getElementById('mod1').onclick = function () {
import(/* webpackChunkName: "mod1" */ 'new.js').then(
(lib) => {
lib.mod1()
}
);
};
document.getElementById('mod2')!.onclick = function () {
import(/* webpackChunkName: "mod2" */ 'new.js').then(
(lib) => {
lib.mod2()
}
);
};
webpack.config.js
// Generated using webpack-cli https://github.com/webpack/webpack-cli
import { Configuration } from 'webpack';
import 'webpack-dev-server';
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isProduction = process.env.NODE_ENV == 'production';
const config = {
// An entry point is the root JS file associated with a HTML route
entry: {
old: './src/old.ts',
new: './src/new.ts',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
open: false,
host: 'localhost',
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like # symbols
return `npm.${packageName.replace('#', '')}`;
},
},
},
},
},
plugins: [
new HtmlWebpackPlugin({
// output name (URL path)
filename: 'old.html',
// the template property to the HTML template
template: path.resolve(__dirname, 'src', 'old.html'),
// associate it with one or more of the entry points with the chunks property.
chunks: ['old'],
}),
new HtmlWebpackPlugin({
// output name (URL path)
filename: 'new.html',
// the template property to the HTML template
template: path.resolve(__dirname, 'src', 'new.html'),
// associate it with one or more of the entry points with the chunks property.
chunks: ['new'],
}),
new HtmlWebpackPlugin({
// output name (URL path)
filename: 'index.html',
// the template property to the HTML template
template: path.resolve(__dirname, 'index.html'),
// associate it with one or more of the entry points with the chunks property.
chunks: [],
}),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
performance: {
hints: false,
},
module: {
rules: [
{
test: /\.(ts|tsx)$/i,
loader: 'ts-loader',
exclude: ['/node_modules/'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: 'asset',
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
resolve: {
extensions: ['.ts', '.js'],
},
experiments: {
topLevelAwait: true,
},
};
module.exports = () => {
if (isProduction) {
config.mode = 'production';
} else {
config.mode = 'development';
}
return config;
};
I think the reason webpack combines the same module(new.js) into a single chunk is because MergeDuplicateChunksPlugin is used.
Its functionality is very well described by its name and in this situation it can be seen in action: the mod1 and mod2 chunks are using the same new.js module, so they're fundamentally the same.
Fortunately, this plugin is behind a flag and it can be deactivated by modifying your configuration as follows:
config = {
/* ... */
optimization: {
mergeDuplicateChunks: false,
},
/* ... */
}
With the above configuration, you should now see the new.js module being duplicated in two different chunks - mod1 and mod2.
After I've updated webpack from 3.11.0 to 4.6.0, breakpoints in Angular Typescript started moving automatically at the end of the file during debug.
If I stop debug, they returns where I've placed them.
EXAMPLE (which will explain the situation better than my intro above)
If I have - for example - a .ts file of 100 lines and I set a
breakpoint on typescript on Visual Studio at line 50, when I run my
app debug, the breakpoints moves automatically at the end of the file
(so at line 100). When I stop debug, it returns on line 50.
The issue started when I've updated Webpack to last version and seems like to be related to sourcemap.
I share with you my webpack.config.js content below. After the code snippet, I will also tell you what I've changed from 3.11.0 to 4.6.0.
Can anyone help me to solving this?
P.S.: I've kept the default line that enable in-line sourcemaps if you delete or comment it in the config file (see comment Remove this line if you prefer inline source maps in my code below) because using in-line sourcemaps on typescript literally kills my computer.
MY CODE BELOW
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;
var nodeExternals = require('webpack-node-externals');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isClient = typeof window !== 'undefined';
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
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
globalObject: 'self'
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: ['to-string-loader', 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
//font management
{
test: /\.(svg|eot|ttf|woff|woff2)$/,
use: [{
loader: 'file-loader',
options: {
name: 'images/[name].[hash].[ext]'
}
}]
}
]
},
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) },
optimization: {
minimizer: [
// specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
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
})
] : [
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? [] : [
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
WHAT CHANGED BETWEEN VERSIONS
webpack.config.js
1. - moved uglify from plugins to optimization, but copy-pasting this configuration from the internet. (Maybe the issue is related to this?)
optimization: {
minimizer: [
// specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
2. - removed AOT webpack plugin from production environment configuration
Solved by disabling browser link in Visual Studio 2017.
Also set "sourcemap:true" on tsconfig.
I scaffold a webpack template for my vue project using the vue-cli. Subsequently, I added Bulma's CSS. When I run the program normally (npm run dev), the CSS renders properly. However, upon building the project for production (npm run build) with the default webpack configuration, the styling of the web app is now misaligned. Does anyone know how to resolve this issue?
For comparison:
Production Build of Vue with broken CSS
Dev version of Vue rendering CSS properly
The following is my webpack config (webpack.prod.conf.js)
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
I was facing the same issue as yours. After some debugging, I realize that this is due to the order of css rules. It seems that the built css file doesn't have the same rules order as the dev server.
I searched a little bit on this topic. On the webpack documentation I have found this:
Keep in mind that it’s difficult to manage the execution order of modules, so design your stylesheets so that order doesn’t matter. (You can, however, rely on the order within a given CSS file.)
I solved my problem by increasing the specificity of my custom css selectors by using #id instead of .class.
ex:
// my custom css rules
#navbar a {
color: white
}
instead of:
// my custom css rules
.navbar a {
color: white
}
Thus the order of your custom rules versus the bulma ones won't matter because the priority will be always for the id over the class selector.
I hope this is useful