如何將腳本加載到Webpack中

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中的錯誤找不到模塊：錯誤：無法在C：\\ Users \\ Administrator \\ Dropbox \\ projects \\ sharepoint-projects \\ addin-slider \\ app @ ./app中解析模塊'slider-component.js' /loader.js 10：0-30

Answer 1

您應該閱讀有關webpack如何解析模塊的文檔 。

共有三種類型的模塊請求：

1）絕對路徑require("/home/me/file") require("C:\\Home\\me\\file")

2）相對路徑require("../src/file") require("./file")

3）模塊路徑require("module") require("module/lib/file")

絕對路徑

我們首先檢查路徑是否指向目錄。 對於目錄，我們需要在該目錄中找到主文件。 因此， package.json的main字段連接到該路徑。 如果沒有package.json或main字段，則將index用作文件名。

我們現在有文件的絕對路徑。 我們嘗試附加所有擴展名（配置選項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指定這些目錄。