I am using webpack 4 to bundle application resources.
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"types": ["node"],
"typeRoots": [
"../node_modules/@types"
]
},
"compileOnSave": true,
"exclude": [
"node_modules"
]
}
webpack.config.js:
module.exports = require("./config/webpack.dev.js");
webpack.common.js:
//common webpack configuration
var webpack = require("webpack");
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
var helpers = require("./helpers.js");
module.exports = {
//the entry-point files that define the bundles
entry: {
"polyfills": "./scripts/polyfills.ts",
"vendor": "./scripts/vendor.ts",
"main": "./scripts/main.ts"
},
//resolve file names when they lack extensions
resolve: {
extensions: [".ts", ".js"]
},
target: "node",
//decide how files are loaded
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: "awesome-typescript-loader",
options: {
configFileName: helpers.root("./scripts", "tsconfig.json")
}
}, "angular2-template-loader"
]
},
{
test: /\.html$/,
loader: "html-loader"
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: "file-loader?name=assets/[name].[hash].[ext]"
},
{
test: /\.css$/,
exclude: helpers.root("./scripts", "app"),
loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader?sourceMap" })
},
{
test: /\.css$/,
include: helpers.root("./scripts", "app"),
loader: "raw-loader"
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/\@angular(\\|\/)core(\\|\/)esm5/,
helpers.root("./scripts"), // location of your src
{} // a map of your routes
),
//replaced by optimization.splitChunks for webpack 4
// new webpack.optimize.CommonsChunkPlugin({
// name: ["app", "vendor", "polyfills"]
// }),
new HtmlWebpackPlugin({
template: "./Views/Shared/_Layout.cshtml",
filename: "index.cshtml",
alwaysWriteToDisk: true
}),
new HtmlWebpackHarddiskPlugin({
})
],
optimization: {
splitChunks : {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}
webpack.dev.js:
//development webpack configuration
var webpackMerge = require("webpack-merge");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var commonConfig = require("./webpack.common.js");
var helpers = require("./helpers.js");
module.exports = webpackMerge(commonConfig, {
devtool: "cheap-module-eval-source-map",
output: {
path: helpers.root("Views"),
publicPath: "scripts/",
filename: "[name].js",
chunkFilename: "[id].chunk.js"
},
plugins: [
new ExtractTextPlugin("[name].css")
],
devServer: {
historyApiFallback: true,
stats: "minimal"
}
});
I am using angular5 and i have followed the official quickstart guide to build webpack configuration. Webpack is compiled successfully using 'npm start' command (development configuration) and the index.cshtml injects all 3 files i want: 1. polyfills.js 2. vendor.js 3. main.js
The problem is that i get the following errors when these files are loaded from the browser:
polyfills.ts:2 Uncaught ReferenceError: exports is not defined
at polyfills.ts:2
(anonymous) @ polyfills.ts:2
vendor.ts:1 Uncaught ReferenceError: exports is not defined
at vendor.ts:1
(anonymous) @ vendor.ts:1
main.js:2 Uncaught ReferenceError: exports is not defined
at main.js:2
(anonymous) @ main.js:2
Can anyone help me what is going wrong with the cofiguration?
Add this to babel config plugins will solved this problem:
["@babel/plugin-transform-modules-commonjs"]
I had what appeared to be a very similar error in my Webpack 4 setup (with Babel 7). Webpack was building the bundle properly but when I was trying to load the file I was getting:
Uncaught ReferenceError: exports is not defined
at eval (util.js:22)
… where util.js
was one of my own libraries.
I googled a lot of solutions that suggested configuring the babel-loader
with modules: false
and / or sourceType: unambiguous
and/or setting libraryTarget
(in the output
) to 'umd') so I tried something like the following:
{test: /\.js$/, use:
{
loader: 'babel-loader',
options:
{
presets: [
['@babel/preset-env', {loose: true, modules: false}],
'@babel/react'
],
sourceType: 'unambiguous'
}
}
}
… in the rules
section of my webpack.config.js
. No permutation of the above advises worked for me.
In the end, it was simply a matter of changing the following (from the end of my own util.js
file), from:
exports.foo = foo;
exports.boo = boo;
… to:
export {foo, boo};
I append my (working) webpack.config.js
and package.json
'use strict';
const path = require('path');
const APPDIR = 'app/';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.resolve(__dirname, APPDIR, 'index.html'),
filename: 'index.html',
inject: 'body'
});
const config = {
context: path.resolve(__dirname, APPDIR),
entry: './main.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{test: /\.js$/, use:
{
loader: 'babel-loader',
options:
{
presets: [
['@babel/preset-env'], '@babel/react'
]
}
}
},{
test: /\.css$/,
use: [
// style-loader
{loader: 'style-loader'},
// css-loader
{loader: 'css-loader',
options: {
modules: true
}
}]
},{
test: /\.(png|jpg|jpeg|gif|woff)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}]
},{
test: /\.README$/,
use: 'null-loader'
}
]
},
plugins: [HTMLWebpackPluginConfig],
node: {
fs: "empty" // This is to account for what appears to be a bug: https://github.com/josephsavona/valuable/issues/9`
}
};
module.exports = config;
{
"name": "cubehelix-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rm -fr build/index.html && rm -fr build/bundle.js && npm run clean-logs",
"build": "webpack --progress --colors",
"build-min": "webpack --config=webpack.min.config.js",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build --port 8090",
"test-build": "mkdir -p lib && babel app --out-dir lib --source-maps",
"test": "npm run test-build && mocha --require source-map-support/register --compilers js:babel-register"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "~7.6.0",
"@babel/core": "~7.6.0",
"@babel/preset-env": "~7.6.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "~7.6.0",
"@babel/runtime": "~7.6.0",
"babel-loader": "^8.0.6",
"chai": "~4.2.0",
"css-loader": "^0.23.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "~3.2.0",
"mocha": "~6.2.0",
"null-loader": "^0.1.1",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "~4.39.3",
"webpack-cli": "^3.3.8",
"webpack-dev-server": "~3.8.0"
},
"dependencies": {
"chai": "~4.2.0",
"classnames": "^2.2.5",
"jquery": "~3.4.1",
"lodash": "~4.17.15",
"prop-types": "^15.7.2",
"react": "~16.9.0",
"react-custom-validators": "*",
"react-dom": "~16.9.0",
"react-timer-mixin": "~0.13.4"
}
}
Here is a possible solution (it's what worked for me with an "exports is not defined" error): https://github.com/webpack/webpack/issues/3974#issuecomment-369260590
A solution for me anyway was change babel-loader config, under plugins, ['transform-runtime', { "polyfill": false }]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With