Question

我是Reactjs的新手，我正在尝试设置react，babel和webpack来将jsx和es2015代码转换为1个文件。

基本应用编译良好，但编译时会看到以下文字

不是来自Webpack的内容是通过/ app提供的

[./src/app/index.js] 27 bytes {main} [built]
i ｢wds｣: Project is running at http://localhost:1234/
i ｢wds｣: webpack output is served from /app/
i ｢wds｣: Content not from webpack is served from C:\Users\coder\Documents\nodeprojects\my-react\src

这是我的webpack.config.js文件配置的样子：

module.exports = {
  entry: path.resolve(__dirname, 'src') + '/app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist') + '/app',
    filename: 'bundle.js',
    publicPath: '/app/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
};

我的项目结构如下：

project_folder


dist

node_modules

src


app


index.js



index.html

您知道如何避免不是从/ app投放webpack的内容，还是不需要打扰？任何帮助表示赞赏。谢谢

Answer 1

如果您是新手，建议您使用create-react-app来开始使用基本的Webpack babel。

可以使用创建项目

npx create-react-app myapp

如果要研究其配置，可以在项目中eject：

npm run eject

否则，您的公共路径不应从根路径/app公开，而最好是src/app或更高，只需使用src。

如果您有后端应用程序和前端应用程序，则应制作两个不同的程序包。

如何解决React Webpack中提供的非Webpack内容？

1 个答案: