I use webpack for working with JavaScript (ES6 modules bundling, converting to ES5, etc.) and gulp - for other tasks (jade, sass, etc.). I want to keep the webpack configuration in webpack.config.js, but to execute webpack by gulp task.
Project structure
📁 development
📁 es6 - source JS
📄 main.js
📁 js - output JS for development
📄 index.js
📁 production
📄 webpack.config.js
📄 gulpfile.js
gulpfile.js
var gulp = require('gulp'),
//...
gulpwebpack = require('gulp-webpack')
gulp.task('gulpwebpack', function(){
return gulp.src('development/03_es6/main.js')
.pipe(gulpwebpack(require('./webpack.config.js')))
.pipe(gulp.dest('development/js/'));
});
// ...
gulp.task('watch', ['browser-sync', 'jade', 'sass'], function() {
// ...
gulp.watch('development/03_es6/*.js', ['test']);
});
gulp.task('default', ['watch']);
webpack.config.js
const NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = {
context: __dirname + '/development',
entry: './03_es6/main.js',
output: {
path: __dirname + '/development/js/',
filename: 'index.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
}
//watch: NODE_ENV === 'development'
};
Problem
If just to execute webpack from the console (it means to execute the webpack independently from gulp), everything will be correct. However, if to execute gulp gulpwebpack, the error message will appear:
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./development/03_es6/main.js in C:\...\projectFrolder/development
I understand that the origin of error is here:
// ...
context: __dirname + '/development',
entry: './03_es6/main.js',
output: {
// ...
However development/03_es6/main.js and ./development/03_es6/main.js will not work too. Gulp can not read webpack.config.js correctly, isn't it?
I think, you should switch to
'use strict';
const gulp = require('gulp'),
named = require('vinyl-named'),
webpack = require('webpack-stream');
gulp.task('webpack', function () {
gulp.src('development/03_es6/main.js')
.pipe(named())
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('./build'))
});
Remove entry from webpack.config.js:
module.exports = {
context: __dirname + '/development',
output: {
path: __dirname + '/development/js/',
filename: 'index.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
}
};
Related
I'm working on a new module for an existing project that still uses requireJS for module loading. I'm trying to use new technologies for my new module like webpack (which allows me to use es6 loaders using es6 imports). It seems like webpack can't reconcile with requireJS syntax. It will say things like: "Module not found: Error: Can't resolve in ".
Problem: Webpack won't bundle files with requireJS/AMD syntax in them.
Question: Is there any way to make webpack play nice with requireJS?
My final output must be in AMD format in order for the project to properly load it. Thanks.
I had the same question and I managed to achieve it. Below is the same webpack.config.js file.
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
let basePath = path.join(__dirname, '/');
let config = {
// Entry, file to be bundled
entry: {
'main': basePath + '/src/main.js',
},
devtool: 'source-map',
output: {
// Output directory
path: basePath + '/dist/',
library: '[name]',
// [hash:6] with add a SHA based on file changes if the env is build
filename: env === EnvEnum.BUILD ? '[name]-[hash:6].min.js' : '[name].min.js',
libraryTarget: 'amd',
umdNamedDefine: true
},
module: {
rules: [{
test: /(\.js)$/,
exclude: /(node_modules|bower_components)/,
use: {
// babel-loader to convert ES6 code to ES5 + amdCleaning requirejs code into simple JS code, taking care of modules to load as desired
loader: 'babel-loader',
options: {
presets: ['es2015'],
plugins: []
}
}
}, { test: /jQuery/, loader: 'expose-loader?$' },
{ test: /application/, loader: 'expose-loader?application' },
{ test: /base64/, loader: 'exports-loader?Base64' }
]
},
resolve: {
alias: {
'jQuery': 'bower_components/jquery/dist/jquery.min',
'application': 'main',
'base64': 'vendor/base64'
},
modules: [
// Files path which will be referenced while bundling
'src/**/*.js',
'src/bower_components',
path.resolve('./src')
],
extensions: ['.js'] // File types
},
plugins: [
]
};
module.exports = config;
When I try to run npm run webpack, this shows "Error: 'output.filename' is required, either in config file or as --output-filename."
The config file is named correctly as webpack.config.js and is also in the root directory.
Below is the content in the config file:
var path = require('path');
var webpack = require('webpack');
module.exports - {
entry: './app.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node-modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
Would really appreciate help
You have a syntax error.
module.exports -
should be:
module.exports =
And btw, you do not need to require webpack in the configuration file.
I have the following webpack config file:
var webpack = require('webpack');
var config = {
context: __dirname + '/src', // `__dirname` is root of project and `src` is source
entry: {
app: './app.js',
},
output: {
path: __dirname + '/dist', // `dist` is the destination
filename: '[name].bundle.js',
},
devServer: {
open: true, // to open the local server in browser
contentBase: __dirname + '/src'
},
module: {
rules: [
{
test: /\.js$/, //Check for all js files
use: [{
loader: 'babel-loader',
options: { presets: ['es2015'] }
}]
}
]
}
};
module.exports = config;
when I run "webpack-dev-server" I get the following error:
ERROR in (webpack)-dev-server/client?http://localhost:8080
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/usr/local/lib/node_modules/webpack-dev-server/client/index.js?http:/"
Faced the same problem following a tutorial on Udemy. Adding the .babelrc worked for me.
/Website
---/Scripts/*.js
---/sass/*.scss
---/dist/*.css
I want to do 2 things :
JShint the .js files
Compile the scss file and move them to dist folder
I tried this configuration, but it does't seem to work.
var webpack = require('webpack'),
path = require("path"),
glob = require("glob"),
jshint = require('jshint-loader'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: glob.sync("./Scripts/**/*.js"),
output: {
path: "./Scripts/",
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "jshint-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
}
]
},
resolve: {
extensions: [".js", ".css", ".sass", "scss"]
},
plugins: [
new ExtractTextPlugin('./dist/[name].css')
]
}
When I run webpack, the .js files are bundled into a main.js file and errors are emitted.
What am I missing to be able to JSHint the .js files
Is it possible to tell webpack to not bundle the files and just execute the JSHint
Why Im not getting the css files
I am moving existing javascript vendor libraries into a webpack setup, where possible using npm to install an npm module and deleting the old script tag on the individual page as bundle.js and bundle.css include it
In index.js, I have the following
import 'materialize-css/dist/css/materialize.min.css';
However, when webpack is run, it errors with the following
Module parse failed: .......Unexpected character ''
You may need an appropriate loader to handle this file type.
So, for some reason, webpack is looking at the entire materialize folder, rather than just the single minified css file, and is then error when it comes across materialize/fonts directory.
I am unclear why this is happening, and what to do to stop it. Any advice would be greatly appreciated.
My webpack config is below
const webpack = require('webpack');
const path = require('path');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var postcssImport = require('postcss-import');
module.exports = {
context: __dirname + '/frontend',
devtool: 'source-map',
entry: "./index.js",
output: {
filename: 'bundle.js',
path: path.join(__dirname, './static')
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', '!css-loader?sourceMap&importLoaders=1!postcss-loader')
}
]
},
plugins: [
new ExtractTextPlugin("si-styles.css")
],
postcss: function(webpack) {
return [
postcssImport({ addDependencyTo: webpack }), // Must be first item in list
precss,
autoprefixer({ browsers: ['last 2 versions'] })
];
},
}