我们的开发团队从三个月前开始使用React,我们喜欢React,现在出现了一个新项目,我们想重用我们的一些组件并将它们公开。我们启动了一个新的 npm 项目,并复制了我们所做的基本控件(输入),测试了 import'./../ sharedcontrols /'并进行了工作,然后发布到npm而且没有用,那么我们发现组件也需要打包,我们现在使用Rollup。发布新结构并 import npmpackage 后,它可以在webpackdevserver上工作,但为生产而进行编译会产生错误意外令牌:名称(输入)(输入是其中一个名称组件)。
我在两个webpack配置文件之间找不到任何显着差异,为什么某个组件可以在开发模式下工作,但不能打包用于生产?在发布组件的过程中我们是否犯了错误?
生产webpack配置文件:
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = env => {
const plugins = [new ExtractTextPlugin("css/[name].css")];
if (env.NODE_ENV === "production") {
plugins.push(new CleanWebpackPlugin(["dist"], { root: __dirname }));
}
return {
entry: {
index: path.resolve(__dirname, "index.js"),
miscuentas: path.resolve(__dirname, "miscuentas.js")
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "react/[name].js",
publicPath: "/",
chunkFilename: "react/[name].js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "react", "stage-2"]
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: "css-loader",
options: {
minimize: true
}
}
]
})
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(jpg|png|gif|svg)$/,
use: {
loader: "url-loader",
options: {
limit: 10000,
fallback: "file-loader",
name: "images/[name].[hash].[ext]"
}
}
}
]
},
plugins
};
};
开发webpack配置文件::
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
index: path.resolve(__dirname, "index.js"),
miscuentas: path.resolve(__dirname, "miscuentas.js")
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "react/[name].js",
chunkFilename: "react/[name].js"
},
devServer: {
port: 9000,
proxy: { "**": { target: "http://localhost:8080/", secure: false, changeOrigin: true } }
},
devtool: "eval-source-map",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "react", "stage-2"]
}
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{ test: /\.scss/, use: ["style-loader", "css-loader", "sass-loader"] },
{
test: /\.(jpg|png|gif|svg)$/,
use: {
loader: "url-loader",
options: {
limit: 1000000,
fallback: "file-loader",
name: "images/[name].[hash].[ext]"
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html",
chunks: ["index"]
})
]
};
感谢您的帮助。