我的 webpack.prod.config 正确构建资产时遇到问题,或者我的 JS Babel 配置可能存在问题。
我可以让它与内联我的 CSS 的开发版本一起工作,但是当我尝试将它组合到一个 CSS 文件中进行生产时它不起作用。无论发生什么,它都可以在 Dev 中通过 import './filename.css' 在每个相应组件中直接注入 CSS。它也可能是 JS,但无论哪种方式,当我为 prod 构建时,CSS 都不能正常工作,JS 也不能正常工作。不显示所有 React JS 组件和其他 JS,仅显示来自 CDN 导入的静态 HTML 和 CSS 样式。当我单击 Webpack 注入的脚本标签中的 URL 时,它们只会将我引导到同一页面,而不是我觉得奇怪的 JS 或 CSS 源。JS 和 CSS 在 Build > Static > JS + CSS 输出中看起来是正确的。有时我
要么是那个,要么是我的 JS 坏了,没有正确构建页面。不在我的生产版本中(与部署到 Heroku 时相同的版本)。我从一个 create-react-app(已退出)开始,添加了 Express、preCSS(用于 SASS 之类的预处理)、react-bootstrap 和其他一些东西。
这个项目有点乱,因为它是我作为新 Web 开发人员从使用静态 HTML+CSS 过渡到使用 React、JS 和 Bootstrap 的学习工具(当我们将事物一起转换为纯反应)。它以前构建没有问题,但自从我开始使用 postCSS + preCSS 时,它不再工作了。
这是我正在使用的一些主要包/库。- jQuery(CDN 脚本标签) - BS3(CDN 脚本标签,.js,.css) - React-Bootstrap - React-Overlays - Babel - postCSS - preCSS - ExtractTextPlugin
预先感谢您的帮助。
我在控制台中遇到 HTML + 错误
[![正在生成 HTML][1]][1] [![控制台错误][2]][2]
Webpack.config.prod.js
var path = require('path');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var url = require('url');
var paths = require('./paths');
var homepagePath = require(paths.appPackageJson).homepage;
var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
if (!publicPath.endsWith('/')) {
// Prevents incorrect paths in file-loader
publicPath += '/';
}
module.exports = {
bail: true,
devtool: 'source-map',
entry: [
require.resolve('./polyfills'),
path.join(paths.appSrc, 'index')
],
output: {
path: paths.appBuild,
filename: 'static/js/[name].[chunkhash:8].js',
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
publicPath: publicPath
},
resolve: {
extensions: ['', '.js', '.json']
},
resolveLoader: {
root: paths.ownNodeModules,
moduleTemplates: ['*-loader']
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'eslint',
include: paths.appSrc
}
],
loaders: [
{
test: /\.js$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.prod')
},
{
test: /\.css$/,
include: [paths.appSrc, paths.appNodeModules],
// Disable autoprefixer in css-loader itself:
// https://github.com/webpack/css-loader/issues/281
// We already have it thanks to postcss.
loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss!sass')
},
{
test: /\.json$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'json'
},
{
test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'file',
query: {
// name: 'static/media/[name].[hash:8].[ext]'
name: 'static/media/[name].[ext]'
}
},
{
test: /\.(mp4|webm)(\?.*)?$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'url',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
}
]
},
eslint: {
// TODO: consider separate config for production,
// e.g. to enable no-console and no-debugger only in prod.
configFile: path.join(__dirname, 'eslint.js'),
useEslintrc: false
},
postcss: function() {
return [precss, autoprefixer];
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
favicon: paths.appFavicon,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
}),
new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: false
},
mangle: {
screw_ie8: true
},
output: {
comments: false,
screw_ie8: true
}
}),
new ExtractTextPlugin('static/css/[name].[contenthash:8].css')
]
};
构建.js
process.env.NODE_ENV = 'production';
var chalk = require('chalk');
var fs = require('fs');
var path = require('path');
var filesize = require('filesize');
var gzipSize = require('gzip-size').sync;
var rimrafSync = require('rimraf').sync;
var webpack = require('webpack');
var config = require('../config/webpack.config.prod');
var paths = require('../config/paths');
var express = require('express');
var app = express();
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
rimrafSync(paths.appBuild + '/*');
console.log('Creating an optimized production build...');
webpack(config).run(function(err, stats) {
if (err) {
console.error('Failed to create a production build. Reason:');
console.error(err.message || err);
process.exit(1);
}
console.log(chalk.green('Compiled successfully.'));
console.log();
console.log('File sizes after gzip:');
console.log();
var assets = stats.toJson().assets
.filter(asset => /\.(js|css)$/.test(asset.name))
.map(asset => {
var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
var size = gzipSize(fileContents);
return {
folder: path.join('build', path.dirname(asset.name)),
name: path.basename(asset.name),
size: size,
sizeLabel: filesize(size)
};
});
assets.sort((a, b) => b.size - a.size);
var longestSizeLabelLength = Math.max.apply(null,
assets.map(a => a.sizeLabel.length)
);
assets.forEach(asset => {
var sizeLabel = asset.sizeLabel;
if (sizeLabel.length < longestSizeLabelLength) {
var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLabel.length);
sizeLabel += rightPadding;
}
console.log(
' ' + chalk.green(sizeLabel) +
' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
);
});
console.log();
if (process.env.NODE_ENV === 'production') {
// Serve the static HTML file from paths.appBuild directory
app.use(express.static(paths.appBuild));
console.log('Static build directory now being served, paths.appBuild: ', paths.appBuild);
// Serve the static HTML file from express
console.log('Adding static path to Express routing...');
app.get('*', function(req, res) {
res.sendFile(paths.appHtml);
console.log('Path serving HTML at paths.appHTML: ', paths.appHtml);
});
// List out which port is being used and listen for changes on the server
app.listen(process.env.PORT || 9004, function(){
console.log('Express server listening on port %d in %s mode', (process.env.PORT || 9004), app.settings.env);
});
}
console.log();
});