I am developing Dapp using Truffle v3.1.2 which is a development framework for Ethereum.I am using angular on node for this dapp & unfortunately I am very new to node & webpack.I am storing views in /views folder, images in /images folder & I need some help to modify the webpack.config.js file.I am using “npm run dev” to deploy it & I am getting “Error: [$compile:tpload] Failed to load template: views/main.html (HTTP status: 404 Not Found)” message.Please find the webpack.config.js file below.
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: [
'./app/bower_components/angular/angular.js',
'./app/bower_components/angular-route/angular-route.js',
'./app/javascripts/app.js',],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.js'
},
plugins: [
// Copy our app's index.html to the build folder.
new CopyWebpackPlugin([
{ from: './app/index.html', to: "index.html" }
])
],
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
loaders: [
{ test: /\.json$/, use: 'json-loader' },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
}
]
}
}
Related
I am trying to deploy the front-end of my web application, but when I deploy to my hosting platform (currently AWS Amplify/S3) - no content displays on the website
I created the application using create-react-app, so the project structure follows their standard (public, src folders etc.).
When I run the application locally it works fine.
From the console errors, and looking at the index.html page that is generated by webpack, it looks like it is not replacing the %PUBLIC_URL% field that should be replaced with the public directory on build.
Please can someone explain how to fix this issue?
I have included my webpack.config file below and the full repo can be found here
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
entry: ['react-hot-loader/patch', './src/index.js'],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.svg$/,
use: 'file-loader',
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png',
},
},
],
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use: 'file-loader',
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'react-dom': '#hot-loader/react-dom',
},
},
devServer: {
contentBase: './build',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./public/index.html'),
}),
],
}
module.exports = config
Turns out this was an issue with me trying to add a custom Webpack configuration to a create-react-app project.
I've removed the Webpack config now, and instead used the dist files created when using the create-react-app build process.
I am using webpack and react js.
I am getting this error when i try to import image or font file inside my scss file.
I have tried many solutions but none of them solved my problem,
webpack.common.js
enter image description here
const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
main: "./src/index.js",
vendor: "./src/vendor.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(ttf|svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
outputPath: "imgs"
}
}
}
]
}
};
Here is another webpack.dev.js
module.exports = merge(common, {
mode: "development",
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html"
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader" //1. Turns sass into css
]
}
]
}
});
ERROR in ./src/assets/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/assets/index.scss)
Module not found: Error: Can't resolve '../../../src/assets/fonts/icomoon.ttf' in 'C:\Users\jamal\Documents\webpack-demo-app\src\assets'
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
You need to remember that the import actually takes "place" from the root index.scss file (the one that loads all the other partials). So the path you are using to fetch the asset is not accurate.
You need to use ./fonts/icomoon.ttf instead of ../fonts/icomoon.ttf
your file structure:
assets/
------/fonts
------/images
------/sass
------/---/partial1.scss // while the reference to the image is here
------/index.scss // the actual root of the reference call is here
I am using webpack 4.7.0 with webpack-cli installed. This is for a react-js app. Here is my webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './client/index.html',
filename: 'index.html',
'inject': 'body'
});
module.exports = {
entry: './client/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}
]
}
plugins: [HtmlWebpackPluginConfig]
}
Now when I run the command node_modules.bin\webpack --config webpack.config.js, I get the following error message:
plugins: [HtmlWebpackPluginConfig]
^^^^^^^
SyntaxError: Unexpected identifier
And I am not able to build my application. Here is my npm -v & node -v: 5.7.1
v9.4.0. How do I solve this issue?
I have a react/express project
I want to be able to customize the Bootstrap 4 and output a CSS file which will contain the customized boostrap.css.
I have npm installed the loaders bootstrap needs ( postcss-loader,sass-loader,style-loader etc), although in web I saw an example with ExtractTextPlugin in order to get output file
when I run the webpack config I get an error
" throw new Error("'output.filename' is required, either in config file or as --output-filename");"
Any tutorial/help how to accomplish compiling customized bootstrap in seperate output file?
webpack config
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
//root file for the client/browser app
entry: './src/client/client.js',
//output file and its location
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'public'),
},
//run babel for every filename
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets:
[
'react',
'stage-0',
[
'env',
{
targets:
{
browsers:
['last 2 versions']
}
}
]
]
}
}
]
},
};
module.exports = {
// root file for the client/browser app
entry: './src/client/styles/main.scss',
// output file and its location
output: {
filename: 'styles2.css',
path: path.resolve(__dirname,'public'),
},
module: {
loaders: [
// ...
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true,
})
]
};
You need to remove the extra module.exports. I do not see the need to have two of these as you can simply achieve the same thing inside a single module.exports.
You can achieve this like so:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
//root file for the client/browser app
entry: [
'./src/client/client.js',
'./src/client/styles/main.scss'
],
//output file and its location
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'public'),
},
//run babel for every filename
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets:[
'react',
'stage-0',
[
'env',
{
targets:
{
browsers:
['last 2 versions']
}
}
]
]
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css-loader!sass-loader')
}
],
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true,
})
]
},};
I'm having a problem with a pretty straight forward webpack configuration:
var webpack = require('webpack');
path = require('path');
var PATHS = {
app: __dirname + "/app"
};
var config = {
context: PATHS.app,
entry: {
app: ['webpack/hot/dev-server', './core/bootstrap.js']
}
,
// entry: './core/bootstrap.js',
output: {
path: PATHS.app,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: 'ng-annotate!babel', exclude: /node_modules/},
{test: /\.less$/, loader: "style!css!less", exclude: /node_modules|bower_components/},
{test: /\.json$/, loader: "json", exclude: /node_modules|bower_components/},
{test: /\.html$/, exclude: /node_modules/, loader: "raw"},
{test: /\.(ttf|eot|svg|otf)$/, loader: "file"},
{test: /\.woff(2)?$/, loader: "url?limit=10000&minetype=application/font-woff"}
]
},
plugins: [
new webpack.DefinePlugin({
ON_TEST: process.env.NODE_ENV === 'test'
})
],
devtool: "#inline-source-map"
}
if (process.env.NODE_ENV === 'production'){
config.output.path = __dirname + '/dist';
config.plugins.push(new webpack.optimize.UglifyJsPlugin());
config.devtool = 'source-map';
}
module.exports = config;
I'm trying to build a minified version of my code and but when I'm running
NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html there is no bundle.min.js in my dist folder and when I'm running http-server dist I'm getting Uncaught Error: [HMR] Hot Module Replacement is disabled.
From going through the web I see that this is a common problem but nowhere did I find the way to fix this: I'm using the --hot flag that suppose to add the hot-swap plugin.