I'm trying to setup a gulp watch task to run all test under a set of folder, I can get the gulp tasks to run successful:
[10:20:15] Finished 'karma' after 5.86 s
[10:20:15] Starting 'default'...
[10:20:15] Finished 'default' after 9.45 ms
But no notification of any test passing?
Here is my karma.config:
var webpack = require("webpack"),
path = require("path");
module.exports = function (config) {
config.set({
basePath: "",
frameworks: ["jasmine"],
files: [
"./App/src/tests/**/*.js"
],
preprocessors: {
"./App/src/tests/**/*.js": ["webpack"]
},
webpack: {
module: {
loaders: [
{ test: /\.js$/, loader: "jsx-loader" }
]
},
plugins: [
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
])
],
resolve: {
root: [path.join(__dirname, "./bower_components"), path.join(__dirname, "./src")]
}
},
webpackMiddleware: {
noInfo: true
},
plugins: [
require("karma-webpack"),
require("karma-jasmine"),
require("karma-chrome-launcher")
],
reporters: ["dots"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["Chrome"],
singleRun: false
});
};
Here is my karma.js:
var gulp = require('gulp');
var karma = require('gulp-karma');
function handleError(err) {
this.emit('end');
}
gulp.task('karma', function() {
return gulp
.src('./App/src/tests/**/*.js')
.pipe(karma({
configFile: 'karma.conf.js',
action: 'run'
}))
.on("error", handleError);
});
Gulpfile:
var gulp = require('gulp'),
requireDir = require('require-dir');
requireDir('./gulp-tasks');
gulp.task('default', ['browserify','css','karma'], function () {
gulp.watch('../App/src/**/*.js', ['browserify']);
gulp.watch('../App/src/**/*.css', ['css']);
gulp.watch('../App/src/tests/**/*.js', ['karma']);
});
Related
I am using Webpack 3 as a module loader for my application. But when I analyze my vendor.js bundle, I see that d3 is loaded twice in there - once a separate module, and once as a dependency. How can I make it load only once?
I tried these, but did not work:
Adding it as alias
Adding it in the CommonsChunkPlugin
Here is my webpack config file:
var webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
autoprefixer = require('autoprefixer'),
WebpackNotifierPlugin = require('webpack-notifier'),
ngAnnotatePlugin = require('ng-annotate-webpack-plugin'),
path = require('path'),
bourbon = require('bourbon').includePaths,
BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var ENV = process.env.npm_lifecycle_event;
var isProd = false;
module.exports = {
cache: true,
entry: {
// vendor: [
// 'angular',
// 'jquery',
// 'velocity-animate',
// 'highcharts',
// 'd3',
// 'rickshaw',
// 'angular-block-ui',
// 'angular-sanitize',
// 'angular-animate',
// 'angular-cookies',
// './Private/Scripts/app/session/session.module',
// 'jquery.viewport',
// 'oclazyload',
// 'angular-ui-router',
// 'moment',
// 'bootstrap/js/tooltip'
// ],
wealth: './Private/Scripts/app/wealth/bootstrap.ts',
goal: './Private/Scripts/app/goal/bootstrap.ts',
login: './Private/Scripts/app/login/login.bootstrap.ts',
register: './Private/Scripts/app/register/register.bootstrap.ts',
dashboard: './Private/Scripts/app/dashboard/bootstrap.ts',
personal: './Private/Scripts/app/personal/bootstrap.ts',
resetPassword: './Private/Scripts/app/reset-password/reset-password.bootstrap.ts',
forgottenPassword: './Private/Scripts/app/forgotten-password/forgotten-password.bootstrap.ts',
products: './Private/Scripts/app/products/products.bootstrap.ts',
onboarding: './Private/Scripts/app/onboarding/onboarding.bootstrap.ts',
portfolio: './Private/Scripts/app/portfolio/bootstrap.ts',
investments: './Private/Scripts/app/investments/bootstrap.ts',
savings: './Private/Scripts/app/savings/bootstrap.ts',
customerIdentification: './Private/Scripts/app/customer-identification/customer-identification.bootstrap.ts',
wealthCoach: './Private/Scripts/app/wealth-coach/wealth-coach.bootstrap.ts',
shared: './Private/Scripts/app/shared/shared.bootstrap.ts',
riskTest: './Private/Scripts/app/risk-test/module.ts',
riskProfile: './Private/Scripts/app/risk-profile/bootstrap.ts',
upgradeProduct: './Private/Scripts/app/upgrade/upgrade.bootstrap.ts',
pendingActivation: './Private/Scripts/app/pending-activation/pending-activation.bootstrap.ts',
meeting: './Private/Scripts/app/meeting/meeting.bootstrap.ts'
},
output: {
path: __dirname + '/Private/build',
filename: 'scripts/[name].js',
publicPath: '/Private/build/'
},
devtool: 'eval',
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
alias: {
config: path.join(__dirname, "/Private/Scripts/app/config/", process.env.npm_lifecycle_event),
d3: path.resolve('./node_modules/d3'),
}
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: 'ts-loader'
},
{
test: /\.scss$/,
use: [
'file-loader?name=styles/[name].css',
'extract-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
// {
// loader: 'fast-sass-loader',
// }
{
loader: 'sass-loader',
options: {
sourceComments: false,
outputStyle: "compressed",
includePaths: [require('bourbon').includePaths]
}
}
]
},
{
test: /\.woff(2)?(\?[a-z0-9]+)?$/,
use: ['url-loader?name=styles/fonts/[name].[ext]']
},
{
test: /\.(ttf|eot|svg|otf)(\?[a-z0-9]+)?$/,
use: ['file-loader?name=styles/fonts/[name].[ext]']
},
{
test: /\.json$/,
use: 'json-loader'
}
]
},
node: {
fs: 'empty'
},
plugins: [
new ngAnnotatePlugin({
add: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'humanizeDuration': 'humanize-duration',
'moment': 'moment',
CONFIG: 'config'
}),
new WebpackNotifierPlugin({
excludeWarnings: true,
alwaysNotify: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks(module, count) {
var context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(isProd)
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/),
new webpack.optimize.ModuleConcatenationPlugin(),
new BundleAnalyzerPlugin()
]
};
What is your workplace?
Hello, I would like to ask what is your approach to developing the frontend and backend simultaneously?
I am into Webpack, but, what to do when I want to edit framework?
Do I need to run webpack in or out of the box?
Is it possible to reference webpack --watch or some other module to server as proxy? And if so how to set for example *.php files on change to force refresh page.
So far I have worked separately on the framework and particularly on frontend. Now I do not really know how to combine together, especially when many modules of webpack2 is obsolete.
Windows X, Docker(laradock), Webpack, SASS, JS, PHP
Thank you for the future suggestions.
You should use webpack-dev-server as proxy to support multiple hosts.
Then you will be able to load 'backend' from server and developing in another enviroment using all benefits from webpack MHR inlining.
Here is my webpack.config.js
var path = require('path');
var htmlWebPack = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack')
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var buildPath = path.join(__dirname); // Local /public/
var serverURL = 'http://localhost:8080/' // Webpack-dev-server
var proxyURL = 'http://LaraDock.dev:85/' // External server (laradock)
var proxy = {
'*': proxyURL
};
module.exports = {
devtool: 'cheap-eval-source-map',
context: path.join(__dirname, 'resources'), // ABSOLUTE ROUTE ./
entry: {
app: [
'webpack-dev-server/client?' + serverURL,
'webpack/hot/only-dev-server',
path.join(__dirname, 'resources/assets/js/app.js')
]
},
output: {
publicPath: serverURL + buildPath,
path: path.resolve(__dirname, buildPath),
filename: "js/[name].bundle.js"
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
},
},
module: {
loaders: [
// JS
{
test: /\.js$/, // ON WHAT TYPE USE THIS LOADER
loader: 'babel-loader',
include: path.join(__dirname, 'resources', 'assets', 'js'),
},
// VUE
{
test: /\.vue$/,
loader: 'vue-loader',
include: path.join(__dirname, 'resources', 'assets', 'js'),
},
// STYLE
{
test: /\.(sass|scss|css)$/,
loader: ['style-loader', 'css-loader', 'sass-loader'],
include: path.join(__dirname, 'resources', 'assets', 'scss'),
},
// FILES
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
loader: "file-loader?name=[path][name].[ext]&context=./resources/assets"
},
// FONTS
{
test: /\.(otf|eot|svg|ttf|woff)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'file-loader'
},
// BOOTSTRAP
{
test: /bootstrap\/public\/js\/umd\//,
loader: 'imports?jQuery=jquery'
},
],
},
devServer: {
contentBase: serverURL + buildPath,
proxy: proxy,
historyApiFallback: true,
hot: true,
noInfo: true,
stats: {
errors: true,
colors: true,
errorDetails: true,
reasons: false,
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
children: false,
source: false,
warnings: false,
publicPath: false
}
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new BrowserSyncPlugin(
// BrowserSync options
{
// Webpack-dev-server endpoint
host: 'http://localhost',
port: 80,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:80/) through BrowserSync
proxy: serverURL,
// Files
files: ['public/*', 'app/**/*.php', 'config/**/*.php', 'resources/views/**/*.php'],
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}),
new ExtractTextPlugin({
filename: './css/[name].style.css',
disable: false,
allChunks: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"Tether": 'tether' // Bootstrap v4 problem
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
],
};
Here is my stats file for analyse.
I use latest version of prestashop (1.7), i want to use build in webpack script placed on _dev, the problem is a very slow compilating and watch tasks.
I run webpack by:
npm run watch
Result:
Version: webpack 1.14.0
Time: 12092ms
How i can improve performance?
I found same problem my webpack.config file is
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var plugins = [];
var production = false;
if (production) {
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
);
}
plugins.push(
new ExtractTextPlugin(
path.join(
'..', 'css', 'theme.css'
)
)
);
module.exports = {
entry: [
'./js/theme.js'
],
output: {
path: '../assets/js',
filename: 'theme.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel-loader']
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css?sourceMap!postcss!sass?sourceMap"
)
}, {
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
loader: 'file-loader?name=../css/[hash].[ext]'
}, {
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}]
},
postcss: function() {
return [require('postcss-flexibility')];
},
externals: {
prestashop: 'prestashop'
},
devtool: 'source-map',
plugins: plugins,
resolve: {
extensions: ['', '.js', '.scss']
}
};
I'm using webpack and React with react-css-modules and scss files. When i try and build it gives me an error on every file that imports scss files -
ERROR in ./app/components/Buttons/Button.scss
Module build failed: ReferenceError: window is not defined
I have googled for a solid day and a half and have got no where! Please help!
Here's my webpack set up:
var webpack = require('webpack');
var PROD = (process.env.NODE_ENV === 'production');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.jsx'
],
output: {
path: __dirname + '/dist',
filename: PROD ? 'bundle.min.js' : 'bundle.js'
},
watchOptions: {
poll: true
},
module: {
preLoaders: [
{
test: /\.jsx$|\.js$/,
loader: 'eslint-loader',
include: __dirname + '/assets',
exclude: /bundle\.js$/
}
],
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', ['style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded'])
}
]
},
postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
})
] : [
HTMLWebpackPluginConfig,
new ExtractTextPlugin("styles.css", {
allChunks: true
})
]
};
Thanks in advance!
This question keeps popping up when I tried to resolve the same error for Webpack 2, scss, extracttextplugin, and react. The following worked for me.
{
test:/\.scss$/,
use:ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","sass-loader"]}),
include:path.join(__dirname,"client/src"),
},
Hope this helps.
I think you have to change it to this, the second parameter goes as a string instead of array. Also removed the repeated use of the style loader.
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded')
Trying to add sass-loader to my webpack config and running into an error:
70% 1/1 build modules/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81
r.forEach(function(r) {
^
TypeError: undefined is not a function
at /Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81:5
at Array.reduce (native)
at LoadersList.match (/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:80:27)
webpack.config:
var webpack = require("webpack");
var baseDir = "dist";
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
module.exports = {
context: __dirname + "/app",
entry: {
app: "./main"
},
resolve: {
extensions: ['', '.js', '.ts', '.css', '.scss']
},
output: {
path: __dirname + "/dist",
sourceMapFilename: "[name].map",
filename: "[name].js"
},
module: {
loaders: [
//https://www.npmjs.com/package/webpack-typescript
{
test: /\.ts$/,
loader: "ts-loader"
},
{
test: /\.scss$/,
loaders: ExtractTextPlugin.extract("style", "css!sass")
//loaders: ExtractTextPlugin.extract("style!css!sass")
}
],
noParse: [ /angular2\/bundles\/.+/ ]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new ExtractTextPlugin("style.css"),
new HtmlWebpackPlugin({
template: "../index.html",
inject: "body"
})
],
devtool: "source-map"
};
I've tried a bunch of different options for the params to the extract() call but with no luck. Any help would be greatly appreciated.
Instead of using
loaders: ExtractTextPlugin.extract("style", "css!sass")
you should use
loader: ExtractTextPlugin.extract("style", "css!sass")
instead.
The error isn't particularly descriptive in this case.
In my case solution was instead ExtractTextPlugin use MiniCssExtractPlugin. More details in this video https://www.youtube.com/watch?v=JlBDfj75T3Y&list=PLblA84xge2_zwxh3XJqy6UVxS60YdusY8&index=10
So, my config looks like
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
//babel
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
//css
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
title: "My app",
}),
new MiniCssExtractPlugin(),
new CleanWebpackPlugin(),
],
};