Working first time on using Webpack in a ASP.Net Core project and running in to an issue bundling jQuery
$ is not defined
webpack.config.json
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const bundleFileName = 'bundle';
const dirName = 'wwwroot/dist';
module.exports = (env, argv) => {
return {
mode: argv.mode === "production" ? "production" : "development",
entry: ['./node_modules/bootstrap/dist/js/bootstrap.bundle.js', './wwwroot/js/site.js', './wwwroot/scss/site.scss'],
output: {
filename: bundleFileName + '.js',
path: path.resolve(__dirname, dirName)
},
module: {
rules: [
{
test: /\.s[c|a]ss$/,
use:
[
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: bundleFileName + '.css'
})
]
};
};
I have tried and exhausted all possible variations I could find on the internet without any luck.
Using npm run build during the .Net build process to create the bundles
"$ is not defined" means that at the time when your library tried to do something with jQuery, jQuery itself either wasn't loaded or loaded incorrectly. Make sure that jQuery loads correctly first, and only then can the rest of the code use this library. Usually it is enough to put a jQuery call before all other calls.
Related
Starting with a clean vue project, I was having issues building .vue components from PrimeVue.
These are ready made components and should really not fail to build.
Everytime I try to build, it fails to do so, and seems to fail with the line pointer at the start of the CSS styles.
ERROR in ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css&) 340:0
Module parse failed: Unexpected token (340:0)
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .p-slider {
| position: relative;
| }
# ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& 1:0-119 1:135-138 1:140-256 1:140-256
# ./node_modules/primevue/components/slider/Slider.vue
# ./node_modules/primevue/slider.js
# ./myproject/components/Test.js
# ./myproject/components/App.js
# ./myproject/main.js
This is my webpack config file:
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'development',
entry: 'main.js',
output: {
filename: 'main.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
What is causing this error, as I am importing the components correctly as stated by the PrimeVue documentation.
Setting a rule in the webpack config to send the .vue files for processing to vue-loader is not enough.
You need to specify how to handle .css files too, and this then gets applied to tags in a .vue file as well. Without this rule, it will not know what to do with the <style> blocks, even if you dont plan on using the .css file part of this.
Update the rules section of the webpack.config.js with the following:
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
Also make sure that vue-style-loader and css-loader are installed in package.json.
More information can be found at the manual installation section of the vue-loader documentation, specifically the code example under 'A more complete example webpack config will look like this.'
I would highly recommend to cache the .vue files because they will slow down your build time in big projects.
// snippet from https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript-vue/index.js
const {VueLoaderPlugin} = require('vue-loader');
const webpack = require('webpack');
const path = require('path');
const ROOT_PATH = process.cwd();
const CACHE_PATH = path.join(ROOT_PATH, 'tmp/cache');
const VUE_VERSION = require('vue/package.json').version;
const VUE_LOADER_VERSION = require('vue-loader/package.json').version;
const dev = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
cacheDirectory: path.join(CACHE_PATH, 'vue-loader'),
cacheIdentifier: [
process.env.NODE_ENV || 'development',
webpack.version,
VUE_VERSION,
VUE_LOADER_VERSION,
].join('|'),
},
}
]
},
plugins: [
new VueLoaderPlugin(),
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['.js', '.vue', '.json'],
},
};
I'm using Vue cli3, and want to ignore moment.js plugin with webpack. This is the rule, but on vue.confing.js it gives an error no matter how I change it.
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
You appear to be trying to use the deprecated constructor. Try this instead and don't forget to import webpack into the script...
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/
})
]
}
}
If you want to remove all of moment and not just the locales as the OP seemed to want, here is the required configuration:
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /moment$/
}),
]
}
};
I'm working on a Vue.js project which is running Webpack in local development & builds static files for deployment.
There is a variable apiDomain which needs to change from:
http://localhost.api/ - in local development
to
https://api.example.com/ - in the static build files
I've been trying to get my head around environmental variables but I'm not sure how they work in Webpack vs Vue.js.
What is the correct way to setup a Vue.js variable so it's different between local development & the static build files?
You can adapt this idea for your needs:
import axios from "axios";
const env = process.env.NODE_ENV || "development";
console.log(`we are on [${env}] environment`);
const addr = {
production: "https://rosetta-beer-store.io",
development: "http://127.0.0.1:3000",
};
const api = axios.create({
headers: {"x-api-key": "my-api-key", "x-secret-key": ""},
baseURL: addr[env],
});
export const beerservice = {
list: params => api.get("/beer/list", {params}),
find: id => api.get(`/beer/${id}`),
};
export const mediaservice = {
url: id => (id ? `${addr[env]}/media/${id}` : `${addr[env]}/icon.svg`),
};
By using the process.env.NODE_ENV (available on development and build time) you can not only to set the correct profile for the app services endpoints but also manage any tweak you need on your build scripts:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");
module.exports = {
mode: process.env.NODE_ENV || "development",
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.html$/,
loader: "html-loader"
},
{
test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
entry: "./src/main.jsx",
output: {
filename: "build.js",
path: path.resolve(__dirname, "dist")
},
devtool:
process.env.NODE_ENV == "development" ? "inline-source-map" : undefined,
devServer: {
contentBase: "./dist",
hot: true
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new HtmlWebpackPlugin({
template: "./index.html"
}),
new webpack.HotModuleReplacementPlugin()
]
};
You can see more examples on this github project, but the general idea is to take advantage of node at the build time
I'm creating a simple build from webpack, using typescript, jade, and stylus. When the final index.html file is spit out, however, it seems to think the js files are just the index.html file and not the actual js files bundled up by webpack and dynamically inserted at the bottom of the html body.
My project directory structure looks like this:
- dist (compiled/transpiled files)
- server
- dependencies
- index.js
- app.js
- app.[hash].js
- polyfills.[hash].js
- node_modules
- src
- server
- dependencies
- index.ts
- app.ts
- client (ng2 ts files)
- index.jade
This is my webpack build:
'use strict';
const webpack = require('webpack');
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
const rootDir = __dirname;
/**
* Resolve paths so that we don't have to use relative paths when importing dependencies.
* Very helpful when scaling an application and changing the location of a file that my require another file
* in the same directory as the one it used to be in
*/
const pathResolves = [path.resolve(rootDir, 'src'), path.resolve(rootDir, 'node_modules')];
console.log('path', path.resolve(rootDir, 'src/server'));
module.exports = {
entry: {
'app': path.resolve(rootDir, 'src/client/main.ts'),
'polyfills': [
'core-js/es6',
'core-js/es7/reflect',
'zone.js/dist/zone'
]
},
output: {
path: path.resolve(rootDir, 'dist'),
filename: '[name].[hash].js'
},
module: {
rules: [
{
test: /\.component.ts$/,
use: [
{
loader: 'angular2-template-loader'
},
{
loader: 'ts-loader',
options: {
configFileName: path.resolve(rootDir, 'tsconfig.client.json')
}
}],
include: [path.resolve(rootDir, 'src/client')]
},
{
test: /\.ts$/,
use: [
{
loader: 'ts-loader',
options: {
configFileName: path.resolve(rootDir, 'tsconfig.client.json')
}
}
],
exclude: /\.component.ts$/
},
{
test: /\.jade$/,
use: ['pug-ng-html-loader']
},
{
test: /\.styl$/,
use: [
{ loader: 'raw-loader' },
{ loader: 'stylus-loader' }
]
}
]
},
resolve: {
extensions: ['.js', '.ts', '.jade', '.styl'],
modules: pathResolves
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'polyfills'
}),
new HTMLWebpackPlugin({
template: path.resolve(rootDir, 'dist/index.html')
}),
/**
* Define any environment variables for client
*/
new webpack.DefinePlugin({
APP_ENV: JSON.stringify(process.env.APP_ENVIRONMENT || 'development')
}),
/**
* This plugin is required because webpack 2.0 has some issues compiling angular 2.
* The angular CLI team implemented this quick regexp fix to get around compilation errors
*/
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
'./'
)
]
};
And finally, this is the src/server/app.ts file that serves up index.html:
import * as express from 'express';
import * as fs from 'fs';
import * as morgan from 'morgan';
import {
Config
}
from './dependencies/config';
export
function app(Container) {
const app = express();
const config: Config = Container.get(Config);
if (config.log.dev) {
app.use(morgan('combined'));
}
app.get('/', (req: express.Request, res: express.Response) => {
const indexPath: string = `dist/index.html`;
const encodeType: string = `utf-8`;
const html = fs.readFile(indexPath, encodeType, (err: Error, result: string) => {
if (err) {
return res.status(500).json(err);
}
return res.send(result);
});
});
return app;
}
The browser console shows the following 404 error messages (they're red in the browser console) when i go to localhost:3000:
GET http://localhost:3000/polyfills.9dcbd04127bb957ccf5e.js
GET http://localhost:3000/app.9dcbd04127bb957ccf5e.js
I know it's supposed to be getting the js files from dist/[file].[hash].js, but can't seem to make it work with webpack. Also, I should note that I set NODE_PATH to ./ in my gulp nodemon config. Any ideas why this isn't working?
Figured it out on my own. Forgot to add app.use(express.static('dist')) middleware to the app.ts file.
I have a simple configuration with webpack-dev-middleware and webpack-hot-middleware that uses Hot reload (HMR) with react.
Everything is working fine except that every change i made to the code it takes up 2 3-4 seconds !!! till I see it in the browser.
Am I doing something wrong ? it's supposed to be like this ?
My code is rather big and my bundle minified get to 841kb (200kb gzipped) is this the reason ? the more the codebase is bigger the bundle creation in slower?
Express Server:
var webpack = require('webpack');
var webpackConfig = require('./webpack.hot.config');
var compiler = webpack(webpackConfig);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath,
watchOptions: {
poll: true
}
}));
app.use(require("webpack-hot-middleware")(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}));
webpack.hot.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: __dirname,
entry: [
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
'./src/js/index'
],
module: {
loaders: [{
test: /\.jsx?$/,
include: path.join(__dirname, 'src/js'),
//exclude: /node_modules/,
loader: 'react-hot!babel'
},
{
// Test expects a RegExp! Note the slashes!
test: /\.css$/,
loaders: ['style', 'css'],
// Include accepts either a path or an array of paths.
include: path.join(__dirname, 'src/css')
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: __dirname + '/public',
publicPath: '/',
filename: 'js/app.js'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
And this is what i get in the console when i changed something in the code:
[HMR] App is up to date.
app.js:73223 [HMR] bundle rebuilding
app.js:73226 [HMR] bundle rebuilt in 335ms
app.js:73289 [HMR] Checking for updates on the server...
app.js:73362 [HMR] Updated modules:
app.js:73364 [HMR] - ./src/js/components/header.jsx
app.js:73369 [HMR] App is up to date.
Pro Tip: Change your mode in webpack.config.js to development. It defaults to production if you leave this property out, which means it does slow production stuff and makes your hot reloading suck.
module.exports = {
mode: 'development'
};
Consider switching polling to false in your middleware. I've found that polling can be CPU-intensive.
In you webpack config, you might also want to try adding devtool: false to avoid creating a source map.
You should enable caching:
...
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
cache: true
};