我最近在我的Webpack配置中设置了长期缓存,参考了这个链接和这个链接。
现在我有一个小问题:每次我更改一些代码并重新构建时,当Webpack尝试从某个模块导入函数并执行它时,都会出现相同的错误:
更奇怪的是,当我按下SHIFT+F5时,问题就消失了。
以下是我的Webpack配置:
我会将
现在我有一个小问题:每次我更改一些代码并重新构建时,当Webpack尝试从某个模块导入函数并执行它时,都会出现相同的错误:
Object(...) is not a function
。更奇怪的是,当我按下SHIFT+F5时,问题就消失了。
以下是我的Webpack配置:
const path = require('path');
/* eslint-disable import/no-extraneous-dependencies */
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const NameAllModulesPlugin = require('name-all-modules-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
/* eslint-enable import/no-extraneous-dependencies */
const configFileName = `./.env.${process.env.STAGE}.json`;
let envConfig;
try {
// eslint-disable-next-line import/no-dynamic-require, global-require
envConfig = require(configFileName);
} catch (e) {
envConfig = {};
}
const babelSettings = {
extends: path.join(__dirname, '.babelrc'),
};
const excludes = [
/node_modules(?![/\\]@shared[/\\])/,
];
const roots = [
path.join(__dirname, '../../node_modules'),
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'client'),
path.join(__dirname, 'public'),
path.join(__dirname, 'node_modules/@shared/public'),
];
const getCommonCSSLoaders = enableCSSModules => [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: enableCSSModules,
importLoaders: 1,
localIdentName: '[local]_[hash:base64:3]',
minimize: true,
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
require('postcss-flexbugs-fixes'),
autoprefixer({
env: 'production',
flexbox: 'no-2009',
}),
],
},
},
];
const rules = [
{
test: /\.js$/,
exclude: excludes,
loader: 'babel-loader',
options: babelSettings,
},
{
test: /\.css$/,
exclude: excludes,
use: [
...getCommonCSSLoaders(true),
],
},
{
test: /\.css$/,
include: excludes,
use: [
...getCommonCSSLoaders(false),
],
},
{
test: /\.scss$/,
exclude: excludes,
use: [
...getCommonCSSLoaders(true),
{
loader: 'sass-loader',
},
],
},
{
test: /.*\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
name: 'images/[name].[hash].[ext]',
limit: 20000,
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
quality: 80,
},
pngquant: {
quality: '80-90',
speed: 1,
},
},
},
],
},
];
const plugins = [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
comparisons: false,
},
output: {
comments: false,
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NamedChunksPlugin((chunk) => {
if (chunk.name) {
return chunk.name;
}
return chunk.modules.map(m => path.relative(m.context, m.request)).join('_');
}),
new NameAllModulesPlugin(),
new ManifestPlugin({
fileName: 'client-manifest.json',
publicPath: '/dist/',
}),
new webpack.NormalModuleReplacementPlugin(/\/components\/Bundles/, './components/AsyncBundles'),
new webpack.NormalModuleReplacementPlugin(/\/Bundles/, './AsyncBundles'),
new webpack.optimize.CommonsChunkPlugin({
name: 'client',
async: 'common',
children: true,
minChunks: (module, count) => {
if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
return false;
}
return count >= 3 && module.context && !module.context.includes('node_modules');
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'client',
children: true,
minChunks: module => module.context && module.context.includes('node_modules'),
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
minChunks: module => module.context && module.context.includes('node_modules'),
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
STAGE: JSON.stringify(process.env.STAGE),
},
'process.customEnv': {
api: {
URL: envConfig.api_url,
URLV2: envConfig.api_url_v2,
},
job_board: {
URL: envConfig.job_board_url,
},
vendors: {
AMPLITUDE_KEY: envConfig.amplitude_key,
STRIPE_PUBLISHABLE_KEY: envConfig.stripe_publishable_key,
OPTIMIZELY_DATAFILE_URL: envConfig.optimizely_datafile_url,
},
},
}),
];
const config = {
bail: true,
resolve: {
modules: roots,
},
resolveLoader: {
modules: roots,
},
entry: {
client: ['./client/src/entry/js/polyfills', './client/src/entry/js/client'],
},
output: {
filename: 'bundles/[name].[chunkhash].bundle.js',
chunkFilename: 'chunks/[name].[chunkhash].chunk.js',
path: path.join(__dirname, 'public/dist'),
publicPath: '/dist/',
},
module: {
rules,
},
plugins,
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};
module.exports = config;
我会将
manifest
、vendors
和client
导入到我的HTML中。
对此有什么见解吗?
谢谢提前。