从自定义目录文件创建 webpack 包答案

【问题标题】：Creating webpack bundle from custom directory files从自定义目录文件创建 webpack 包
【发布时间】：2018-12-09 04:00:02
【问题描述】：

我能够使用public/src/index.js 编译和运行一个反应应用程序。我想从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: Unexpected token (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"
  ]
}

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

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

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

【讨论】：