I get this error in app.js:
Uncaught ReferenceError: require is not defined
Why webpack require not work? Is any additional wabpack configutarion needed to make this work?
webpack.config.js
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: ['./src/app.js', './src/styles/styles.scss'],
output: {
filename: 'dist/bundle.js'
},
resolve: {
extensions: ['.js'],
},
module: {
rules: [
{ // regular css files
test: /\.css$/,
loader: ExtractTextPlugin.extract({
loader: 'css-loader?importLoaders=1',
}),
},
{ // sass / scss loader for webpack
test: /\.(sass|scss)$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
},
{
test: /\.hbs$/,
loader: 'handlebars-loader'
}
]
},
plugins: [
new ExtractTextPlugin({ // define where to save the file
filename: 'dist/[name].bundle.css',
allChunks: true,
}),
],
};
app.js
const something = require("./something.js");
Related
I'm new in Webpack (before I used Gulp) and now I want to move the existing application from Gulp to Webpack.
But I'm getting issues like Module not found: Error: Can't resolve '/src/app/index.js' in '/var/www/project' or Module not found: Error: Can't resolve '/src/styles/main.scss' in '/var/www/project' and same for every file i'm using on my enty chain.
Here is my file structures:
package.json
.env
.env.example
webpack.conf.js
src/
app/
index.js
other js/vue related files
styles/
main.scss and all related styles
public/
index.html
favicon.ico
images/
all images
and here is mine webpack.conf.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const Dotenv = require('dotenv-webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const ENV = process.env.APP_ENV;
const isDev = ENV === 'dev'
const isProd = ENV === 'prod';
function setDevTool() {
if (isDev) {
return 'inline-source-map';
} else if (isProd) {
return 'source-map';
} else {
return 'eval-source-map';
}
}
const config = {
entry: {
'bundle.min.css': [
path.resolve(__dirname, '/src/styles/main.scss'),
],
'bundle.js': [
path.resolve(__dirname, '/src/app/index.js')
]
},
output: {
filename: '[name]',
path: path.resolve(__dirname, 'dist'),
},
devtool: setDevTool(),
module: {
rules: [
// fonts loader
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
},
// babel loader
{
test: /\.js$/,
use: 'babel-loader',
exclude: [
/node_modules/
]
},
// raw html loader
{
test: /\.html/,
loader: 'raw-loader'
},
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
// sass loader
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['style-loader', 'css-loader', 'sass-loader']
})
},
// vue loader
{
test: /\.vue$/,
loader: 'vue-loader'
},
// image url inliner
{
test: /\.(jpe?g|png|gif)$/,
loader: 'url-loader',
options: {
limit: 50 * 1024
}
},
// svg url inliner
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {
limit: 50 * 1024,
noquotes: true,
}
},
// image loader
{
test: /\.(jpg|png|gif|svg)$/,
loader: 'image-webpack-loader',
enforce: 'pre'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/src/public/index.html",
inject: 'body'
}),
new Dotenv({safe: true}),
new ExtractTextPlugin("bundle.min.css"),
new VueLoaderPlugin()
],
devServer: {
contentBase: './src',
port: 7700,
}
}
if (isProd) {
config.plugins.push(
new UglifyJSPlugin(),
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}])
);
};
module.exports = config;
I do not understand why it can't find those files if for examlpe '/var/www/project//src/styles/main.scss' it mention in error is correct path?
Try to remove the initial slashes from path.resolve(). For example:
path.resolve(__dirname, '/src/styles/main.scss')
should be:
path.resolve(__dirname, 'src/styles/main.scss')
When running gulp webpack, this is the error I get:
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./resources/assets/js/app.js in /home/vagrant/mysite/website
This is triggered by my 'gulp' command which runs webpack with the following:
gulp.task('webpack-compile', function(){
gulp.src('resources/assets/js/app.js')
.pipe(babel({
}))
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('public/assets/js'))
.pipe(browserSync.stream());
});
This is my current webpack file:
var path = require('path');
var webpack = require('webpack');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether'
});
module.exports = {
entry: './resources/assets/js/app.js',
output: {
path: path.resolve(__dirname, './public/assets/js'),
publicPath: './assets/js/',
filename: './app.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
};
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map';
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
My gulp file is in the root of the folder, my webpack.config file is in the same root folder.
The entry JS file is in resources/assets/js/app.js from the root folder.
What could I be doing wrong to get this error?
You might want to use webpack-stream
const gulp = require("gulp");
const webpackStream = require("webpack-stream");
const webpack = require("webpack");
const webpackConfig = require('./webpack.config.js');
gulp.task('webpack-compile', function(){
gulp.src('resources/assets/js/app.js')
.pipe(babel({
}))
.pipe(webpackStream(webpackConfig, webpack))
.pipe(gulp.dest('public/assets/js'))
.pipe(browserSync.stream());
});
and remove entry in webpack.config.js
I need to bundle my front-end javascript files to bundle.js.
here is my webpack.config file,
var path = require('path');
var nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
target: 'node',
entry:['babel-polyfill', './bin/run.js'],
output: {
path: './build',
filename: '[name].min.js'
},
externals: nodeModules,
plugins: [
new HtmlWebpackPlugin(),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
screw_ie8: true
}
})
],
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
include:/public/,
exclude: /(node_modules|bower_components)/
}
],
noParse: [/ws/]
}
};
how can I include my front-end javascript files to the bundle ?
If you are using webpack2 then you should know this change:
module: {
rules: [ // <----it is been changed to "rules"
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
}
],
noParse: [/ws/]
}
My webpack build has 2 entries the vendor.js => vendor.js file and index.js => bundle.js.
Obviously vendor.js is the file where all the 3rd party libraries go, and in index.js goes my code.
I've been encountering some issues, many of the 3rd party libraries I include (in vendor.js), does not execute from bundle.js . Why is that?
My webpack configuration:
import path from 'path';
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
module.exports = {
entry: {
bundle: './dev/index.js',
vendor: './dev/vendor.js'
},
output: {
path: path.join(__dirname, 'dist'),
// publicPath: 'http://localhost:3000/',
filename: '[name].[hash].js',
chunkFilename: '[id].bundle.js'
},
externals: [
{
"./dev/assets/Paraxify/paraxify.js": "paraxify",
}
],
module: {
loaders: [
{
test: /\.js$/,
// exclude: path.resolve(__dirname, "node_modules"),
loader: 'babel-loader',
// exclude: [
// path.resolve(__dirname, "node_modules"),
// ],
query: {
compact: true,
plugins: ["transform-es2015-modules-commonjs"],
presets: ['es2015', 'stage-0']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css!postcss-loader!sass")
},
// { test: /jquery/, loader: 'expose?$!expose?jQuery' },
{ test: /\.jpg$/, loader: "file-loader?name=./assets/imgs/[name].jpg" },
{ test: /\.png$/, loader: "file-loader?name=./assets/imgs/[name].png" },
{ test: /\.(gif|woff|woff2|eot|ttf|svg)$/, loader: "url-loader" },
// { test: /\grabbing.gif$/, loader: "url-loader" },
// { test: /\preloader.gif$/, loader: "url-loader" },
// { test: /\default-skin.svg$/, loader: "url-loader" },
// { test: /\/default-skin.png$/, loader: "url-loader" }
// { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
postcss: function () {
return [precss, autoprefixer];
},
plugins: [
new CopyWebpackPlugin([
{ from: './dev/assets', to: 'assets' }
]),
new CopyWebpackPlugin([
{ from: './dev/bootstrap3', to: 'bootstrap3' }
]),
new webpack.optimize.CommonsChunkPlugin({
name: ['bundle', 'vendor']
}),
new HtmlWebpackPlugin({
hash: false,
template: 'ejs!./dev/index.html',
inject: 'body'
}),
new ExtractTextPlugin("styles.[hash].css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
// new webpack.ProvidePlugin({
// twentytwenty: "frontend/dev/assets/twentytwenty/js/jquery.twentytwenty"
// })
]
};
Example of the issue :
Vendor.js : Importing Scrollreveal (https://scrollrevealjs.org/)
import $ from 'jquery';
// import 'eqcss';
// import Rx from 'rx';
import * as ScrollReveal from 'scrollreveal';
And when I do : window.sr = ScrollReveal({ reset: true }); for the variable to be available globally, I get an error in the browser's console : Uncaught TypeError: ScrollReveal is not a function
Can someone explain me What I'm doing incorrectly? Thanks
I am trying to build my project using webpack and thus far I am loving it. However, now that I am trying to include font-awesome, it is annoying me quite a bit.
I have installed font-awesome through npm, and I have imported it into my project using import 'font-awesome/css/font-awesome.css'. Webpack then tries to include that file, but fails to find the appropriate loader for the font files. Here is my webpack.config.js:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractScss = new ExtractTextPlugin('bundle.css');
module.exports = {
entry: './app/app.tsx',
output: {
path: 'dist',
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.ts', '.js', '.tsx']
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.ts(x?)$/,
loader: 'babel?presets[]=es2015!ts'
},
{
test: /\.scss$/,
loader: extractScss.extract(['css', 'sass'])
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.ejs',
inject: false,
appMountId: 'root'
}),
new ExtractTextPlugin('bundle.css')
]
};