我们当前的webpack版本存在问题。 webpack-dev-server的初始启动正常，并且webpack构建正常。在热加载时，我们会收到错误消息：
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /component-lib/HOCFields.js: Unterminated regular expression
282 | onChange={this.onChange}
283 | value={this.state.inputValue}
> 284 | {...omit(this.props, ['value','onFocus','onBlur','onChange'])} />
| ^
285 | }
286 | }
287 | };
at raise (/node_modules/@babel/parser/lib/index.js:6344:17)
at readRegexp (/node_modules/@babel/parser/lib/index.js:7053:14)
at readToken_slash (/node_modules/@babel/parser/lib/index.js:6697:12)
at getTokenFromCode (/node_modules/@babel/parser/lib/index.js:6975:14)
at getTokenFromCode (/node_modules/@babel/parser/lib/index.js:3631:18)
at nextToken (/node_modules/@babel/parser/lib/index.js:6542:12)
at next (/node_modules/@babel/parser/lib/index.js:6482:10)
at eat (/node_modules/@babel/parser/lib/index.js:6487:12)
at expect (/node_modules/@babel/parser/lib/index.js:7645:10)
at jsxParseAttribute (/node_modules/@babel/parser/lib/index.js:3463:12)
事实是，它所指向的代码只是在片刻之前转译的！重新启动开发服务器可以修复该错误，我们可以继续进行开发。令人讨厌的是，很难可靠地进行复制，因为这种情况并不总是会发生。因此，这是一个间歇性问题，通过重新启动服务器而消失了。但是，这确实使我们放慢了速度，因为每次出现错误时，都要花费30-40s的时间来重新启动服务器。不是世界末日，而是累加起来。现在不确定是webpack配置问题还是babel配置问题，因为babel-loader抛出了错误，但是在到达那里之前要经历很多webpack基础结构。
这是我们的配置：
webpack.common.config.js：
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const SRC = path.join(__dirname, '/src');
let polyfills = ['es5-shim/es5-shim',
'es5-shim/es5-sham',
'@babel/polyfill',
'whatwg-fetch'];
module.exports = {
entry: {
app_one: [
path.resolve(SRC, './AppOne/AppOne.js'),
],
app_two: [
...polyfills,
path.resolve(SRC, './AppTwo/AppTwo.js)
]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /.*node_modules((?!atvenu).)*$/,
use: {
loader: 'babel-loader',
// NOTE: will load presets from babel.config.js
options: {
cacheDirectory: true
}
}
},
{
test: /\.(gif|pdf|csv|jpe?g|png|svg|eot|ttf|woff)(\?[a-z0-9=&.-]+)?$/,
use: {
loader: 'url-loader',
query: {name: '[name].[hash:16].[ext]'}
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
}
]
},
{ test: /\.scss$/, loader: 'style!css!sass' },
{
test: /\.graphql?$/,
use: [
{
loader: 'webpack-graphql-loader',
options: {
minify: true
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(['build']),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
webpack_environment: {
SERVER1: 'http://localhost:5004',
SERVER2: 'http://localhost:5005'
}
}),
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
optimization: {
//split out common components into two common libraries: common.js and av-c-lib.js
splitChunks: {
cacheGroups: {
clib: {
test: /component-lib/,
name: 'c-lib',
chunks: 'all',
priority: 10
},
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'common',
priority: -20,
chunks: 'all'
}
}
}
},
output: {
filename: '[name].js',
path: path.join(__dirname, './build')
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'node_modules'),'node_modules'], // require to resolve modules in the atvenu-* libs
alias: {
'react-native': 'react-native-web',
}
},
};
webpack.dev.config.js
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
const os = require('os');
const myPort = 3004;
const plugins = [];
if (process.env.SKIP_DASHBOARD) {
console.log('Skipping Webpack Dashboard')
} else {
const DashboardPlugin = require('webpack-dashboard/plugin');
const Dashboard = require('webpack-dashboard');
const dashboard = new Dashboard();
plugins.push(
new DashboardPlugin({
port: myPort,
handler: dashboard.setData
})
)
}
module.exports = merge(common, {
mode: 'development',
devtool: 'cheap-module-source-map',
devServer: {
contentBase: '../build',
public: `0.0.0.0:${myPort}`,
compress: true,
watchContentBase: true,
inline: true,
quiet: true, // important
overlay: true,
port: myPort,
host: '0.0.0.0',
disableHostCheck: true
},
plugins: plugins});
babel.config.js：
module.exports = function (api) {
api.cache(false);
const presets = ["@babel/preset-env", "@babel/preset-react"];
const plugins = ["@babel/plugin-proposal-class-properties"];
return {
presets,
plugins
};
}
文件结构如下：
myMonoRepo
├── RootApp/
│ │ babel.config.js
│ │ webpack.common.config.js
│ │ webpack.dev.config.js
│ │ package.json /* contains component-lib: link:../component-lib reference via symlink */
│ └── AppOne/
│ │ └── AppOne.js
│ └── AppTwo/
│ └── AppTwo.js
├── component-lib/
│ └── package.json
我们通过以下方式运行webpack-dev-server：webpack-dev-server --config ./webpack.config.dev.js以使开发服务器运行。
注意：我们确实使用了安装为符号链接的node_module的组件的本地共享文件夹。这通常是问题开始的地方，但并非总是如此。不确定符号链接是真正的问题还是只是红色鲱鱼。