在 webpack 的上下文中导入模块实际上做了什么？答案

【问题标题】：What does importing a module actually do in the context of webpack?在 webpack 的上下文中导入模块实际上做了什么？
【发布时间】：2018-01-06 01:43:46
【问题描述】：

我正在学习 webpack，来自于在纯浏览器模式下对 JavaScript 的业余使用。我将使用bootstrap 和moment 作为示例来突出混淆点。

在纯浏览器模式下，我在<body> 的底部添加了 CSS 和 JS 组件（为了清楚起见，我删除了完整的路径或 URL）：

(...)
    <script src="bootstrap.js"></script>
    <link href="botstrap.css">
    <script src="moment.js"></script>
    <script src="myownscript.js"></script>
</body>
</html>

运行应用时

Bootstrap 组件已加载（我在<div class='some bootstrap class'> 中直接使用的 CSS，以及 Bootstrap 需要但我不直接使用的 JS），
以及暴露moment的moment.js，我可以在myownscript.js中使用（例如moment.now()）

然后我发现webpack 这很棒，但我无法理解how to use the modules I import in my entry.js code。

具体来说：

对于引导程序我最初尝试过（在使用npm 安装后）

import 'bootstrap'

这使我无法使用我通常在代码中使用的 CSS，代码看起来没有应用 Bootstrap。

然后我尝试了

import 'bootstrap/dist/css/bootstrap.css'

并且，看哪，Bootstrap 被应用了。 Javascript 部分除外。

子问题：我应该只使用import 'bootstrap/dist/js/bootstrap.js'，它的使用方式与纯浏览器体验相同吗？

我怀疑是因为......

对于moment：我最初只是尝试

import 'moment'

但这还不够。我需要

import 'moment'
Window.moment = moment

在我的脚本中公开moment 以用作moment.now()。

我的问题：import '<module>' 是不是很神奇，还是我应该将通过npm 安装并驻留在node_modules 中的模块视为普通存储库并手动处理import？

如果是这样：裸露的import '<module>' 的目的是什么？

【问题讨论】：

我强烈建议您花一个小时（也许更少）在webpack.academy/courses 观看免费的 Webpack 课程。
@StephenR.Smith：我每天都使用webpack，对此我非常满意。您提到的课程是否解决了我的问题？（它解释了导入裸模块的工作原理，超出了依赖关系图）。如果是这样，我会很乐意观看，除了我在其他各种平台上的课程（比如 Lynda，他们的课程也不错）
大约 30 分钟，它涵盖了 webpack 配置文件的结构以及测试和加载器机制的工作原理，以及插件和加载器链。一旦你知道 webpack 如何使用配置来告知它将如何读取你的源文件，我想你会对这里发生的事情有一个更清晰的了解。
@StephenR.Smith：嗯，正如我提到的，我使用 webpack，因此使用了几个链式加载器，输出依赖于 prod vs dev 等。我不是“什么是导入”询问（以及如何捆绑） - 这是import 'module' 如何处理node_modules 中的文件，而不是自己导入它们。简而言之，我的问题的主体。现在 - 如果在课程中解决了这个问题，我会看看（总会有一些有趣的东西，特别是看着作者）但是如果你能建议我的问题的答案在哪里，那就太棒了。
@StephenR.Smith：我完成了这门课程，虽然它作为介绍很简洁，但它并没有解决我的问题（或者如果我错过了这个 TIA 指出我的答案在哪里）跨度>

标签： javascript twitter-bootstrap npm webpack webpack-2

【解决方案1】：

通过import <module> 可用的内容取决于模块package.json main 条目公开的内容。

对于引导程序，这是dist/js/bootstrap.js。但是这个文件不会导出任何东西，import 'bootstrap' 会将所有 Bootstrap 的 jQuery 插件加载到 jQuery 对象上。你也必须手动import 'bootstrap/dist/css/bootstrap.css'。

这里有一个最小的 webpack 设置来完成这项工作。

package.json

{
  "name": "test",
  "devDependencies": {
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1"
  }
}

webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: "./scripts.js",
  output: {
    path: path.resolve(__dirname, ""),
    filename: "bundle.js"
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        { loader: "style-loader" },
        { loader: "css-loader" }
      ]
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      use: 'file-loader?name=public/fonts/[name].[ext]'
    }]
  },
  plugins: [
    new webpack.ProvidePlugin({
     $: 'jquery',
     jQuery: 'jquery'
    })
  ]
}

index.html

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
</head>
<body>
 <h1>Test</h1>
 <div id="myModal">myModal</div>
<script src="bundle.js"></script>
</body>
</html>

和scripts.js

import 'bootstrap'
import moment from 'moment'
import 'bootstrap/dist/css/bootstrap.css'

console.log(moment.now(), $('#myModal').modal(), jQuery)

jQuery 通过 webpack Provide 插件全局加载，并且 Bootstrap 的 javascript is attached to the jQuery object。

从命令行：

$ npm install 
$ webpack

【讨论】：