首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用webpack将es6类构建为单独的文件

使用webpack将es6类构建为单独的文件
EN

Stack Overflow用户
提问于 2017-04-05 14:52:30
回答 1查看 505关注 0票数 0

我正在尝试为我常用的react组件设置一个存储库,然后我可以将这些组件添加到我的项目中,比如component-kit并重用这些组件,所以类似于

代码语言:javascript
复制
import MyComponent from 'component-kit/MyComponent';

目前,我有以下项目结构:

代码语言:javascript
复制
component-kit/
   src/
     MyComponent/
       index.js
     index.js
   package.json
   webpack.config.js

index.js文件以下列方式导入所有组件:

代码语言:javascript
复制
import('./MyComponent');

然后,我使用webpack将每个导入构建成单独的文件,下面是我的配置,按照拆分代码的文档可用的这里

代码语言:javascript
复制
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'dist.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'es2015', 'stage-0', 'react'],
            plugins: ['syntax-dynamic-import']
          }
        }
      }
    ]
  }
};

目前,这输出了2个文件,dist.js0.dist.js,我不知道如何设置它,在文件输出端有组件名称,即MyComponent.js,这样我就可以像上面提到的那样包括它。理想情况下,这些将不包括在他们的构建反应,因为它将始终存在于父组件。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-05 15:29:54

我认为,如果您使用像JSX这样的基于babel的语言,最好为此使用babel。

看看材料-ui脚本。

我认为Webpack通常适合捆绑生产应用程序。

您可以使用节点fs获取文件名,如果坚持使用webpack,则可以动态生成像这个答案这样的条目。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43234696

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档