我正在尝试更新旧的webpack配置文件。该配置是使用webpack-blocks
v0.4创建的,该版本依赖于webpack2。
升级到webpack4后,我更改了导入,使其与新库匹配(我现在使用的是webpack@4.3.1和webpack-blocks@2.0.1)
这是更新的文件:
// https://github.com/diegohaz/arc/wiki/Webpack
const splitVendor = require('webpack-blocks-split-vendor')
const happypack = require('webpack-blocks-happypack')
const serverSourceMap = require('webpack-blocks-server-source-map')
const nodeExternals = require('webpack-node-externals')
const AssetsByTypePlugin = require('webpack-assets-by-type-plugin')
const ChildConfigPlugin = require('webpack-child-config-plugin')
const SpawnPlugin = require('webpack-spawn-plugin')
const webpack = require('webpack')
const {
createConfig,
// Feature blocks
babel,
devServer,
// Shorthand setters
addPlugins,
defineConstants,
group,
entryPoint,
env,
setOutput,
sourceMaps,
} = require('webpack-blocks')
const path = require('path')
// console.log(require("webpack-blocks"));
const host = process.env.HOST || 'localhost'
const port = +process.env.PORT + 1 || 3001
const sourceDir = process.env.SOURCE || 'src'
const publicPath = `/${process.env.PUBLIC_PATH || ''}/`.replace('//', '/')
const sourcePath = path.join(process.cwd(), sourceDir)
const outputPath = path.join(process.cwd(), 'dist/public')
const assetsPath = path.join(process.cwd(), 'dist/assets.json')
const clientEntryPath = path.join(sourcePath, 'client.js')
const serverEntryPath = path.join(sourcePath, 'server.js')
const devDomain = `http://${host}:${port}/`
const assets = () => () => ({
module: {
rules: [
{
test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/,
loader: 'url-loader?limit=8000',
},
],
},
})
const resolveModules = modules => () => ({
resolve: {
modules: [].concat(modules, ['node_modules']),
},
})
const base = () =>
group([
setOutput({
filename: '[name].js',
path: outputPath,
publicPath,
}),
defineConstants({
'process.env.NODE_ENV': process.env.NODE_ENV,
'process.env.PUBLIC_PATH': publicPath.replace(/\/$/, ''),
}),
addPlugins([new webpack.ProgressPlugin()]),
happypack([babel()]),
assets(),
resolveModules(sourceDir),
env('development', [
setOutput({
publicPath: devDomain,
}),
]),
])
const server = createConfig([
base(),
entryPoint({ server: serverEntryPath }),
setOutput({
filename: '../[name].js',
libraryTarget: 'commonjs2',
}),
addPlugins([
new webpack.BannerPlugin({
banner: 'global.assets = require("./assets.json");',
raw: true,
}),
]),
() => ({
target: 'node',
externals: [nodeExternals()],
stats: 'errors-only',
}),
env('development', [
serverSourceMap(),
addPlugins([new SpawnPlugin('npm', ['start'])]),
() => ({
watch: true,
}),
]),
])
const client = createConfig([
base(),
entryPoint({ client: clientEntryPath }),
addPlugins([
new AssetsByTypePlugin({ path: assetsPath }),
new ChildConfigPlugin(server),
]),
env('development', [
devServer({
contentBase: 'public',
stats: 'errors-only',
historyApiFallback: { index: publicPath },
headers: { 'Access-Control-Allow-Origin': '*' },
host,
port,
}),
sourceMaps(),
addPlugins([new webpack.NamedModulesPlugin()]),
]),
env('production', [
splitVendor(),
addPlugins([
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
]),
]),
])
module.exports = client
现在不幸的是,这引发了一个错误:
TypeError: updateFunction is not a function
at configSetters.reduce (/home/wolf/Desktop/Work/Job/TheShop/ecommerce-reloaded/node_modules/@webpack-blocks/webpack/node_modules/@webpack-blocks/core/lib/configSetters.js:32:12)
at Array.reduce (<anonymous>)
at invokeConfigSetters (/home/wolf/Desktop/Work/Job/TheShop/ecommerce-reloaded/node_modules/@webpack-blocks/webpack/node_modules/@webpack-blocks/core/lib/configSetters.js:30:24)
我不确定它是来自配置还是依赖版本不匹配。我也尝试过使用webpack-blocks
存储库中的示例,但不幸的是,它还会引发错误(devServer.proxy不是函数)。
还有其他要更改的地方才能迁移吗?我敢肯定,我已按照here
指定的所有步骤进行操作