Я создаю приложение F7, это приложение содержит внешний файл JS, являющийся результатом производственной сборки веб-пакета. Когда я запускаю сборку F7 в качестве среды разработки, все работает идеально, но когда я переключаю ENV в рабочую среду, код выполнения будетошибка возврата:
Uncaught RangeError: Maximum call stack size exceeded
at String.indexOf (<anonymous>)
at n (app.js:1)
at e (app.js:1)
at n (app.js:1)
at e (app.js:1)
at n (app.js:1)
at e (app.js:1)
at n (app.js:1)
at e (app.js:1)
at n (app.js:1)
Код конфигурации веб-пакета:
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
function resolvePath(dir) {
return path.join(__dirname, '..', dir);
}
const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'web';
const isCordova = target === 'cordova';
const isElectronWatch = process.env.ELECTRON_WATCH || false;
module.exports = {
mode: env,
entry: [
'./src/js/app.js',
],
output: {
path: resolvePath(isCordova ? (isElectronWatch ? 'cordova/platforms/electron/www' : 'cordova/www') : 'www'),
filename: 'js/app.js',
publicPath: '',
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json',
},
resolve: {
extensions: ['.js', '.json'],
alias: {
'@': resolvePath('src'),
},
},
devtool: env === 'production' ? 'source-map' : 'eval',
devServer: {
hot: true,
open: true,
compress: true,
contentBase: '/www/',
disableHostCheck: true,
watchOptions: {
poll: 1000,
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
include: [
resolvePath('src'),
resolvePath('node_modules/framework7'),
resolvePath('node_modules/template7'),
resolvePath('node_modules/dom7'),
resolvePath('node_modules/ssr-window'),
],
},
{
test: /\.f7.html$/,
use: [
'babel-loader',
{
loader: 'framework7-component-loader',
options: {
helpersPath: './src/template7-helpers-list.js',
},
},
],
},
{
test: /\.css$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
],
},
{
test: /\.styl(us)?$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'stylus-loader',
],
},
{
test: /\.less$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'less-loader',
],
},
{
test: /\.(sa|sc)ss$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[ext]',
},
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[ext]',
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[ext]',
},
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(env),
'process.env.TARGET': JSON.stringify(target),
}),
...(env === 'production' ? [
// Production only plugins
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
},
sourceMap: true,
parallel: true,
}),
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true,
map: { inline: false },
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
] : [
// Development only plugins
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
]),
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.html',
inject: true,
minify: env === 'production' ? {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: false,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
} : false,
}),
new MiniCssExtractPlugin({
filename: 'css/app.css',
}),
new CopyWebpackPlugin([
{
from: resolvePath('src/static'),
to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
},
]),
],
};
, если я изменю devTool
на eval
в production mode
, сборка и выполнение будут работать успешно, но в webpack doc Я прочитал его только для разработки, а не для производства, так что есть какие-либо предложения, как я могу решить эту проблему?
Кроме того, есть ли проблема, если я создаю производственное приложение, используя eval? какая-либо проблема безопасности или проблема отказа магазина?
Примечания:
webpack -v
3.5.6