Use worker-loader with vue-cli and webpack - vue.js

Im trying to setup worker-loader with vue-cli webpack installation that provides the following file structure for build / configuration:
-build
--vue-loader.conf.js
--webpack.base.conf.js
--other build files...
-config
--index.js
--dev.env.js
--other config files...
I then installed worker-loader with
npm install worker-loader --save-dev
So then I tried require my worker.js with
require('worker-loader!my-worker.js');
But its not loaded by babel which is used as default for vue-cli webpack version
So then I tried update webpack.base.conf.js with the following configuration:
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\worker\.js$/,
loader: 'worker-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
But my worker is then only read by babel and imported as a regular js file, and the worker-loader doesnt seam to do anything.
So how to configure this correctly?

Woops, I did find my bug.
I tried to load worker-loader with:
import myWorker from 'worker-loader?./myworker'
let worker = new Worker(myWorker);
So the solution was simply to use:
import myWorker from 'worker-loader?./myworker'
let worker = new myWorker;
So now it works :-)

Related

Is Ionic+Vue as frontend combinable with Umbraco as backend? (Webpack frustrations)

My first question here on Stackoverflow :) I'm trying to make an app with Ionic&Vue, and as a CMS I'm using Umbraco. I want to connect the two, which I'm now trying by configuring Webpack, so that Webpack will take my main.ts file that Ionic&Vue created and do stuff with it and put it in the main Umbraco folder as a source file where I can reference Umbraco content.
I'm not having a lot of luck with it unfortunately. I've tried configuring a webpack.config.js file and installing a bunch of libraries like 'vue-loader', 'ts-loader', 'vue-template-compiler', 'vue-style-loader' et cetera. Some stuff is getting compiled, it's just that I keep getting an error that there's a mismatch in versions (vue is #3.0.2 and vue-template-compiler is #2.6.12). Ionic won't work with Vue under version 3 though so I feel like I'm stuck.
So my question: am I missing something? Is it really not possible or is there another way to compile a file from .ts to .js to a folder of my wish?
Edit (webpack config file):
var { HotModuleReplacementPlugin } = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = (env, argv) => {
let transpileOnly = argv.transpileOnly === 'true';
return {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundledwebpack.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
}
]
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
compiler: '#vue/compiler-sfc'
}
}
]
},
plugins: [
new HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
].concat(transpileOnly ? [
new ForkTsCheckerWebpackPlugin({
reportFiles: ['src/**/*.{ts,tsx,vue}', '!src/**/*.js.vue'],
tslint: true,
vue: true
})
] : [])
,
mode: 'development'
}
}
This sounds more like a vue issue than a Umbraco one. You should be able to do it. After a quick google there is a working project here:
https://github.com/ionic-team/ionic-vue-conference-app
Have you tried explicitly installing packages with version numbers that work, e.g.
npm install #ionic/vue#0.0.4

How to jsHint two different folders with Webpack?

In short, I need to jshint tests specifications in parallel with the package sources during the build process.
Using the Webpack 3, how to make jshint-loader to watch out for two different folders with two different .jshintrc files? One pack of sources with .jshintrc is in the ./src folder, which is bundling to the end distributive, and the other one pack with another .jshintrc is in the ./test folder, which does not mentioned in the Webpack config (Karma handles it).
I tried the following two approaches, and both of them processed ./src only, they didn't do anything with ./test.
First version of Webpack config:
entry: {
'ui-scroll': path.resolve(__dirname, '../src/ui-scroll.js'),
'ui-scroll-grid': path.resolve(__dirname, '../src/ui-scroll-grid.js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: { presets: ['es2015'] }
},
{
enforce: 'pre',
test: /\.js$/,
include: path.resolve(__dirname, '../src'),
use: [{ loader: 'jshint-loader' }]
},
{
enforce: 'pre',
test: /\.js$/,
include: path.resolve(__dirname, '../test'),
use: [{ loader: 'jshint-loader' }]
}
]
},
// ...
The second version of Webpack config differs in the module-rules part:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: { presets: ['es2015'] }
},
{
enforce: 'pre',
test: /\.js$/,
include: [
path.resolve(__dirname, '../src'),
path.resolve(__dirname, '../test')
],
use: [{ loader: 'jshint-loader' }]
}
]
},
// ...
But as I said this doesn't work. Full config/sources could be obtained from this repository. So is it possible to fix my approach or do I need try something quite different?
After some research we were able to solve this issue by splitting the situation into two parts: jshinting tests during production build (only once, the distributive is on the disk) and during development processes (watch mode, the distributive is in memory).
1. Production build. This is pretty simple, because jshit should be executed only once. After adding jshint as a dependency to the npm-package –
npm install --save-dev jshint
it could be prepended to the build script –
"hint-tests": "jshint --verbose test",
"build": "npm run hint-tests && npm run prod-build && npm run prod-test"
None of prod-build and prod-test processes know about jshint.
2. Development. The solution is to add a new entry point via glob:
entry: {
'ui-scroll': path.resolve(__dirname, '../src/ui-scroll.js'),
'ui-scroll-grid': path.resolve(__dirname, '../src/ui-scroll-grid.js')
'test': glob.sync(path.resolve(__dirname, 'test/*.js')) // development only!
}
It should be done only for the development environment otherwise you'll get an extra bundle in the distributive folder. So we have it in memory; it's affecting the dev processes a bit due to extra bundling, but the difference is insignificant due to this occurs in-memory only. Then using jshint-loader let's add one more rule to the module section of the webpack config:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: { presets: ['es2015'] }
},
{ // this is both for prod and dev environments
enforce: 'pre',
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: [{ loader: 'jshint-loader' }]
},
{ // this is only for dev environment
enforce: 'pre',
test: /\.js$/,
include: path.resolve(__dirname, 'test'),
use: [{ loader: 'jshint-loader' }]
}
]
}
There may be too many logs in the console output, especialy during the dev-server work, so it could be helpful to limit output via stats property:
stats: {
modules: false,
errors: true,
warnings: true
}

Error: Cannot resolve module 'babel-loader

I'm trying to run webpack on my postinstall script in my package.json when I push to heroku but I am getting the following error.
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'C:\project\Node'
When I run the command locally I get no issues. Below is my webpack config - i have tried using Loader to fix the resolving issue but to no avail?
my webpack.config.js Code
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './js/app.js',
output: {
path: __dirname,
filename: 'js/bundle.js'
},
watch: true,
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015','react']
}
}
]
},
};

webpack Can't resolve 'style'

I was trying to follow the simple Getting Started from (http://webpack.github.io/docs/tutorials/getting-started/).
And I am getting this error when I try to load style.css.
ERROR in ./entry.js
Module not found: Error: Can't resolve 'style' in 'Path to project in my computer'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style'.
# ./entry.js 1:0-22
Any ideas ?
I installed css-loader and style-loader locally using mpm as explained in tutorial.
npm install css-loader style-loader
I see node-modules folder created after the installation.
For webpack version >=2.0
Update webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
Use { test: /.css$/, loader: "style-loader!css-loader" } instead of { test: /.css$/, loader: "style!css!" }
Tried 'Use { test: /.css$/, loader: "style-loader!css-loader" } instead of { test: /.css$/, loader: "style!css!" }' as above but failed, below config works for me:
{
test:/\.css$/,
loader:'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}

webpack less error, it can't resolve .ttf and woff2 files from uikit

I'm really newbie with webpack, so I'm not sure if I'm doing something wrong, I wish use uikit and less with webpack, I've installed the respective loaders like url-loader,file-loader,less-loader
and include in the webpack config
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'scripts')
},
{
test: /\.less$/,
loader: 'style!css!less'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.wav$|\.mp3$/,
loader: "file-loader"
}
/*, <----I ALSO TRY WITH THIS CONFIG....
{ test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" }*/
]
I include my less file in the entry point of my js file
require("!css!less!../less/main.less")
and my less file looks like
#import "../bower_components/uikit/less/uikit.less";
html{
background-color: red;
}
the directory
when I try run the console shows this:
ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.eot in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
# ./~/css-loader!./~/less-loader!./less/main.less 6:77369-77440 6:77463-77534
ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.woff2 in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
# ./~/css-loader!./~/less-loader!./less/main.less 6:77586-77659
ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.woff in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
# ./~/css-loader!./~/less-loader!./less/main.less 6:77690-77762
ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.ttf in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
# ./~/css-loader!./~/less-loader!./less/main.less 6:77794-77865
webpack: bundle is now VALID.
hope the errors will be much more clear for you and can help me,thank so much
I recommend you to write loaders in a short way
webpack.config.js
loaders: [
... other loaders
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}
Don't forget
npm install url-loader --save-dev
And checkout variable #icon-font-path it should be
/bower_components/uikit/less/core/icon.less
"../../fonts";