How to import jquery in webpack - javascript
I have a problem with jquery when i using it on webpack.
My code:
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
entry: {
vendor: [
'./src/main/webapp/js/vendor/jquery-3.3.1.min.js',
// './src/main/webapp/js/vendor/fs.js',
'./src/main/webapp/js/vendor/google-adsense.js',
'./src/main/webapp/js/vendor/jquery.menu-aim.min.js',
'./src/main/webapp/js/vendor/jquery.touchSwipe.min.js',
],
app: './src/main/assets/js/desktop/app.js',
mobile: './src/main/assets/js/mobile/app.js',
touch: './src/main/assets/js/touch/app.js',
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: require.resolve('jquery'),
loader: 'expose-loader?jQuery!expose-loader?$'
}
],
},
plugins: [
// new CleanWebpackPlugin(['src/main/webapp/assets']),
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
}),
new UglifyJsPlugin({
test: /\.js$/,
sourceMap: process.env.NODE_ENV === "development"
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, './src/main/webapp/js')
}
};
When above code compiles , console throws this error
vendor.js:1 Uncaught ReferenceError: webpackJsonp is not defined
at vendor.js:1
And when i try to use this
externals: {
jquery: 'jQuery'
}
It throws
vendor.js:1 Uncaught ReferenceError: jQuery is not defined
at Object.231 (vendor.js:1)
at o (common.js:1)
at Object.228 (vendor.js:1)
at o (common.js:1)
at window.webpackJsonp (common.js:1)
at vendor.js:1
And i using jquery in my core js file import $ from 'jquery'.
What did i do wrong ? any help ? Thank you.
So there are few themes in your webpack.config.js, some of which conflict. Just going to list them so I can better understand what I think you are trying to achieve.
Theme 1
You have an entry called vendor that is clearly referencing a minified jQuery library you have presumably downloaded and placed in the directory specified.
Theme 2
You also have an expose-loader that is essential exposing the jquery library from its node_modules probably listed in the dependencies of your package.json.
This makes the jquery in the node_modules available as $ and jQuery in the global scope of the page where your bundle is included.
Theme 3
You also have included the ProvidePlugin with configuration for jQuery.
The ProvidePlugin is supposed to inject dependencies into the scope of your module code, meaning you do not need to have import $ from 'jquery' instead $ and jQuery will already be available in all of your modules.
Conclusion
From what I have gathered I think you're trying to bundle jQuery from the static file at ./src/main/webapp/js/vendor/jquery-3.3.1.min.js in a vendor bundle.
You are then trying to expose the libraries in the vendor bundle to the global scope (jQuery).
Then also have your application code able to import jQuery from what is made available by the vendor bundle in the global scope.
Answer
So if that is what you are doing you need to do the following things.
Firstly, check in your package.json files dependencies for jquery. If its there you want to remove it, there's no need for it if you're going to use your jquery-3.3.1.min.js file instead to provide jQuery to your application.
Secondly, change your test of the expose-loader to trigger when it sees your jquery-3.3.1.min.js file in your entries, not resolve it from the jquery dependency from your node_modules.
This regex pattern should do the trick.
{
test: /jquery.+\.js$/,
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
Thirdly, remove the ProvidePlugin if you're going to import the library explicitly with import $ from 'jquery' you do not need it.
Lastly, you need to tell webpack when it sees an import for jquery it can resolve this from window.jQuery in the global scope. You can do this with the externals configuration you already referenced.
externals: {
jquery: 'jQuery'
}
With all these changes you should end up with a webpack.config.js file that looks like this.
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
entry: {
vendor: [
'./src/main/webapp/js/vendor/jquery-3.3.1.min.js',
// './src/main/webapp/js/vendor/fs.js',
'./src/main/webapp/js/vendor/google-adsense.js',
'./src/main/webapp/js/vendor/jquery.menu-aim.min.js',
'./src/main/webapp/js/vendor/jquery.touchSwipe.min.js',
],
app: './src/main/assets/js/desktop/app.js',
mobile: './src/main/assets/js/mobile/app.js',
touch: './src/main/assets/js/touch/app.js',
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /jquery.+\.js$/,
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
],
},
plugins: [
// new CleanWebpackPlugin(['src/main/webapp/assets']),
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
}),
new UglifyJsPlugin({
test: /\.js$/,
sourceMap: process.env.NODE_ENV === "development"
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, './src/main/webapp/js')
},
externals: {
jquery: 'jQuery'
}
};
I hope that does not just give you the answer but enough explanation as to where you were going wrong.
Related
including plain javascript file in webpack 2 configuration
I am trying to load a javascript file that relies on jquery.
import "jquery";
import "../../lib/layerslider/js/greensock.js";
import "../../lib/layerslider/js/layerslider.kreaturamedia.jquery.js";
import "../../lib/layerslider/js/layerslider.transitions.js";
once packaged, I get require is not defined in the included greensock.js part of the generated javascript.
// error on this line (require is not defined)
;eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('!18(t,e){"4I 4J";1b i=t.5r=t.5r||t;1c(!i.3A){1b r,s,n,a,o,l=18(t){1b e,r=t.1t("."),s=i;1d(e=0;r.1f>e;e++)s[r[e]]=s=s[r[e]]||{};1a s},h=l("5p.5o"),u=1e-10,f=18(t){1b e,i=[],r=t.1f;1d(e=0;e!==r;i.24(t[e++]));1a i},p=18(){},19=18(){1b t=az.1A.a1,e=t.2h([]);1a 18(i){1a 1g!=i&&(i 2p 42||"4q"==1k i&&!!i.24&&t.2h(i)===e)}}(),c={},d=18(r,s,n,a){15.59=c[r]?c[r].59:[],c[r]=15,15.5C=1g,15.9D=n;1b o=[];15.6Q=18(h){1d(1b u,f,p,19,m=s.1f,g=m;--m>-1;)(u=c[s[m]]||1j d(s[m],[])).5C?(o[m]=u.5C,g--):h&&u.59.24(15);1c(0===g&&n)1d(f=("5p.5o."+r).1t("."),p=f.4K(),19=l(f.1I("."))[p]=15.5C=n.4i(n,o),a&&(i[p]=19,"18"==1k 3H&&3H.6R?3H((t.8U?t.8U+"/":"")+r.1t(".").4K(),[],18(){1a 19}):r===e&&"37"!=1k 2k&&2k.3n&&(2k.3n=19)),m=0;15.59.1f>m;m++)15.59[m].6Q()},15.6Q(!0)},m=t.3J=18(t,e,i,r){1a 1j d(t,e,i,r)},g=h.8z=18(t,e,i){1a e=e||18(){},m(t,[],18(){1a e},i),e};m.70=i;1b v=[0,0,1,1],x=[],y=g("2A.8A",18(t,e,i,r){15.7b=t,15.7C=i||0,15.7A=r||0,15.7a=e?v.4O(e):v},!0),T=y.8Y={},w=y.8y=18(t,e,i,r){1d(1b s,n,a,o,l=e.1t(","),u=l.1f,f=(i||"5G,6U,5A").1t(",");--u>-1;)1d(n=l[u],s=r?g("2A."+n,1g,!0):h.2A[n]||{},a=f.1f;--a>-1;)o=f[a],T[n+"."+o]=T[o+n]=s[o]=t.2C?t:t[o]||1j t};1d(n=y.1A,n.3T=!1,n.2C=18(t){1c(15.7b)1a 15.7a[0]=t,15.7b.4i(1g,15.7a);1b e=15.7C,i=15.7A,r=1===e?1-t:2===e?t:.5>t?2*t:2*(1-t);1a 1===i?r*=r:2===i?r*=r*r:3===i?r*=r*r*r:4===i&&(r*=r*r*r*r),1===e?1-r:2===e?r:.5>t?r/2:1-r/2},r=["9o","7T","bt","aW","aM,aP"],s=r.1f;--s>-1;)n=r[s]+",ba"+s,w(1j y(1g,1g,1,s),n,"6U",!0),w(1j y(1g,1g,2,s),n,"5G"+(0===s?",aH":"")),w(1j y(1g,1g,3,s),n,"5A");T.bz=h.2A.9o.5G,T.an=h.2A.7T.5A;1b b=g("8q.8p",18(t){15.4n={},15.7R=t||15});n=b.1A,n.9V=18(t,e,i,r,s){s=s||0;1b n,l,h=15.4n[t],u=0;1d(1g==h&&(15.4n[t]=h=[]),l=h.1f;--l>-1;)n=h[l],n.c===e&&n.s===i?h.3c(l,1):0===u&&s>n.2w&&(u=l+1);h.3c(u,0,{c:e,s:i,8Z:r,2w:s}),15!==a||o||a.3g()},n.bm=18(t,e){1b i,r=15.4n[t];1c(r)1d(i=r.1f;--i>-1;)1c(r[i].c===e)1a 2y r.3c(i,1)},n.8v=18(t){1b e,i,r,s=15.4n[t];1c(s)1d(e=s.1f,i=15.7R;--e>-1;)r=s[e],r&&(r.8Z?r.c.2h(r.s||i,{2f:t,2J:i}):r.c.2h(r.s||i))};1b P=t.aJ,O=t.aw,S=84.aN||18(){1a(1j 84).bs()},k=S();1d(r=["6a","bq","9U","o"],s=r.1f;--s>-1&&!P;)P=t[r[s]+"bp"],O=t[r[s]+"bk"]||t[r[s]+"a8"];g("6f",18(t,e){1b i,r,s,n,l,h=15,f=S(),19=e!==!1&&P,c=a5,d=33,m="6h",g=18(t){1b e,a,o=S()-k;o>c&&(f+=o-d),k+=o,h.3q=(k-f)/8l,e=h.3q-l,(!i||e>0||t===!0)&&(h.3C++,l+=e+(e>=n?.aF:n-e),a=!0),t!==!0&&(s=r(g)),a&&h.8v(m)};b.2h(h),h.3q=h.3C=0,h.6h=18(){g(!0)},h.7e=18(t,e){c=t||1/u,d=1i.aD(e,c,0)},h.67=18(){1g!=s&&(19&&O?O(s):ao(s),r=p,s=1g,h===a&&(o=!1))},h.3g=18(){1g!==s?h.67():h.3C>10&&(k=S()-c+5),r=0===i?p:19&&P?P:18(t){1a 6j(t,0|8l*(l-h.3q)+1)},h===a&&(o=!0),g(2)},h.6T=18(t){1a 2n.1f?(i=t,n=1/(i||60),l=15.3q+n,2y h.3g()):i},h.8j=18(t){1a 2n.1f?(h.67(),19=t,2y h.6T(i)):19},h.6T(t),6j(18(){19&&5>h.3C&&h.8j(!1)},aI)}),n=h.6f.1A=1j h.8q.8p,n.2V=h.6f;1b A=g("5N.93",18(t,e){1c(15.1w=e=e||{},15.1D=15.2i=t||0,15.2K=1P(e.4F)||0,15.1C=1,15.2l=e.1X===!0,15.1y=e.1y,15.2F=e.4y===!0,V){o||a.3g();1b i=15.1w.7l?j:V;i.1V(15,i.1p),15.1w.2W&&15.2W(!0)}});a=A.78=1j h.6f,n=A.1A,n.2z=n.1K=n.2u=n.1F=!1,n.1E=n.1p=0,n.1B=-1,n.1h=n.3i=n.3O=n.1r=n.26=1g,n.1F=!1;1b C=18(){o&&S()-k>8E&&a.3g(),6j(C,8E)};C(),n.7P=18(t,e){1a 1g!=t&&15.41(t,e),15.4y(!1).2W(!1)},n.7f=18(t,e){1a 1g!=t&&15.41(t,e),15.2W(!0)},n.aa=18(t,e){1a 1g!=t&&15.41(t,e),15.2W(!1)},n.41=18(t,e){1a 15.2R(1P(t),e!==!1)},n.ah=18(t,e){1a 15.4y(!1).2W(!1).2R(t?-15.2K:0,e!==!1,!0)},n.80=18(t,e){1a 1g!=t&&15.41(t||15.27(),e),15.4y(!0).2W(!1)},n.1G=18(){},n.4H=18(){1a 15.1p=15.1E=0,15.2u=15.1K=!1,15.1B=-1,(15.1K||!15.26)&&15.1H(!0),15},n.5c=18(){1b t,e=15.1r,i=15.1l;1a!e||!15.1K&&!15.1F&&e.5c()&&(t=e.4g())>=i&&i+15.27()/15.1C>t},n.1H=18(t,e){1a o||a.3g(),15.1K=!t,15.2l=15.5c(),e!==!0&&(t&&!15.26?15.1r.1V(15,15.1l-15.2K):!t&&15.26&&15.1r.40(15,!0)),!1},n.2s=18(){1a 15.1H(!1,!1)},n.3R=18(t,e){1a 15.2s(t,e),15},n.3m=18(t){1d(1b e=t?15:15.26;e;)e.2z=!0,e=e.26;1a 15},n.5R=18(t){1d(1b e=t.1f,i=t.4O();--e>-1;)"{5v}"===t[e]&&(i[e]=15);1a i},n.4j=18(t){1b e=15.1w;e[t].4i(e[t+"8h"]||e.5s||15,e[t+"8I"]||x)},n.ab=18(t,e,i,r){1c("bw"===(t||"").1u(0,2)){1b s=15.1w;1c(1===2n.1f)1a s[t];1g==e?4d s[t]:(s[t]=e,s[t+"8I"]=19(i)&&-1!==i.1I("").1m("{5v}")?15.5R(i):i,s[t+"8h"]=r),"4B"===t&&(15.3O=e)}1a 15},n.4F=18(t){1a 2n.1f?(15.1r.2r&&15.8M(15.1l+t-15.2K),15.2K=t,15):15.2K},n.2B=18(t){1a 2n.1f?(15.1D=15.2i=t,15.3m(!0),15.1r.2r&&15.1p>0&&15.1p<15.1D&&0!==t&&15.2R(15.1E*(t/15.1D),!0),15):(15.2z=!1,15.1D)},n.27=18(t){1a 15.2z=!1,2n.1f?15.2B(t):15.2i},n.3q=18(t,e){1a 2n.1f?(15.2z&&15.27(),15.2R(t>15.1D?15.1D:t,e)):15.1p},n.2R=18(t,e,i){1c(o||a.3g(),!2n.1f)1a 15.1E;1c(15.1r){1c(0>t&&!i&&(t+=15.27()),15.1r.2r){15.2z&&15.27();1b r=15.2i,s=15.1r;1c(t>r&&!i&&(t=r),15.1l=(15.1F?15.5g:s.1p)-(15.2F?r-t:t)/15.1C,s.2z||15.3m(!1),s.1r)1d(;s.1r;)s.1r.1p!==(s.1l+s.1E)/s.1C&&s.2R(s.1E,!0),s=s.1r}15.1K&&15.1H(!0,!1),
The libraries above depend on jQuery being defined globally.
Here is an extract of webpack.config.js
const globule = require("globule");
const path = require("path");
const webpack = require("webpack");
const extractTextPlugin = require("extract-text-webpack-plugin");
const configuration = {
context: __dirname,
entry: {
application: [
"../admin/app.ts"
],
vendor: [
"bootstrap",
"bootstrap-select",
"jquery",
"jquery-validation",
"jquery-validation-unobtrusive",
"angular",
"moment",
"ramda"]
},
output: {
path: path.join(__dirname, "../"),
filename: "[name].js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor.js"
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.jquery": "jquery",
Promise: "bluebird",
Bloodhound: "typeahead"
}),
new extractTextPlugin({
filename: "../../css/[name].css",
disable: false,
allChunks: true
})
],
module: {
rules: [
{
test: /^((?!\.spec\.ts).)*.ts$/,
use: "ts-loader",
exclude: /(node_modules)/
}
]
}
};
module.exports = configuration;
Edit
I have also tried the babel loader,
{
test: /\.js$/,
exclude: /node_modules/,
use: [{ loader: "babel-loader" }]
},
Same error, require not defined.
You can solve this issue by preparsing your javascript with a loader like babel. https://github.com/babel/babel-loader Use es 2015 and use the setting modules: false. See https://babeljs.io/docs/plugins/preset-es2015/ If you need a more advanced preset than 2015, this setting also works withthe latest preset, but is configured slightly different
Webpack with requirejs/AMD
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;
Trying to Bundle CSS with ExtractTextPlugin
I'm trying to bundle my CSS into one file with Webpack. I've already got it working for my scripts.but I get an error with my CSS:
Module not found: Error: Can't resolve 'circle.css' in 'C:\Projects\tag-validator-front2\src\css'.
Here's my Webpack config:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: ["./src/ts/main.js","./src/css/css.js"],
module: {
loaders: [
{
test: /\.jsx?$/,
loader: "babel-loader"
},
{
test: /\.css/,
loader: ExtractTextPlugin.extract("css")
}
]
},
plugins: [
new ExtractTextPlugin("styles.css")
],
output: {
filename: "public/bundle.js"
}
}
main.js is for my scripts and is working, but css.js isn't. Here's css.js:
"use strict";
import circleStyles from 'circle.css';
I'm only importing one right now until I get it working, but all of my CSS will be in that directory and most in sub folders.
Try to use relative import path: import './circle.css';
Automatically loading externals with Webpack
I've done some searching but was wondering if there's an elegant solution here. When building a Webpack app, it's common to have dependencies that don't need to be compiled/bundled, like jQuery, React, ReactDOM, Angular, or Bootstrap, to name a few. You can list these in your Webpack config file in an externals object, but externals just assumes that these libraries will be available as namespaced globals at runtime.
This means that for each entry in your externals hash, you also need to toss in a script tag in your HTML. This makes sense if you're referencing an external CDN, but I'm thinking this could be automated if all you want to do is copy some dist file from a library in node_modules.
I've been looking for examples of how to do this but I haven't seen any yet. I messed with external-loader but I haven't had any luck integrating it (the documentation doesn't seem to provide a complete example).
Essentially, this would need to happen:
Libraries that shouldn't be bundled should be added to resolve.alias, e.g. {"react": "react/dist/react.js"}
A loader copies the dist files to the public directory (maybe this could just be done with file-loader?)
An HTML loader or maybe plugin inserts the script tags before the bundle.js script tag
If something like this doesn't exist, I might look into trying to make one; I'm just posting this here to see if anyone might know of a pre-baked solution, as it seems like it'd be a common problem for building web apps and I figured I'm probably missing something.
var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
var WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
entry: {
'index-ref': './app/index-ref.ts',
'vendor': './app/vendor.ts',
'app': './app/main.ts',
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('app'),
loader: 'raw'
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'index-ref']
}),
new HtmlWebpackPlugin({
filename: '../index.html',
template: 'template' + '/default.html',
lib: ['jQuery'],
chunks: ['entry-name']
}),
new HtmlWebpackExternalsPlugin([
// Using a CDN for a JS library
{
name: 'jquery',
var: 'jQuery',
url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js'
}
],
{
basedir: 'node_modules',
dest: 'lib'
}),
new WebpackNotifierPlugin()
]
};
Am I missing anything here?
I didn't find a pre-existing solution, so I wrote a plugin to supplement the HtmlWebpackPlugin. It takes an array of externals and appends script/link tags to the HTML file, generates the externals hash, and can use CDNs or local files. https://github.com/mmiller42/html-webpack-externals-plugin
If you don't want to add extra package bloat then HtmlWebpackPlugin has templating features, so you could do something like this:
//template.html
<html>
<head>
<%= htmlWebpackPlugin.options.externals %>
</head>
...
</html>
and then something like this in your webpack config:
//webpack.config.js
const EXTERNALS = [
{
name: 'react',
globalVarName: 'React',
src: 'https://cdn.example.com/react#18',
},
...
]
module.exports = {
...,
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'template.html',
externals: EXTERNALS.reduce(
(scripts, external) => (
`${scripts}<script src="${external.src}"></script>`
), ''
)
})
],
externals: EXTERNALS.reduce(
(res, external) => ({
...res,
[external.name]: external.globalVarName,
}), {}
),
}
(You can obviously add any environment customisations/finer details/etc. you want in the webpack config file.)
EDIT:
For some extra panache you could also get the current package versions from your node_modules rather than hard-coding them into the webpack file:
const fs = require('fs')
function getPackageVersion(packageName) {
const pkgPath = `node_modules/${packageName}`
const pkg = JSON.parse(fs.readFileSync(`${pkgPath}/package.json`, 'utf8'))
return pkg['version']
}
Webpack error when importing CSS vendor library into index.js
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'] })
];
},
}