Question

我能够使用public/src/index.js编译和运行React应用程序。我想与public/design/albert/js中的js文件创建完全不同的版本。当我尝试编译文件时，出现解析错误

我的问题是：

如何使用目录中的入口点（例如public/design/albert/js/index.js构建自定义目录？我难以理解多个端点
我如何使babel-loader预设做出反应以配合？

因此，我想在dist文件夹中建立一个与albert / js中的代码分开的构建，可以将其包含在脚本标签中（我不使用nodejs）

这是我运行的webpack命令：

node_modules/.bin/webpack design/albert/js/index.js separate.js

我得到（看来babel-loader无法正常工作）：

模块构建失败：SyntaxError：意外的令牌（9：7）

   7 |   render(){
   8 |     return (
>  9 |        <div className="person">
     |        ^
  10 |        </div>
  11 |     )
  12 |   }

这是我的design/albert/js/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Person from './person';

class App extends React.Component{
  render(){
    return (
       <div className="person">
         <Person />
       </div>
    )
  }
}
ReactDOM.render(<App />,document.querySelector("#app"));
//serviceWorker.unregister();
serviceWorker.register();

这是我的design/albert/js/person.js：

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{
  render(){
    return (
       <div className="person">
         <h1>Hello, I'm Jonathan</h1>
       </div>
    )
  }
}

export default Person;

这是我的webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
  devtool:'cheap-module-eval-source-map',
  entry: ['./src/index'],
  output: {
     path: path.resolve(__dirname,'dist'),
     filename: 'bundle.js',
     publicPath: ''
  },
  resolve:{
    extensions:['.js','.jsx']
  },
  module:{
    rules:[
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
    ]
  },
  //plugins:[new HtmlWebpackPlugin()]
};

这是我的.babelrc

{
  "presets":[
     ["env",{
       "targets":{
          "browsers":[
                "> 1%",
                "last 2 versions"
           ]
       }
     }],
     "react"
  ],
  "plugins": [
    "transform-class-properties"
  ]
}

Answer 1

在您的webpack.config.js文件中，您可以尝试执行以下操作：

...
entry: {
  'bundle_1': 'src/index.js',
  'bundle_2': 'design/albert/js/index.js'
},
output: {
  filename: '[name].js'
  ...

从自定义目录文件创建Webpack捆绑包

1 个答案: