我遇到了webpack 3.5 +反应+帖子的问题。
配置如下:
const path = require( "path" );
const ExtractTextPlugin = require( "extract-text-webpack-plugin" );
const CopyWebpackPlugin = require( "copy-webpack-plugin" );
const ManifestPlugin = require( "webpack-manifest-plugin" );
const webpack = require( "webpack" );
const env = process.env.MIX_ENV || "dev";
const isProduction = ( env === "prod" );
module.exports = {
entry: {
app: [ "./web/static/css/app.css", "./web/static/js/app.jsx" ],
vendor: [ "react", "react-dom", "highcharts", "moment", "axios", "react-table",
"redux", "react-router", "raven-js" ]
},
output: {
path: path.resolve( __dirname, "priv/static/" ),
filename: "js/[name].js"
},
devtool: "source-map",
resolve: {
extensions: [ ".js", ".jsx", ".css", ".png", ".svg", ".gif", ".jpeg", ".jpg", ".eot", ".ttf", ".woff", ".woff2" ],
modules: [
"web/static",
"node_modules"
]
},
resolveLoader: {
modules: [ "node_modules" ]
},
module: {
rules: [
{
test: /\.(eot|ttf|woff|woff2)$/i,
use: [ {
loader: "file-loader",
options: {
outputPath: "../static/fonts/",
publicPath: "../fonts/",
name: isProduction ? "[name]-[hash].[ext]" : "[name].[ext]"
}
} ]
},
{
test: /\.(jpg|jpeg|png|gif|svg)$/i,
use: [
{
loader: "url-loader",
options: {
outputPath: "../static/images/",
publicPath: "images/",
limit: 8000, // Convert images < 8kb to base64 strings
name: isProduction ? "[name]-[hash].[ext]" : "[name].[ext]"
}
}
]
},
{
test: /\.(css)$/,
use: ExtractTextPlugin.extract( {
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: isProduction,
importLoaders: 1
}
},
{
loader: "postcss-loader",
options: {
plugins: [
require( "stylelint" )(),
require( "precss" )(),
require( "autoprefixer" )()
],
sourceMap: true
}
}
]
} )
}, {
test: /\.(js|jsx)$/,
include: /js/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader"
}
]
} ]
},
plugins: [
new CopyWebpackPlugin( [ {
from: "./web/static/assets"
} ] ),
new webpack.ContextReplacementPlugin( /moment[\/\\]locale$/, /pt-br/ ),
new ExtractTextPlugin( "css/app.css" ),
new webpack.optimize.CommonsChunkPlugin( {
name: "vendor",
filename: "js/vendor.bundle.js"
} )
]
};
资产的第一次编译完美地发生,如果我改变一些JS或JSX文件,重新编译就会成功。但是,在更改任何CSS文件后,反应组件将会中断。
警告:React.createElement:type无效 - 期望字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。您可能会从其定义的文件中导出组件。请检查Header
的呈现方法。
如果我使用webpack 2.7,它可以正常工作。