For my vue3, vuetify, ts project Vite builds dev, prod but in prod it does not release console - vuejs3

I created my first vue3, ts, vuetify project, using vite (4.1.1).
vite => server is fine, no error, no warning
vite build => no error, no warning, files are generated as expected in dist and work as expected.
But but, when I run build in console, it is stuck after generation, the process never ends. And without the process ending, I cannot deploy the solution :$.
Any idea of what could prevent it from finishing ?
tsconfig.json
{
"$schema": "https://json.schemastore.org/tsconfig.json",
"files": [],
"compilerOptions": {
"newLine": "lf"
},
"references": [
{ "path": "./tsconfig.config.json" },
{ "path": "./tsconfig.app.json" }
]
}
tsconfig.app.json
{
"$schema": "https://json.schemastore.org/tsconfig.json",
"extends": "#vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
},
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"types": ["vuetify"]
}
}
tsconfig.app.json
{
"$schema": "https://json.schemastore.org/tsconfig.json",
"extends": "#vue/tsconfig/tsconfig.node.json",
"include": [
"vite.config.*"
],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}
vite.config.ts
import { defineConfig, type UserConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';
import { checker } from 'vite-plugin-checker';
import vue from '#vitejs/plugin-vue';
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
import { fileURLToPath, URL } from 'node:url';
import fs from 'node:fs';
/**
* Vite Configure
*
* #see {#link https://vitejs.dev/config/}
*/
export default defineConfig(async ({ command, mode }): Promise<UserConfig> => {
const config: UserConfig = {
// https://vitejs.dev/config/shared-options.html#base
base: './',
// https://vitejs.dev/config/shared-options.html#define
define: { 'process.env': {} },
plugins: [
// Vue3
vue({
template: {
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#image-loading
transformAssetUrls,
},
}),
// Vuetify Loader
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#vite-plugin-vuetify
vuetify({
autoImport: true,
styles: { configFile: 'src/styles/settings.scss' },
}),
// vite-plugin-checker
// https://github.com/fi3ework/vite-plugin-checker
checker({
typescript: true,
vueTsc: true,
eslint: {
lintCommand:
'eslint . --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint', // for example, lint .ts & .tsx
},
}),
],
// https://vitejs.dev/config/server-options.html
server: {
fs: {
// Allow serving files from one level up to the project root
allow: ['..'],
},
},
// Resolver
resolve: {
// https://vitejs.dev/config/shared-options.html#resolve-alias
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
'~': fileURLToPath(new URL('./node_modules', import.meta.url)),
},
extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
},
// Build Options
// https://vitejs.dev/config/build-options.html
build: {
// Build Target
// https://vitejs.dev/config/build-options.html#build-target
target: 'esnext',
// Minify option
// https://vitejs.dev/config/build-options.html#build-minify
minify: 'esbuild',
// Rollup Options
// https://vitejs.dev/config/build-options.html#build-rollupoptions
rollupOptions: {
// #ts-ignore
output: {
manualChunks: {
// Split external library from transpiled code.
vue: ['vue', 'pinia'],
vuetify: [
'vuetify',
'vuetify/components',
'vuetify/directives'
],
materialdesignicons: ['#mdi/font/css/materialdesignicons.css'],
},
plugins: [
mode === 'analyze'
? // rollup-plugin-visualizer
// https://github.com/btd/rollup-plugin-visualizer
visualizer({
open: true,
filename: 'dist/stats.html',
})
: undefined,
],
},
},
},
esbuild: {
// Drop console when production build.
drop: command === 'serve' ? [] : ['console'],
},
};
// Write meta data.
fs.writeFileSync(
fileURLToPath(new URL('./src/Meta.ts', import.meta.url)),
`import type MetaInterface from '#/interfaces/MetaInterface';
// This file is auto-generated by the build system.
const meta: MetaInterface = {
version: '${require('./package.json').version}',
date: '${new Date().toISOString()}',
};
export default meta;
`
);
return config;
});
vite build --mode analyze : does build and opens the stat html so means the build is actually finished ? But still, it is stuck in console.
I checked circular dependencies.

Related

vue.config.js into quasar.config.js

I'd like to use the the following vue.config.js with Quasar:
module.exports = {
publicPath:
process.env.NODE_ENV === "production"
? "/static/dist/"
: "http://127.0.0.1:8080",
outputDir: "../../static/dist",
indexPath: "../../../templates/index.html",
pages: {
index: {
entry: "src/main.js",
title: "QuestionTime",
},
},
devServer: {
devMiddleware: {
publicPath: "http://127.0.0.1:8080",
writeToDisk: (filePath) => filePath.endsWith("index.html"),
},
hot: "only",
headers: { "Access-Control-Allow-Origin": "*" },
},
};
I'd like to have the index.html file generated by the writeToDisk module.
I've updated the quasar.conf.js, but the index.html is not generated:
module.exports = configure(function (ctx) {
return {
publicPath:
process.env.NODE_ENV === "production"
? "/static/dist/"
: "http://127.0.0.1:8080",
outputDir: "../../../static/dist",
indexPath: "../../../templates/index.html",
pages: {
index: {
entry: "src/main.js",
title: "QuestionTime",
},
},
// https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
supportTS: false,
// https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-webpack/boot-files
boot: [
'axios',
],
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
css: [
'app.scss'
],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v5',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
],
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
build: {
vueRouterMode: 'hash', // available values: 'hash', 'history'
// transpile: false,
// publicPath: '/',
// Add dependencies for transpiling with Babel (Array of string/regex)
// (from node_modules, which are by default not transpiled).
// Applies only if "transpile" is set to true.
// transpileDependencies: [],
// rtl: true, // https://quasar.dev/options/rtl-support
// preloadChunks: true,
// showProgress: false,
// gzip: true,
// analyze: true,
// Options below are automatically set depending on the env, set them if you want to override
// extractCSS: false,
// https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpack (chain) {
chain.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }])
}
},
...
Pkg quasar... v2.9.2
Pkg #quasar/app-webpack... v3.6.1
Pkg webpack... v5
I' running Quasar with webpack. I there anything I missed / to take care of?

Wp-strap Wordpress plugin boilerplate prod output is empty

I want to use this boilerplate https://github.com/wp-strap/wordpress-plugin-boilerplate to create Wordpress plugins .
The issue is yarn prod results in empty output (css files in public folder are empty) .
Yarn devis working fine.
Bellow are my config files :
package.json
{
"name": "wordpress-webpack-workflow",
"version": "1.1.4",
"author": "WP-Strap",
"license": "MIT",
"homepage": "https://github.com/wp-strap/wordpress-webpack-workflow",
"description": "Modern WebPack workflow for WordPress front-end development and testing (plugins & themes) with handy tools included.\n",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/wp-strap/wordpress-webpack-workflow.git"
},
"bugs": {
"url": "https://github.com/wp-strap/wordpress-webpack-workflow/issues"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"prod": "webpack --env NODE_ENV=production --env production",
"prod:watch": "webpack --env NODE_ENV=production --env production --watch",
"dev": "webpack --env NODE_ENV=development",
"dev:watch": "webpack --env NODE_ENV=development --watch",
"eslint": "eslint assets/src/js/**/*.js",
"eslint:fix": "eslint assets/src/js/**/*.js --fix",
"stylelint": "stylelint assets/src/**/**/*.{css,scss,pcss}",
"stylelint:fix": "stylelint assets/src/**/**/*.{css,scss,pcss} --fix",
"prettier": "prettier assets/src/js/**/*.js",
"prettier:fix": "prettier --write assets/src/js/**/*.js",
"translate": "wp-pot --src '**/**/**/*.php' --dest-file 'languages/report-error.pot' --package 'report-error' --domain 'report-error' --last-translator 'WP SCRIPT LAB <wpscriptlab#gmail.com>' --team 'WP SCRIPT LAB <wpscriptlab#gmail.com>' --bug-report 'wpscriptlab.com'"
},
"babel": {
"extends": "./webpack/babel.config.js"
},
"eslintConfig": {
"extends": [
"./webpack/.eslintrc.js"
]
},
"prettier": "./webpack/.prettierrc.js",
"stylelint": {
"ignoreFiles": [
"./assets/public/css/**/*.css",
"./vendor/**/**/*.css",
"./node_modules/**/**/*.css",
"./tests/**/**/*.css"
],
"extends": [
"./webpack/.stylelintrc.js"
]
},
"dependencies": {},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/eslint-parser": "^7.12.1",
"#babel/preset-env": "^7.12.11",
"#wordpress/eslint-plugin": "^7.4.0",
"autoprefixer": "^10.2.1",
"babel-loader": "^8.2.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"copy-webpack-plugin": "^7.0.0",
"css-loader": "^5.0.1",
"eslint": "^7.17.0",
"eslint-webpack-plugin": "^2.4.1",
"eslint-plugin-prettier": "^3.3.1",
"glob-all": "^3.2.1",
"image-minimizer-webpack-plugin": "^2.2.0",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"mini-css-extract-plugin": "^1.3.3",
"node-sass-magic-importer": "^5.3.2",
"postcss": "^8.2.4",
"postcss-advanced-variables": "^3.0.1",
"postcss-import": "^14.0.0",
"postcss-import-ext-glob": "^2.0.0",
"postcss-loader": "^4.1.0",
"postcss-nested": "^5.0.3",
"postcss-nested-ancestors": "^2.0.0",
"prettier": "^2.2.1",
"purgecss-webpack-plugin": "^3.1.3",
"sass": "^1.32.2",
"sass-loader": "^10.1.0",
"stylelint": "^13.8.0",
"stylelint-scss": "^3.18.0",
"stylelint-webpack-plugin": "^2.1.1",
"webpack": "^5.12.3",
"webpack-cli": "^4.3.1",
"webpackbar": "^5.0.0-3",
"wp-pot-cli": "^1.5.0"
},
"keywords": [
"wordpress",
"workflow",
"webpack",
"theme",
"plugin",
"WebPack",
"BrowserSync",
"PostCSS",
"Autoprefixer",
"PurgeCSS",
"BabelJS",
"Eslint",
"Stylelint",
"SCSS",
"WP-Pot"
]
}
composer.json
{
"name": "wpstrap/wordpress-plugin-boilerplate",
"description": "Wordpress Plugin Boilerplate",
"version": "0.3.1",
"minimum-stability": "stable",
"prefer-stable": true,
"type": "wordpress-plugin",
"license": "MIT",
"homepage": "https://wp-strap.com",
"autoload": {
"psr-4": {
"ReportError\\": "src/"
}
},
"scripts": {
"phpcs": "./vendor/bin/phpcs"
},
"require": {
"php": ">=7.1",
"micropackage/requirements": "^1.0"
},
"require-dev": {
"dealerdirect/phpcodesniffer-composer-installer": "^0.7.1",
"wp-coding-standards/wpcs": "*",
"automattic/phpcs-neutron-ruleset": "^3.3",
"phpcompatibility/phpcompatibility-wp": "^2.1"
},
"keywords": [
"wordpress",
"plugin",
"boilerplate",
"framework"
],
"authors": [
{
"name": "WP-Strap",
"email": "hello#wp-strap.com",
"homepage": "https://wp-strap.com"
}
],
"config": {
"allow-plugins": {
"dealerdirect/phpcodesniffer-composer-installer": true
}
}
}
webpack.config.js
/**
* This is a main entrypoint for Webpack config.
*
* #since 1.0.0
*/
const path = require( 'path' );
// Paths to find our files and provide BrowserSync functionality.
const projectPaths = {
projectDir: __dirname, // Current project directory absolute path.
projectJsPath: path.resolve( __dirname, 'assets/src/js' ),
projectScssPath: path.resolve( __dirname, 'assets/src/scss' ),
projectImagesPath: path.resolve( __dirname, 'assets/src/images' ),
projectOutput: path.resolve( __dirname, 'assets/public' ),
projectWebpack: path.resolve( __dirname, 'webpack' ),
};
// Files to bundle
const projectFiles = {
// BrowserSync settings
browserSync: {
enable: true, // enable or disable browserSync
host: 'localhost',
port: 3000,
mode: 'proxy', // proxy | server
server: { baseDir: [ 'public' ] }, // can be ignored if using proxy
proxy: 'report-error.local',
// BrowserSync will automatically watch for changes to any files connected to our entry,
// including both JS and Sass files. We can use this property to tell BrowserSync to watch
// for other types of files, in this case PHP files, in our project.
files: '**/**/**.php',
reload: true, // Set false to prevent BrowserSync from reloading and let Webpack Dev Server take care of this
// browse to http://localhost:3000/ during development,
},
// JS configurations for development and production
projectJs: {
eslint: true, // enable or disable eslint | this is only enabled in development env.
filename: 'js/[name].js',
entry: {
frontend: projectPaths.projectJsPath + '/frontend.js',
backend: projectPaths.projectJsPath + '/backend.js',
},
rules: {
test: /\.m?js$/,
}
},
// CSS configurations for development and production
projectCss: {
postCss: projectPaths.projectWebpack + '/postcss.config.js',
stylelint: true, // enable or disable stylelint | this is only enabled in development env.
filename: 'css/[name].css',
use: 'sass', // sass || postcss
// ^ If you want to change from Sass to PostCSS or PostCSS to Sass then you need to change the
// styling files which are being imported in "assets/src/js/frontend.js" and "assets/src/js/backend.js".
// So change "import '../sass/backend.scss'" to "import '../postcss/backend.pcss'" for example
rules: {
sass: {
test: /\.s[ac]ss$/i
},
postcss: {
test: /\.pcss$/i
}
},
purgeCss: { // PurgeCSS is only being activated in production environment
paths: [ // Specify content that should be analyzed by PurgeCSS
__dirname + '/assets/src/js/**/*',
__dirname + '/templates/**/**/*',
__dirname + '/template-parts/**/**/*',
__dirname + '/blocks/**/**/*',
__dirname + '/*.php',
]
}
},
// Source Maps configurations
projectSourceMaps: {
// Sourcemaps are nice for debugging but takes lots of time to compile,
// so we disable this by default and can be enabled when necessary
enable: true,
env: 'dev-prod', // dev | dev-prod | prod
// ^ Enabled only for development on default, use "prod" to enable only for production
// or "dev-prod" to enable it for both production and development
devtool: 'source-map' // type of sourcemap, see more info here: https://webpack.js.org/configuration/devtool/
// ^ If "source-map" is too slow, then use "cheap-source-map" which struck a good balance between build performance and debuggability.
},
// Images configurations for development and production
projectImages: {
rules: {
test: /\.(jpe?g|png|gif|svg)$/i,
},
// Optimization settings
minimizerOptions: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
// More info here: https://webpack.js.org/plugins/image-minimizer-webpack-plugin/
plugins: [
[ 'gifsicle', { interlaced: true } ],
[ 'jpegtran', { progressive: true } ],
[ 'optipng', { optimizationLevel: 5 } ],
[ 'svgo', {
plugins: [
{ removeViewBox: false, },
],
}, ],
],
}
}
}
// Merging the projectFiles & projectPaths objects
const projectOptions = {
...projectPaths, ...projectFiles,
projectConfig: {
// add extra options here
}
}
// Get the development or production setup based
// on the script from package.json
module.exports = env => {
if ( env.NODE_ENV === 'production' ) {
return require( './webpack/config.production' )( projectOptions );
} else {
return require( './webpack/config.development' )( projectOptions );
}
};
config.base.js
/**
* This holds the configuration that is being used for both development and production.
* This is being imported and extended in the config.development.js and config.production.js files
*
* #since 1.1.0
*/
const magicImporter = require( 'node-sass-magic-importer' ); // Add magic import functionalities to SASS
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); // Extracts the CSS files into public/css
const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' ) // Synchronising URLs, interactions and code changes across devices
const WebpackBar = require( 'webpackbar' ); // Display elegant progress bar while building or watch
const ImageMinimizerPlugin = require( 'image-minimizer-webpack-plugin' ); // To optimize (compress) all images using
const CopyPlugin = require( "copy-webpack-plugin" ); // For WordPress we need to copy images from src to public to optimize them
module.exports = ( projectOptions ) => {
/**
* CSS Rules
*/
const cssRules = {
test: projectOptions.projectCss.use === 'sass' ? projectOptions.projectCss.rules.sass.test : projectOptions.projectCss.rules.postcss.test,
exclude: /(node_modules|bower_components|vendor)/,
use: [
MiniCssExtractPlugin.loader, // Creates `style` nodes from JS strings
"css-loader", // Translates CSS into CommonJS
{ // loads the PostCSS loader
loader: "postcss-loader",
options: require( projectOptions.projectCss.postCss )( projectOptions )
}
],
};
if ( projectOptions.projectCss.use === 'sass' ) { // if chosen Sass then we're going to add the Sass loader
cssRules.use.push( { // Compiles Sass to CSS
loader: 'sass-loader',
options: {
sassOptions: { importer: magicImporter() } // add magic import functionalities to sass
}
} );
}
/**
* JavaScript rules
*/
const jsRules = {
test: projectOptions.projectJs.rules.test,
include: projectOptions.projectJsPath,
exclude: /(node_modules|bower_components|vendor)/,
use: 'babel-loader' // Configurations in "webpack/babel.config.js"
};
/**
* Images rules
*/
const imageRules = {
test: projectOptions.projectImages.rules.test,
use: [
{
loader: 'file-loader',// Or `url-loader` or your other loader
},
],
}
/**
* Optimization rules
*/
const optimizations = {};
/**
* Plugins
*/
const plugins = [
new WebpackBar( // Adds loading bar during builds
// Uncomment this to enable profiler https://github.com/nuxt-contrib/webpackbar#options
// { reporters: [ 'profile' ], profile: true }
),
new MiniCssExtractPlugin( { // Extracts CSS files
filename: projectOptions.projectCss.filename
} ),
new CopyPlugin( { // Copies images from src to public
patterns: [ { from: projectOptions.projectImagesPath, to: projectOptions.projectOutput + '/images' }, ],
} ),
new ImageMinimizerPlugin( { // Optimizes images
minimizerOptions: projectOptions.projectImages.minimizerOptions,
} ),
];
// Add browserSync to plugins if enabled
if ( projectOptions.browserSync.enable === true ) {
const browserSyncOptions = {
files: projectOptions.browserSync.files,
host: projectOptions.browserSync.host,
port: projectOptions.browserSync.port,
}
if ( projectOptions.browserSync.mode === 'server' ) {
Object.assign( browserSyncOptions, { server: projectOptions.browserSync.server } )
} else {
Object.assign( browserSyncOptions, { proxy: projectOptions.browserSync.proxy } )
}
plugins.push( new BrowserSyncPlugin( browserSyncOptions, { reload: projectOptions.browserSync.reload } ) )
}
return {
cssRules: cssRules, jsRules: jsRules, imageRules: imageRules, optimizations: optimizations, plugins: plugins
}
}
config.production.js
/**
* Webpack configurations for the production environment
* based on the script from package.json
* Run with: "npm run prod" or or "npm run prod:watch"
*
* #since 1.0.0
*/
const glob = require( 'glob-all' );
const PurgecssPlugin = require( 'purgecss-webpack-plugin' ) // A tool to remove unused CSS
module.exports = ( projectOptions ) => {
process.env.NODE_ENV = 'production'; // Set environment level to 'production'
/**
* The base skeleton
*/
const Base = require( './config.base' )( projectOptions );
/**
* CSS rules
*/
const cssRules = {
...Base.cssRules, ...{
// add CSS rules for production here
}
};
/**
* JS rules
*/
const jsRules = {
...Base.jsRules, ...{
// add JS rules for production here
}
};
/**
* Image rules
*/
const imageRules = {
...Base.imageRules, ...{
// add image rules for production here
}
}
/**
* Optimizations rules
*/
const optimizations = {
...Base.optimizations, ...{
splitChunks: {
cacheGroups: {
styles: { // Configured for PurgeCSS
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
// add optimizations rules for production here
}
}
/**
* Plugins
*/
const plugins = [
...Base.plugins, ...[
new PurgecssPlugin( { // Scans files and removes unused CSS
paths: glob.sync( projectOptions.projectCss.purgeCss.paths, { nodir: true } ),
} ),
// add plugins for production here
]
]
/**
* Add sourcemap for production if enabled
*/
const sourceMap = { devtool: false };
if ( projectOptions.projectSourceMaps.enable === true && (
projectOptions.projectSourceMaps.env === 'prod' || projectOptions.projectSourceMaps.env === 'dev-prod'
) ) {
sourceMap.devtool = projectOptions.projectSourceMaps.devtool;
}
/**
* The configuration that's being returned to Webpack
*/
return {
mode: 'production',
entry: projectOptions.projectJs.entry, // Define the starting point of the application.
output: {
path: projectOptions.projectOutput,
filename: projectOptions.projectJs.filename
},
devtool: sourceMap.devtool,
optimization: optimizations,
module: { rules: [ cssRules, jsRules, imageRules ], },
plugins: plugins,
}
}
After some playing around i found that the empty output was caused by Purge CSS - purgecss-webpack-plugin. It removes unused css.
So the issue was that even though i added scss code in source files, it wasn't used anywhere in php files source folder.
So if i want to output the following css code :
.body {
color: red;
}
I need to add that class in php templates inside the src folder for plugin structure.
Results in successful output of css after yarn prod command :

webpack not bundling scss when using import instead of require

Simple webpack setup, when I use import to load my scss it is completely missing from the bundle. The line where the import should be is simply missing. When I use require instead, it works.
optimization: {usedExports: true} is not the problem, I tried with and without
mini-css-extract-plugin also did not work.
when I put a typo in the scss it complains, so it is parsed but simply not bundled in the end?
index.js
require("./scss/style.scss");
//import "./scss/style.scss" <--- not working
import { createApp } from 'vue';
import App from './components/App.vue';
const el = document.getElementById('app');
createApp(App).mount(el);
webpack config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const { DefinePlugin } = require('webpack');
const dist = path.resolve(__dirname, "dist");
module.exports = env => {
const mode = env.production == true ? "production" : "development";
const devtool = mode == "production" ? false : "inline-source-map";
return {
mode: mode,
entry: './web/index.js',
output: {
filename: 'bundle.js',
path: dist
},
optimization: {
usedExports: true,
},
devServer: {
static: {
directory: dist
},
port: 8888
},
module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
}, {
test: /\.(ttf|eot|woff|woff2|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
},
},
}, {
test: /\.vue$/,
loader: 'vue-loader'
}]
},
plugins: [
new CleanWebpackPlugin(),
new DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
new HtmlWebpackPlugin({
template: path.resolve("./web/index.html")
}),
new VueLoaderPlugin()
],
resolve: {
extensions: ['.js'],
alias: {
"#": path.resolve(__dirname, 'web')
}
},
devtool
};
};
I found the problem but I don't understand why webpack drops it.
Quote from https://webpack.js.org/guides/tree-shaking/
Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode:
In my package.json I put
"sideEffects": false,
to be able to use treeshaking.
But I had to disable it in the loader rule
{
test: /\.(sa|sc|c)ss$/,
use: ['style-loader','css-loader','sass-loader'],
sideEffects: true <----
}

Browsersync keeps reloading

I have Gulp + Browsersync working with Wordpress.
Everything was working well, reloading every time I change files.
But since yesterday only, Browsersync keeps reloading without any reason.
I didn't made any changes on my gulpfile. I tried reverting to a former commit from 2 days ago, same thing. I don't know where it comes from.
Here's my repo.
I tried :
downgrading browsersync to 2.24.4 from this post
adding this to gulp :
socket: {
clients: {
heartbeatTimeout: 60000
}
},
Here are my files.
gulpfile.babel.js
import { src, dest, watch, series, parallel } from 'gulp';
import yargs from 'yargs';
import sass from 'gulp-sass';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'autoprefixer';
import imagemin from 'gulp-imagemin';
import del from 'del';
import webpack from 'webpack-stream';
import named from 'vinyl-named';
import browserSync from 'browser-sync';
import zip from 'gulp-zip';
import info from './package.json';
import replace from 'gulp-replace';
import wpPot from 'gulp-wp-pot';
import tailwindcss from 'tailwindcss';
// import purgeCss from 'gulp-purgecss';
const PRODUCTION = yargs.argv.prod;
export const clean = () => del(['dist']);
export const styles = () => {
return (
src('src/scss/app.scss')
.pipe(gulpif(!PRODUCTION, sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(postcss([tailwindcss('./tailwind.config.js')]))
.pipe(gulpif(PRODUCTION, postcss([autoprefixer])))
.pipe(gulpif(PRODUCTION, cleanCss({ compatibility: 'ie8' })))
// .pipe(
// gulpif(
// PRODUCTION,
// purgeCss({
// content: ['**/*.php']
// })
// )
// )
.pipe(gulpif(!PRODUCTION, sourcemaps.write()))
.pipe(dest('dist/css'))
.pipe(server.stream())
);
};
export const images = () => {
return src('src/images/**/*.{jpg,jpeg,png,svg,gif}')
.pipe(gulpif(PRODUCTION, imagemin()))
.pipe(dest('dist/images'));
};
export const copy = () => {
return src(['src/**/*', '!src/{images,js,scss}', '!src/{images,js,scss}/**/*']).pipe(
dest('dist')
);
};
export const watchForChanges = () => {
watch('src/scss/**/*.scss', styles);
watch('src/images/**/*.{jpg,jpeg,png,svg,gif}', series(images, reload));
watch(['src/**/*', '!src/{images,js,scss}', '!src/{images,js,scss}/**/*'], series(copy, reload));
watch('src/js/**/*.js', series(scripts, reload));
watch('**/*.php', reload);
};
export const scripts = () => {
return src(['src/js/bundle.js'])
.pipe(named())
.pipe(
webpack({
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
},
mode: PRODUCTION ? 'production' : 'development',
devtool: !PRODUCTION ? 'inline-source-map' : false,
output: {
filename: '[name].js'
}
})
)
.pipe(dest('dist/js'));
};
/***** Generating a POT file *****/
export const pot = () => {
return src('**/*.php')
.pipe(
wpPot({
domain: 'boosters',
package: info.name
})
)
.pipe(dest(`languages/${info.name}.pot`));
};
/***** Compress theme into a ZIP file after renaming _themename *****/
export const compress = () => {
return src([
'**/*',
'!node_modules{,/**}',
'!bundled{,/**}',
'!src{,/**}',
'!.babelrc',
'!.gitignore',
'!gulpfile.babel.js',
'!package.json',
'!package-lock.json'
])
.pipe(
gulpif(
// prevent bug if there are zip files inside the theme
file => file.relative.split('.').pop() !== 'zip',
replace('boosters', info.name)
)
)
.pipe(zip(`${info.name}.zip`))
.pipe(dest('bundled'));
};
/****** BrowserSync ******/
const server = browserSync.create();
export const serve = done => {
server.init({
proxy: 'localhost:8888/boosters', // put your local website link here
snippetOptions: {
ignorePaths: 'boosters/wp-admin/**'
},
ghostMode: false
// socket: {
// clients: {
// heartbeatTimeout: 60000
// }
// },
// logLevel: 'debug',
// logFileChanges: true,
// logConnections: true
});
done();
};
export const reload = done => {
server.reload();
done();
};
/****** Series & Parallel Scripts ******/
export const dev = series(clean, parallel(styles, images, scripts, copy), serve, watchForChanges);
export const build = series(clean, parallel(styles, images, scripts, copy), pot, compress);
export default dev;
package.json
{
"name": "boosters",
"version": "1.0.0",
"description": "A Wordpress website for Boost.rs by DoubleCat Studio",
"main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp build --prod"
},
"repository": {
"type": "git",
"url": "git+ssh://git#github.com/indaviande/boosters.git"
},
"author": "Vianney Bernet",
"license": "ISC",
"bugs": {
"url": "https://github.com/indaviande/boosters/issues"
},
"browserslist": [
"last 4 version",
"> 1%",
"ie 11"
],
"homepage": "https://github.com/indaviande/boosters#readme",
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/register": "^7.4.0",
"autoprefixer": "^9.5.1",
"babel-loader": "^8.0.5",
"browser-sync": "^2.26.7",
"del": "^4.1.0",
"gulp": "^4.0.0",
"gulp-clean-css": "^4.0.0",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^5.0.3",
"gulp-postcss": "^8.0.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-wp-pot": "^2.3.5",
"gulp-zip": "^4.2.0",
"tailwindcss": "^1.0.4",
"vinyl-named": "^1.1.0",
"webpack-stream": "^5.2.1",
"yargs": "^13.2.2"
},
"dependencies": {
"tar": ">4.4.7"
}
}
Browsersync has a log that you can inspect to see which files are being changed that trigger the reload. You can also increase specificity of what you're watching/ignoring. Start off small and gradually increase your glob paths until you can see reloads on all changes.
server.init({
logLevel: 'debug',
files: [
'wp-content/themes/**/*.css',
'wp-content/themes/**/*.js',
'wp-content/themes/**/*.php',
],
ignore: [
'folder-to-ignore/**/*.*'
]
});

Stumped: working wallaby.js config for meteor 1.3?

I have been trying to get a working wallaby.js configuration file for my meteor project and simply can't get it to work. I've borrowed from https://github.com/xolvio/automated-testing-best-practices and I have this currently:
const babel = require('babel-core')
const path = require('path')
const wallabyWebpack = require('wallaby-webpack')
module.exports = function (wallaby) {
const webpackConfig = {
resolve: {
root: path.join(wallaby.projectCacheDir, 'imports'),
extensions: ['', '.js', '.jsx', '.json']
},
module: {
loaders: [
// JavaScript is handled by the Wallaby Babel compiler
{ test: /\.json$/, loader: 'json-loader' }
]
}
}
const wallabyPostprocessor = wallabyWebpack(webpackConfig)
const appManifest = require(path.resolve('../.meteor/local/build/programs/web.browser/program.json')).manifest;
const meteorPackageFiles = appManifest
.filter(function (file) {
return file.type === 'js' && file.path.startsWith('packages/')
})
.map(function (file) {
/* var basePath = packageStubs.indexOf(file.path) !== -1 ?
'tests/client/stubs' :
'src/.meteor/local/build/programs/web.browser';
*/
var basePath = '../.meteor/local/build/programs/web.browser'
return { pattern: path.join(basePath, file.path) }
})
return {
files: [
{ pattern: '**/*.test.*', ignore: true },
'startup/**/*.jsx',
'startup/**/*.js'
].concat(meteorPackageFiles),
tests: [
'**/*.test.*'
],
compilers: {
'**/*.js*': wallaby.compilers.babel({
babel,
presets: ['react', 'es2015', 'stage-2']
})
},
env: {
type: 'node'
},
testFramework: 'mocha'
}
}
This code successfully loads the startup files for the client-side, and the tests, but this simple test:
import should from 'should'
import buildRegExp from './buildregexp.js'
describe('buildRegExp', function() {
it('splits on word characters', function() {
buildRegExp('test this-thing:out').should.equal('(?=.*test)(?=.*this)(?=.*thing)(?=.*out).+')
})
})
fails on line 1, because the npm module "should" is not found.
Does anyone have a working wallaby config or should I just give up?
meteor test --driver-package=practicalmeteor:mocha works, so the error is in the wallaby config.

Resources