How to add Webpack 3.8.1 to a Vue project - npm

say I've go this scaffolding : https://github.com/vuejs/vue-cli
I want to add Webpack 3.8.1 to it.
there's already a "build" folder with lots of webpack files in it :
but (one of) the issue(s) is running "webpack" in the project's root returns :
https://webpack.js.org/concepts/ this si the doc I'm supposed to go by.
there's no real example.
it's got :
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
which I adapted to the best of my ability to :
const path = require('path');
module.exports = {
entry: './src/entry.js',
output: {
path: path.resolve(entry, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
I also added a entry.js file containing nothing under src :
and I edited my package.json file to include:
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^3.2.3",
"style-loader": "^0.19.0",
"extract-text-webpack-plugin": "^3.0.1"
},
"devDependencies": {
"sinon": "^4.0.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
and ran :
npm install
npm update
I feel I'm getting somewhat close but I still cannot manage to use the new webpack.

I put my comment as answer to be able to close this question and (hopefuly) help others future users.
I think that your problem is to try to use webpack, you should use the npm run script like: npm run dev or npm run prod, and then the vue+webpack will do the work for you, placing the files where the config says (webpack.base.dev.conf for instance).
If you take a look at package.json, you could see this part:
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
Every one can be executed with npm run X.
Hope it helps!

Related

Laravel Mix compiling js and css in the js directory incorrectly

I have the following in (webpack.mix.js)
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
after running npm run dev, my css and js files are compiled in the js directory and the css directory is not created.
it should be:
/public/js/app.js and /public/css/app.css
but ends up being:
/public/js/app.js and /public/js/app.css
even if i try to only add the css line in (webpack.mix.js)
it then creates mix.css
any reason why this does not work?
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#popperjs/core": "^2.11.2",
"axios": "^0.21",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0"
}
}
I just had the exact same problem after a brand new clone of my project. My issue was that I cloned my project under a directory that contained a # (so it was higher in the explorer).
The path of my project was something like c:\dev\#laravelprojects\myproject
Removing this # from the directory name solved the problem and my css now compiles in the public/css directory.
Maybe you also got a path issue.

Different svelte variable value for npm run dev and npm run build

I'm developing a svelte+tailwind+PHP site with rollup.js. How can I set a variable in the svelte source files depending on if I'm running npm run dev or npm run build? I'd like the different builds to connect to different back-end servers.
This is my package.json in case that's relevant. I'm new to most of these tools, so please bear with me and correct me if I've misunderstood too much. After running npm run build, I run a script that scp's the build folder to the production server.
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"dev": "run-p autobuild watch:tailwind",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public --single --host",
"start:dev": "sirv public --single --dev",
"autobuild": "rollup -c -w"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"autoprefixer": "^10.0.4",
"d3-interpolate": "^2.0.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.10",
"postcss-cli": "^8.3.0",
"postcss-nested": "^5.0.1",
"postcss-reporter": "^7.0.2",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-dnd-action": "^0.6.22",
"svelte-loading-spinners": "^0.1.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}
You can use #rollup/plugin-replace:
A Rollup plugin which replaces strings in files while bundling.
plugins: [
replace({
// alternatively, one could pass process.env.NODE_ENV or 'development` to stringify
'process.env.NODE_ENV': JSON.stringify('production')
})
]

Error: Cannot find module 'webpack-cli/bin/config-yargs'

'Github' asked me to update 'webpack-dev-server' to version 3.1.11 or higher for security reasons.
However, 'npm run dev' will not run after the update.
I don't solve this problem
Error: Cannot find module 'webpack-cli/bin/config-yargs'
The code for 'package.json' is as follows.
"dependencies": {
"#vue/cli-plugin-babel": "^3.5.1",
"config": "^3.0.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
You could try changing webpack-dev-server to webpack serve in your npm run script inside package.json
For some reason the webpack team changed the command to webpack serve
Change your package.json:
"start": "webpack serve"
Ref: https://github.com/webpack/webpack-dev-server/issues/2759
The version I am using:
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
To fix it just do 2 things.
Install
npm i webpack-cli #webpack-cli/init
Add this to your package.json:
"scripts": {
"start": "webpack-cli serve --mode development"
},
Done!
I agree that you have to upgrade from webpack 3 to 4, but specifically these are the steps I had to do, first, because webpack-cli has been split out into a separate package:
$ npm install webpack webpack-cli --save-dev
As explained here: https://webpack.js.org/guides/getting-started/#basic-setup
Delete package-lock.json file. Change following in package.json.
"webpack": "^4.32.2",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.11.0"
Run npm install
Change webpack-dev-server to webpack serve in package.json file.
e.g.:
"scripts": { "start": "webpack serve --mode development --open" },
It worked for me! ;-)
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
Run: npm run start or npm start now
It is because of version of webpack-cli. In some versions, there is no config-yargs.js file. So ^3.3.11 version of webpack-cli worked for me.
Try it:
npm i webpack-cli#^3.3.11
webpack core team says that form version 3+ the compatibility will foucs on webpack 4
so I think you need also to update webpack 3 to webpack 4
this doc may help you to achieve that
https://webpack.js.org/migrate/4
You have to check to find out the latest versions of webpack, webpack-cli and webpack-dev-server and when you have that information edit package.json to reflect those versions and run yarn install --check-files Then you'll have to start the webpack-dev-server with the command "npx webpack serve"

How to push to netlify in production mode [Nuxt JS]

I have my app created with nuxt js. I just want to push my app on Netlify.
So firstly i configure my deploy settings :
Repository on git
Base directory : Not set
Build command npm run build && npm run start
Publish directory .nuxt/dist
My app is build correctly but npm run start just launch on localhost:3000
I decided to modify config Host, I don't know if it's the best solution ?
{
"name": "app-nuxt",
"version": "1.0.0",
"description": "My remarkable Nuxt.js project",
"author": "wyllisMonteiro",
"private": true,
"config": {
"nuxt": {
"host": "https://mywebsite.com"
}
},
"scripts": {
"dev": "HOST=localhost PORT=3000 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"#nuxtjs/axios": "^5.3.6",
"cookieparser": "^0.1.0",
"cross-env": "^5.2.0",
"js-cookie": "^2.2.0",
"nuxt": "^2.4.0",
"vee-validate": "^2.2.0",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.5",
"vuetify-loader": "^1.2.1"
},
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.27",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.4.0",
"jest": "^24.1.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.9",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-jest": "^3.0.3"
}
}
I want to launch in localhost:3000 by executing npm run dev
AND https://mywebsite.com by executing npm run start
Can you tell me if there is some modifications in my package.json or in my deploy settings on Netlify
For anyone that stumbles across this in the future, the problem you're experiencing is due to a misunderstanding with what services Netlify offers.
Specifically, they are primarily a static site host, which means they will host your built files, and serve them for you. They will not run your server, which means nuxt start will not run.
Instead, you should be using nuxt generate to generate the static files of your app, and telling Netlify where the output folder is.
For example, the "build settings" on Netlify:
Repository github.com/example/example
Base directory Not set
Build command npm run generate
Publish directory dist
This will properly deploy a Nuxt app, assuming you haven't changed the default build folder. For clarification, the .nuxt folder contains both client and server files, and can only be used when running your own Nuxt server on an instance of some kind.
As it looks you need to tweak your deployment command. Go to Netlify and try changing it to npm install; npm run build. This should resolve the problem.

"Npm Start" Is Not Working

I'm in the middle of making a website, and I use the command npm start to put it up on localhost. However, all of a sudden it stopped working after I had created two workspaces on Visual Studio Code Editor. It only gives me an error.
This is what the error looks like:
npm ERR! path C:\Users\audre\first-blog\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\audre\first-blog\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\audre\AppData\Roaming\npm-cache_logs\2018-05-29T07_42_13_915Z-debug.log
I have no idea what that means. Can anyone help me? Thanks!
Edit:
My package.json file contains the following:
{
"name": "pug-starter",
"version": "1.0.0",
"description": "Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.",
"main": "index.js",
"scripts": {
"dev": "gulp dev",
"start": "gulp dev",
"prod": "gulp build --production",
"deploy": "gulp build --production && gulp deploy && gulp clean:ghpages",
"test": "echo \"Error: no test specified\" && exit 1"
},
"//": "CUSTOM CONFIGURATION",
"config": {
"directory": {
"development": "tmp",
"production": "build",
"ghpages": ".publish",
"source": "src",
"data": "_data",
"component": "_component",
"layout": "_layout",
"asset": "_asset",
"image": "image",
"font": "font",
"templateCollection": [
"article",
"product"
]
},
"render": {
"sourceFileChange": false,
"url": {
"//": "this is recommended to avoid Linux/Windows capitalization issue",
"htmlExtensionOn": false,
"toLowercase": true
}
},
"entry": {
"cssExternal": "style**.{scss,sass}",
"cssInline": "inline**.{scss,sass}",
"css": {
"inline": false,
"external": true
}
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/marianzburlea/pug-starter.git"
},
"keywords": [
"pug",
"starter",
"jade",
"starter"
],
"author": "Marian Zburlea",
"license": "MIT",
"bugs": {
"url": "https://github.com/marianzburlea/pug-starter/issues"
},
"homepage": "https://github.com/marianzburlea/pug-starter#readme",
"devDependencies": {
"autoprefixer": "^6.7.5",
"babel-core": "^6.26.0",
"babel-eslint": "^8.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-env": "^1.6.1",
"browser-sync": "^2.18.8",
"eslint": "^3.16.1",
"foldero": "^0.1.1",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-cached": "^1.1.1",
"gulp-changed": "^2.0.0",
"gulp-changed-in-place": "^2.2.0",
"gulp-debug": "^3.1.0",
"gulp-gh-pages": "^0.5.4",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.1.1",
"gulp-inline-source": "^3.0.0",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.3.0",
"gulp-pug": "^3.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.4.1",
"imagemin-jpegoptim": "^5.0.0",
"imagemin-pngquant": "^5.0.0",
"imagemin-svgo": "^5.2.0",
"jstransformer-markdown-it": "^2.0.0",
"merge-stream": "^1.0.1",
"minimist": "^1.2.0"
}
}
When all else fails, remove/reinstall node.js completely. When you get wild errors all over the board on all of your node env commands, it means node is corrupted or wrong in some way.
Use a process manager that will take care of environment.
few options are
forever(https://www.npmjs.com/package/forever)
with this, you start the website on localhost using forever start <mainfilename>
PM2 (https://www.npmjs.com/package/pm2)
with this, you start the website on localhost using pm2 start <mainfilename>
With process managers, you are abstracted from the environment specifications until you need to have something more specific.
ENOENT means, where you are running npm start command that directory does not contain package.json file.
First, make sure you are in the correct directory and it has package.json file.
Also, if there is no package.json file, you can initialize it using npm init command.
If this is not the case, feel free to drop comments to correct me.
If you have multiple versions of nodejs on your machine and are running node version manager (nvm), be sure to set your version correctly in terminal.
ex.
nvm use v9.5.0