導入模塊實際上在webpack的上下文中做了什麼？

我正在學習webpack，來自業餘愛好者在純瀏覽器模式下使用JavaScript。我將使用bootstrap和moment作爲突出顯示混淆點的示例。導入模塊實際上在webpack的上下文中做了什麼？

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

當運行應用程序

在純瀏覽器模式下，我在我的<body>（我刪除的完整路徑或URL爲清楚起見）底部addding CSS和JS組件

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

我這時才發現webpack這是偉大的，但我不明白how to use the modules I import in my entry.js code。

具體做法是：

對於引導我最初嘗試

import 'bootstrap'

（與npm安裝後）這並沒有使我使用的CSS我通常在我的代碼使用，代碼看起來就像沒有應用Bootstrap一樣。

我然後試圖

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

，不料被施加引導。除了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>'的目的是什麼？

來源

2017-07-30 WoJ

我會強烈建議採取一小時（也許更少），並觀看免費的WebPack當然這裏https://webpack.academy/courses。 –

@ StephenR.Smith：我每天都用'webpack'，我對它很滿意。你提到的課程是否解決我的問題？（它解釋了導入裸露模塊的工作方式，除了依賴關係圖之外）。如果是這樣，我很樂意看到它，除了我在各種其他平臺上的課程（如Lynda，他們的課程也不錯） – WoJ

大約30分鐘，它涵蓋了webpack配置文件的結構以及測試和加載機制的工作，以及插件和加載器鏈接。一旦你知道webpack如何使用配置來告知它如何讀取你的源文件，我想你會對這裏發生的事情有更清晰的理解。 –

什麼是通過import <module>可用取決於什麼被暴露的模塊package.jsonmain條目。

對於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

來源

2017-07-31 01:12:11

導入模塊實際上在webpack的上下文中做了什麼？

回答

相關問題