首页 文章

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

提问于
浏览
0

我能够使用 public/src/index.js 编译和运行react应用程序 . 我想在 public/design/albert/js 中创建一个完全不同的js文件构建 . 当我尝试编译文件时,我得到解析错误

我的问题是:

  • 如何使用目录中的入口点构建自定义目录(例如 public/design/albert/js/index.jsI'm having difficulty understanding multiple endpoints

  • 如何让babel-loader预设做出反应合作?

I'd like as a result a separate build inside the dist folder from the code in albert/js that I can include in my scripts tag (I'm not using nodejs)

这是我运行的webpack命令:

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

我得到 (it seems the babel-loader is not functioning)

模块构建失败: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"
  ]
}

1 回答

  • 0

    webpack.config.js 文件中,您可以尝试以下方法:

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

相关问题