Question

我过去曾使用webpack捆绑我的npm依赖项，比如jquery，lodash等。

我无法弄清楚如何捆绑依赖项和我自己的脚本？

Loader.js：

require('expose?$!expose?jQuery!jquery');
require('lodash');
require('react');
require('slider-component.js'); // my component in app folder

slider-component.js：

class Slider extends React.Component {
  constructor() {
    super(props);
    this.state = { data: [] };
  };

  componentDidMount() {
    let data = [
      {
        title: "My Image 1",
        url: "www.facebook.com",
        img: "https://i.imgur.com/jrIXCSJ.jpg",
        caption: "Something important text"
      },
    ]

    setTimeout(function(){
      this.setState({data: data});
    }, 5000)
  };

  render() {
    let data = this.state.data
    let slides = data.map((slide, index)=> {
      return(<Slide
        key={index}
        title={slide.title}
        url={slide.url}
        img={slide.img}
        caption= {slide.caption}
      />)
    })
    return (
      <ul className="slides">
        {slides}
      </ul>
    )
  }
}

ReactDOM.render(
  <Slider />,
  document.getElementById('flexslider')
);

我收到此错误：

./app/loader.js中的错误找不到模块：错误：无法解决 module＆＃39; slider-component.js＆＃39;在 C：\用户\管理\ Dropbox的\项目\ SharePoint的项目\插件滑块\应用 @ ./app/loader.js 10：0-30

Answer 1

您应该阅读有关webpack如何解析模块的this document。

有三种类型的模块请求：

1）绝对路径require("/home/me/file") require("C:\Home\me\file")

2）相对路径require("../src/file") require("./file")

3）模块路径require("module") require("module/lib/file")

绝对路径

我们首先检查路径是否指向目录。对于目录，我们需要在此目录中找到主文件。因此，main中的package.json字段会加入路径。如果没有package.json或没有main字段，则将索引用作文件名。

我们现在有一个文件的绝对路径。我们尝试附加所有扩展（配置选项resolve.extensions）。第一个现有文件用作结果。

相对路径

上下文目录是包含require语句的资源文件的目录。如果没有资源文件，则将配置选项context用作上下文目录。（这可能发生在入口点或加载器生成的文件中）。

相对路径连接到上下文目录，并根据“解析绝对路径”解析生成的绝对文件。

模块路径

为了解析模块，我们首先从上下文目录中收集模块的所有搜索目录。此过程类似于node.js解析过程，但搜索目录可使用配置选项resolve.modulesDirectories进行配置。除此之外，配置选项resolve.root中的目录也是前置的，并且附加了配置选项resolve.fallback中的目录。

在每个模块目录中查找模块，并根据“解析绝对路径”进行解析。如果第一场比赛没有成功，则尝试第二场比赛，依此类推。

您要使用的模块请求类型是模块路径。因此，在webpack.config.js中，您应该添加/编辑字段resolve.modulesDirectories（这是一个字符串数组）并附加包含模块的目录。

例如：

var path = require('path');

// ...
resolve: {
    modulesDirectories: [
        path.resolve('./src/my_components')
    ]
}

此外，正如文档所述，您可以使用resolve.root或resolve.fallback来指定这些目录。

如何将我的脚本加载到webpack中

1 个答案:

绝对路径

相对路径

模块路径