webpack 如何读取要导入的内容？

Question

我想知道 webpack 如何在内部找出入口文件有哪些导入语句？

例如我的index.js 看起来像

import React, { PropTypes, Component } from 'react';
import { findDOMNode } from 'react-dom';
import classnames from 'classnames';
import Loading from 'components/Loading';
import Button from 'components/Button';
import Header from 'components/Header';
import Footer from 'components/Footer';

class App extends Component {
    render() {
        return (
            <div className="shopping-list">
                <Header />
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                   <li>Instagram</li>
                   <li>WhatsApp</li>
                   <li>Oculus</li>
                </ul>
                <Footer />
            </div>
        );
    }
};

export default App;

现在我想了解 webpack 是如何找出该文件的其他导入的？然后其中一个导入的文件还有其他导入的文件？

Answer 1

基本上，Webpack 是构建工具，它旨在将您的应用程序转换为优化的解决方案，例如压缩 js/scss/css 和更多文件。

Webpack 可以根据您的选择进行配置，并且开发了许多加载器和插件，您可以使用它们来添加对该类型文件的支持。

这就像告诉系统获取源文件列表（输入）并使用相关的 webpack 插件或加载器编译它们并提供优化的解决方案作为输出。

通过 webpack 配置，你告诉它加载这种类型的文件并在此处生成输出，它通常会将你的高级源代码转换为原生源代码，因此它可以在任何系统上运行。

例如，

我们知道scss文件不被浏览器支持，我们需要将它转换成css然后我们可以导入它，但是使用scss loader插件并通过webpack配置它可以直接使用scss文件，无需手动转换scss 转 css 可以直接将 scss 文件导入到组件中，webpack 会读取文件，查看类型并为我们转换。

配置 webpack 是困难的部分，但有相当不错的预配置解决方案可供使用，例如 create-react-app，您无需担心配置

更多信息请参阅webpack documentation