gpt4 book ai didi

javascript - HtmlWebpackPlugin 不包含 vendor.js

转载 作者:搜寻专家 更新时间:2023-10-31 23:23:21 24 4
gpt4 key购买 nike

我正在努力提高我们网站的加载速度。所以我一直在忙于我们的 webpack.config。

经过多次修改后,我现在可以正确分离和散列模块。我还使用 HtmlWebpackPlugin 从模板中自动生成 index.html。

但我也遇到了一些其他问题。

  1. vendor.js 不会自动添加到模板中。仅自动添加 chunk-manifest.json 和 index.[hash].js。如果我尝试像那样直接加载,我会得到一个

Uncaught ReferenceError: webpackJsonp is not defined

  1. 手动添加 vendor.js 后出现以下错误:

Uncaught ReferenceError: regeneratorRuntime is not defined

这是 webpack.config:

const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

/* Shared Dev & Production */

const config = {
context: path.resolve(__dirname, 'src'),

entry: {
index: './index.js',
vendor: ['react', 'react-dom', 'react-router', 'react-redux', 'history', 'react-router-dom', 'redux', 'react-router-redux', 'redux-form', 'lodash'],
},

module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
exclude: /\/favicon.ico$/,
use: [
{
loader: 'file-loader',
query: {
name: '[path][name][hash].[ext]',
publicPath: '/'
}
}
]
},
{
test: /\.css$/,
include: path.join(__dirname, 'src/style'),
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(ico)(\?.*)?$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
options: { name: '[name].[ext]' },
},
},
{
test: /\.xml/,
use: {
loader: 'file-loader',
options: { name: '[name].[ext]' },
},
},
],
},

output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
publicPath: '/',
},

resolve: {
extensions: ['.js'],
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},

plugins: [
// New moment.js optimization
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),

new webpack.optimize.CommonsChunkPlugin({
names: ['vendor'],
filename: '[name].js',
minChunks: Infinity
}),

new webpack.optimize.ModuleConcatenationPlugin(),

new HtmlWebpackPlugin({
appMountId: 'app-root',
inlineManifestWebpackName: 'webpackManifest',
template: 'templateIndex.html',
title: 'Our Site',
}),
],

devServer: {
historyApiFallback: true,
},
};

//if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
config.plugins = [
...config.plugins,
new BundleAnalyzerPlugin({analyzerMode: 'static'}),
];
//}

//if (process.env.NODE_ENV === 'production') {
config.output.filename = '[name].[chunkhash].js';
config.plugins = [
...config.plugins,
new webpack.HashedModuleIdsPlugin(),
new WebpackChunkHash(),
new ChunkManifestPlugin({
filename: 'chunk-manifest.json',
manifestVariable: 'webpackManifest',
inlineManifest: true,
}),
];
//}

module.exports = config;

此时我不确定 webpack.config 有什么问题。

如何让 vendor.js 自动添加?

这是模板:

<!doctype html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title itemprop="name">Our Site</title>

<base href="/">

<link rel="apple-touch-icon" sizes="57x57" href="/images/favicon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon-180x180.png">
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/images/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">

<link type="image/png" href="/images/favicon.png" rel="icon">
<link rel="icon" href="/images/favicon.ico" />
<link rel="shortcut icon" href="/images/favicon.png" />

<link rel="manifest" href="/manifest.webmanifest">

<noscript>Your browser does not support JavaScript!</noscript>
</head>
<body>
<div id="app"></div>
</body>
</html>

这是 .babelrc(我认为 regeneratorRuntime 与它有关,只是需要弄清楚如何)

{
"presets": [
[
"env",
{ "modules": false }
],
"react",
"stage-0",
"stage-2"
],
"plugins": [ "syntax-dynamic-import", "transform-react-jsx", "transform-decorators-legacy" ]
}

根据我在网上阅读的内容,再生器错误是由于包装冲突造成的。但我看不出这是从哪里来的。

最佳答案

根据我的经验:

未捕获的 ReferenceError:未定义 webpackJsonp

通常是缺少由 CommonsChunkPlugin 提取的 Webpack 代码的结果。您可能还需要验证此文件是否已正确注入(inject)。

解决方案

我能够通过删除 ChunkManifestPlugin 使它正常工作。它和 CommonsChunkPlugin 之间似乎存在冲突。我自己过去没有经历过的事情,但请查看我在下面所做的事情,它可以解决问题:

注意:您还需要包含 babel-polyfill 以使 regenerator-runtime 在浏览器中运行。

首先:

通天塔 6

npm install --save babel-polyfill

通天塔 7

npm install --save @babel/polyfill

然后:

差异:

8a9,11
> // To handle the regeneratorRuntime exception
> require('babel-polyfill'); // or @babel/polyfill if Babel 7
>
15c18,22
< index: './index.js',
---
> index: [
> // To handle the regeneratorRuntime exception
> 'babel-polyfill', // or @babel/polyfill if Babel 7
> './index.js'
> ],
82d88
< filename: '[name].js',
114c120
< new ChunkManifestPlugin({
---
> /*new ChunkManifestPlugin({
118c124
< }),
---
> }),*/

完整的 webpack.config.js

const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// To handle the regeneratorRuntime exception
require('babel-polyfill'); // or @babel/polyfill if Babel 7

/* Shared Dev & Production */

const config = {
context: path.resolve(__dirname, 'src'),

entry: {
index: [
// To handle the regeneratorRuntime exception
'babel-polyfill', // or @babel/polyfill if Babel 7
'./index.js'
],
vendor: ['react', 'react-dom', 'react-router', 'react-redux', 'history', 'react-router-dom', 'redux', 'react-router-redux', 'redux-form', 'lodash'],
},

module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
exclude: /\/favicon.ico$/,
use: [
{
loader: 'file-loader',
query: {
name: '[path][name][hash].[ext]',
publicPath: '/'
}
}
]
},
{
test: /\.css$/,
include: path.join(__dirname, 'src/style'),
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(ico)(\?.*)?$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
options: {name: '[name].[ext]'},
},
},
{
test: /\.xml/,
use: {
loader: 'file-loader',
options: {name: '[name].[ext]'},
},
},
],
},

output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
publicPath: '/',
},

resolve: {
extensions: ['.js'],
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},

plugins: [
// New moment.js optimization
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),

new webpack.optimize.CommonsChunkPlugin({
names: ['vendor'],
minChunks: Infinity
}),

new webpack.optimize.ModuleConcatenationPlugin(),

new HtmlWebpackPlugin({
appMountId: 'app-root',
inlineManifestWebpackName: 'webpackManifest',
template: 'templateIndex.html',
title: 'Our Site',
}),
],

devServer: {
historyApiFallback: true,
},
};

//if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
config.plugins = [
...config.plugins,
new BundleAnalyzerPlugin({analyzerMode: 'static'}),
];
//}

//if (process.env.NODE_ENV === 'production') {
config.output.filename = '[name].[chunkhash].js';
config.plugins = [
...config.plugins,
new webpack.HashedModuleIdsPlugin(),
new WebpackChunkHash(),
/*new ChunkManifestPlugin({
filename: 'chunk-manifest.json',
manifestVariable: 'webpackManifest',
inlineManifest: true,
}),*/
];
//}

module.exports = config;

关于javascript - HtmlWebpackPlugin 不包含 vendor.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48156146/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com