Webpack 4无法为Web构建产品
我不知所措,试图了解为什么此生产版本无法在浏览器上正常工作。
因此,基本上,我有一个可以完美运行的开发配置,但是由于某些奇怪的原因Error: Minified React error #200; visit .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 run build
后,当我在https://localhost/React/Transcript/dist/
上打开网站时,我得到:
Error: Minified React error #200; visit .html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
感谢评论部分的所有人帮助我发现问题,原来我不得不从通用配置中删除module: { noParse: /\.min\.js/ }
并添加new HtmlPlugin({ template: './index.html'})
而不是仅添加new HtmlPlugin()
Webpack 4无法为Web构建产品
我不知所措,试图了解为什么此生产版本无法在浏览器上正常工作。
因此,基本上,我有一个可以完美运行的开发配置,但是由于某些奇怪的原因Error: Minified React error #200; visit .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 run build
后,当我在https://localhost/React/Transcript/dist/
上打开网站时,我得到:
Error: Minified React error #200; visit .html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
感谢评论部分的所有人帮助我发现问题,原来我不得不从通用配置中删除module: { noParse: /\.min\.js/ }
并添加new HtmlPlugin({ template: './index.html'})
而不是仅添加new HtmlPlugin()