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.js公开moment我可以在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中{{1}他们手动？

如果是这样的话：裸import的目的是什么？

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＆nbsp; javascript is attached to the jQuery object。

从命令行：

$ npm install 
$ webpack

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

1 个答案: