时间戳

首页 > 解决方案 > webpack 如何读取要导入的内容？

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

问题描述

我想知道并试图找出 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 如何找出该文件的其他导入是什么？然后其中一个导入的文件有其他导入的文件？

标签： javascriptnode.jsreactjswebpack

解决方案

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

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

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

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

例如，

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

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

有关更多信息，请参阅webpack 文档

推荐阅读