I build a webpack to my project which using firebase 9 to collect page data from documents which is working like a charm in my index.html page. My problem is when i try to add another html page for admin panel it doesn't work my problem is if i am right i need to change my webpack.config.js but don't know how. my webpack.config.js is
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
watch: true
}
my goal is add another page which is adminpanel.html and use it same as index.html everything controls from index.js in index.html and with watch: true i can see everything in real time please help me
my package.json is
{
"name": "firebase-9",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"firebase": "^9.6.4"
}
}
my project structure is
--dist
-adminpanel.html
-index.html
-bundle.js
--node_modules
--src
-index.js
package-lock.json
package.json
webpack.config.js
Related
I'm building a simple application using Tailwindcss, JavaScript & Webpack and trying to publish it via Github Pages.
While running the app via local host works fine, I am encountering a problem when trying to publish the app via gh-pages. I'm receiving the error message "404 File not found", why is that? Are there any dependencies missing in the webpack.config.js or package-json file?
Any help is appreciated.
Please also see github repo: https://github.com/e-d-i/shoppingCart
package.json
"name": "shopping-cart",
"version": "1.0.0",
"description": "A simple shopping cart using HTML, CSS / Tailwind CSS, JavaScript & Webpack",
"main": "webpack.config.js",
"dependencies": {
"css-loader": "^6.3.0",
"gh-pages": "^3.2.3",
"mini-css-extract-plugin": "^2.3.0",
"postcss": "^8.3.9",
"postcss-loader": "^6.1.1",
"tailwindcss": "^2.2.16",
"webpack": "^5.56.1",
"webpack-cli": "^4.8.0"
},
"homepage": "https://e-d-i.github.io/shoppingCart/",
"devDependencies": {},
"scripts": {
"build": "webpack --config webpack.config.js",
"deploy": "gh-pages -d build"
},
"keywords": [],
"author": "e-d-i",
"license": "ISC"
}```
**postcss.config.js**
```const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss
],
};```
**webpack.config.js**
```const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
entry: "./src/script.js",
output: {
filename: "main.js",
path: path.resolve(__dirname,"./build")
},
plugins: [new MiniCssExtractPlugin({
filename: "styles.css",
})],
module: {
rules: [
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
}
]
}
}```
You should add a "predeploy" in your package.json like so:
"predeploy": "npm run build"
and run it locally before you deploy to github pages.
source: https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f
I don't seem to understand how webpack works. I would like to create a plain javascript library with some reusable components that I can use in other applications and in script tags in the html. So I tried to make a very simple library that exposes one variable containing a string. Should be simple I thought, but can't seem to get it to work.
My webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
library: {
name: 'mypack',
type: 'umd',
},
},
devtool: 'source-map',
devServer: {
watchContentBase: true,
contentBase: path.resolve(__dirname, 'dist'),
port: 9000
},
module: {
rules: [
{
test:/\.css$/,
use:['style-loader', 'css-loader']
}
]
},
}
My package.json:
{
"name": "mypack",
"version": "0.0.1",
"main": "./src/app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"start": "webpack ./src/app.js -d eval --watch --mode development",
"dev": "npx webpack serve"
},
"author": "me",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.0.0",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"style-loader": "^3.2.1"
}
}
My src/app.js
let myvar = "test";
export {myvar};
My dist/index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8"><title>test</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="main.js"></script>
</head>
<body>
Test
<script>
console.log(mypack.myvar);
</script>
</body>
</html>
mypack.myvar gives an 'undefined' in the console. mypack seem to be an empty object {}.
How can I access myvar in my package? What am I doing wrong?
Of course, this is only a dummy, in reality I would like to expose objects from the package.
In the end it seems to be a problem with the webppack-dev-server.
If I comment out the line 'contentBase: path.resolve(_dirname, 'dist'),' from the webpack.config.js, copy the index.html to the root of my package and change the script tag source to "dist/index_bundle.js" then it works.
Not sure what is going on there, the script seems to load just fine in the situation above (in the sourceview in the browser, I can click the link and I see the generated javascript) but doesn't seem to be working at all. But that's another question.
I use webpack for make bundler my js file for use in my django project. I use moment js which i get from "npm i moment". I make webpack with this configuration.
var path = require('path');
module.exports = {
"mode" : "development",
"entry" : "./index.js",
"output" : {
"path" : path.resolve(__dirname, "tugas/assets"),
"filename" : "bundles.js",
"clean" : true,
},
};
and this is my index.js for configuration before.
import moment from 'moment';
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
console.log("boma1");
This is my package.json.
{
"name": "Aplikasi-Database-Django",
"version": "1.0.0",
"description": "Tugas UAS Database Semester 7 2020",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/simasona123/Aplikasi-Database-Django.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/simasona123/Aplikasi-Database-Django/issues"
},
"homepage": "https://github.com/simasona123/Aplikasi-Database-Django#readme",
"devDependencies": {
"webpack": "^5.31.2",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"chart.js": "^3.1.0",
"moment": "^2.29.1"
}
}
as i know, webpack success to make bundle of moment.js because console can make output
but from above picture i cant import moment.js
this is my html code
This is my tree directory.
Thanks for your help... sorry for my bad question....
You should use require for moment.js, so replace what you have for the import with:
const moment = require('moment');
Alternatively, if you want to still use the import statement, this should work as well:
import * as moment from 'moment';
There's a discussion of this already here.
I'm trying to output an ESM module with WebPack 5. My understanding is that this feature has been added in version 5, and is used by specifying {output: libraryTarget: 'module'}} and {experiments: {outputModule: true}}.
I believe that what I'm seeing is just a WebPack bug - perhaps related to outputModule still being experimental, but I'm not very well versed in WebPack so could easily have missed something.
I get an error 'return' outside of function. With the configuration below, this happens when I run npx webpack. If I change mode to 'development', then it generates a bundle which indeed has a return statement at the end such that attempting to use it generates a similar error at runtime.
webpack.config.js:
const path = require('path');
module.exports = {
entry: "./index.js",
resolve: { extensions: ['.js'] },
//using 'production' rather than 'development' catches error earlier.
mode: 'production',
experiments: {
outputModule: true
},
output: {
filename: 'hello.js',
libraryTarget: "module",
path: path.resolve(__dirname, 'dist')
}
}
index.js
export default function() { return 42; }
package.json
{
"name": "webpackTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.5.1",
"webpack-cli": "^4.2.0"
}
}
I am working on a fairly simple project from https://medium.com/ethereum-developers/the-ultimate-end-to-end-tutorial-to-create-and-deploy-a-fully-descentralized-dapp-in-ethereum-18f0cf6d7e0e
Since the tutorial doesn't focus on the frontend part(webpack and babel and other things), I picked up these steps from different places.
Now I was trying to build the front using webpack and http-server, but I realized that it is not updating with the changes that I am making to the file.
webpack.config.js
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'src/js', 'index.js'), // Our frontend will be inside the src folder
output: {
path: path.join(__dirname, 'dist'),
filename: 'build.js' // The final file will be created in dist/build.js
},
module: {
rules: [{
test: /\.css$/, // To load the css in react
use: ['style-loader', 'css-loader'],
include: /src/
}, {
test: /\.jsx?$/, // To load the js and jsx files
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}]
}
}
package.json
{
"name": "test-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.10.2",
"#babel/preset-env": "^7.10.2",
"#babel/preset-react": "^7.10.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.3",
"json-loader": "^0.5.7",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"style-loader": "^1.2.1",
"web3": "^0.20.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"directories": {
"test": "test"
},
"dependencies": {},
"description": ""
}
I build it using
npx webpack --config webpack.config.js
and then serve it
http-server dist/
How do I fix this? And is this even the right way to do it?
Thanks.
U have already webpack-cli installed in your dependencies so u dont have to add config in command:
First Add Webpack Script in your Package.json:
"scripts": {
"watch": "webpack --watch",
},
When u run npm run watch --watch webpack will continue to watch for changes in any of the resolved files.
And for Server I recommend you webpack-dev-server
npm i webpack-dev-server
can be used to quickly develop an application
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
And add it to your npm script
"scripts": {
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --open",
}
Now we can run npm start from the command line and we will see our browser automatically loading up our page. If you now change any of the source files and save them, the web server will automatically reload after the code has been compiled.
Advise: you must add html file in dist or plugins for webpack HtmlWebpackPlugin