我正在使用webpack 4捆绑应用程序资源。
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"
}
});
我正在使用angular5,我已经按照官方的快速入门指南来构建webpack配置。Webpack是成功编译使用'npm start'命令(开发配置)和索引。cshtml注入所有3个文件我想要:1.聚合物填料. js 2.供应商. js 3.主要. js
问题是,当从浏览器加载这些文件时,我得到以下错误:
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
有谁能帮我看看这配置出了什么问题吗?
6条答案
按热度按时间wnvonmuf1#
将这个添加到Babel config的插件将解决这个问题:
7rfyedvj2#
我有什么似乎是一个非常类似的错误,在我的Webpack 4设置(与巴别塔7). Webpack是建立包正确,但当我试图加载文件,我得到:
......其中
util.js
是我自己的一个库。我在谷歌上搜索了很多建议用modules: false
和/或sourceType: unambiguous
配置babel-loader
和/或将libraryTarget
(在output
中)设置为'umd'的解决方案,所以我尝试了如下所示的方法:......在我的
webpack.config.js
的rules
部分中。上述建议的任何排列都不对我起作用。最后,它只是简单地将以下内容(从我自己的util.js
文件的结尾)从:...到:
我将我的(工作)
webpack.config.js
和package.json
网页包配置. js
包. json
ws51t4hk3#
下面是一个可能的解决方案(它对我的“导出未定义”错误有效):https://github.com/webpack/webpack/issues/3974#issuecomment-369260590
对我来说,一个解决方案是改变babel-loader的配置,在插件下,['transform-runtime',{“polyfill”:错误}]
dgsult0t4#
不确定这是否会帮助任何人,因为我们有一个非常“特殊”的设置,我们击中了这个问题。
我们所看到的是,带有dist目录的sym链接共享库(通过package. json/ npm中的file:/ reference有效链接)被webpack错误地传递。
我们有“符号链接:false”选项,我们的解决方案是将其添加到相关
module.rules[]
部分中的ignore
部分。我相信这是因为,即使文件在
node_modules
中,并且存在符号链接,解析的路径使忽略模式没有找到它,它们再次被传递(错误)(我们的共享库显示在
project
的兄弟目录node-lib
中)lf5gs5x25#
我也遇到了这个错误。对我来说,问题是我不小心在我的
main.ts
之外有一个main.js
,导致webpack使用那个代替,并且由于某种原因没有发出很多导入的模块。删除main.js
解决了这个问题。niknxzdl6#
以上Webpack配置变更均无法修复,仅源代码变更可以fix: react-native-web with react-app-rewired and react-scripts@5 and webpack@5 cause
Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./node_modules/@flyskywhy/react-native-gcanvas/index.js
,请参阅https://github.com/webpack/webpack/issues/4039#issuecomment-419284940