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

Question

我正在学习 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。

具体来说：

对于bootstrap我最初尝试过（用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>'的目的是什么？

Answer 1

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

对于bootstrap，这是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

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

What does importing a module actually do in the context of webpack?

javascript

npm

twitter-bootstrap

webpack

webpack-2