Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
82
rated 0 times [  87] [ 5]  / answers: 1 / hits: 15609  / 6 Years ago, wed, february 7, 2018, 12:00:00

I am making a web app use react and php and i am using webpack for es6 to js so i generated files but i have a problem about webpack output bundle.js file.




this is my webpack.config.js




const webpack = require('webpack');

module.exports = {
entry: [
'./src/index.jsx'
],
output: {
path: '/dist',
publicPath: '/dist/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
},
module: {
rules: [{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
}, {
test: /(.css|.scss)$/,
use: [{
loader: style-loader
}, {
loader: css-loader
}, {
loader: sass-loader
}]
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
};



this is my package.json




{
name: react-app,
version: 1.0.0,
description: ,
main: index.js,
scripts: {
start: webpack-dev-server --history-api-fallback --progress --colors --config ./webpack.config.js
},
author: ,
license: ISC,
devDependencies: {
axios: ^0.17.1,
babel-core: ^6.26.0,
babel-loader: ^7.1.2,
babel-preset-env: ^1.6.1,
babel-preset-react: ^6.24.1,
babel-preset-stage-2: ^6.24.1,
clean-webpack-plugin: ^0.1.18,
css-loader: ^0.28.9,
html-webpack-plugin: ^2.30.1,
node-sass: ^4.7.2,
react-hot-loader: ^3.1.3,
sass-loader: ^6.0.6,
style-loader: ^0.20.1,
webpack: ^3.10.0,
webpack-dev-server: ^2.11.1
},
dependencies: {
bootstrap: ^4.0.0,
express: ^4.16.2,
react: ^16.2.0,
react-dom: ^16.2.0,
react-router-dom: ^4.2.2,
reactstrap: ^5.0.0-beta
}
}


why webpack generate and give me a bundle.js into the dist folder ? only saves it to the memory and show it on the localhost. i want use this react app with php but i can not handle to bundle.js.
Where is the problem and why the webpack did not generate the js file.
please help me


More From » reactjs

 Answers
8

Your webpack configuration output filed got problem.



import const path = require('path') first in webpack.config.js and change output filed as below:



output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'bundle.js'
}


And add following script into your package.json in script filed

build: webpack -p --progress



Run npm run build


[#55230] Monday, February 5, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jaylynkarinam

Total Points: 740
Total Questions: 103
Total Answers: 103

Location: Liechtenstein
Member since Wed, Dec 8, 2021
3 Years ago
;