[英]office-js + outlook-web-addins + Webpack + Production
[英]Webpack 4 unable to built production for web
我正在打破我的头,试图理解为什么这个生产版本不能在浏览器上运行。
所以基本上我有一个可以完美运行的开发配置,但是由于一些奇怪的原因,生产版本一直显示Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
在控制台上。
对此的任何帮助将不胜感激。
这是我的文件夹结构
package.json
"build": "webpack --config=config/webpack.config.js --env production --progress",
"start": "webpack-dev-server --config=config/webpack.config.js --env development --open"
还有webpack.config.js
(我省略了开发人员配置,因为它工作正常)
...
// Paths
getPaths = ({
sourceDir = '../app',
distDir = '../dist',
staticDir = 'static',
images = 'images',
fonts = 'fonts',
scripts = 'scripts',
styles = 'styles'} = {}) => {
const assets = { images, fonts, scripts, styles }
return Object.keys(assets).reduce((obj, assetName) => {
const assetPath = assets[assetName]
obj[assetName] = !staticDir ? assetPath : `${staticDir}/${assetPath}`
return obj
},{
app: path.join(__dirname, sourceDir),
dist: path.join(__dirname, distDir),
staticDir
})
},
paths = getPaths(),
publicPath = '',
// Main module
commonConfig = merge([{
context: paths.app,
resolve: {
unsafeCache: true,
symlinks: false
},
entry: [`${paths.app}/scripts/index.jsx`, `${paths.app}/styles/styles.scss`],
output: { path: paths.dist, publicPath },
plugins: [
new HtmlPlugin(),
]
},
load.Html(),
})
]),
// Build
productionConfig = merge([
{
mode: 'production'
},
load.Scripts({
include: paths.app,
exclude: path.resolve(__dirname, 'node_modules'),
options: {
configFile: path.resolve(__dirname, 'babel.config.js'),
}
}),
load.ExtractCSS({
include: paths.app,
options: {
filename: `${paths.styles}/[name].min.[contenthash:8].css`,
chunkFilename: `${paths.styles}/[id].[contenthash:8].css`,
publicPath: '../'
}
})
]),
// Merge module
module.exports = env => {
process.env.NODE_ENV = env
return merge(commonConfig, env === 'production' ? productionConfig : developmentConfig
)
}
最后是引用的模块webpack.modules.js
exports.Html = () => ({
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
}
})
exports.MinifyCSS = ({ options }) => ({
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: options,
canPrint: true // false for analyzer
})
]
}
})
exports.ExtractCSS = ({ include, exclude, options } = {}) => ({
module: {
rules: [{
test: /\.scss$/,
include,
exclude,
use: [
{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../../' } },
'css-loader',
{ loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')] }},
'fast-sass-loader'
]
}]
},
plugins: [ new MiniCssExtractPlugin(options) ]
})
exports.Scripts = ({ include, exclude, options } = {}) => ({
module: {
rules: [{
test: /\.(js|jsx)$/,
include,
exclude,
use: [{ loader: 'babel-loader', options }]
}]
}
})
运行 npm 后,当我在https://localhost/React/Transcript/dist/
上打开网站时npm run build
,我得到:
Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
感谢评论部分的每个人帮助我找到问题,事实证明我必须从 common config 中删除module: { noParse: /\.min\.js/ }
并添加new HtmlPlugin({ template: './index.html'})
而不是new HtmlPlugin()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.