javascript - 通俗地说，Webpack 加载器

Question

我对 Webpack 仅将所有内容转换为 JS 代码的理解是否正确？那么即使你有 CSS，只要你有正确的加载器，它也会变成 JS(在 bundle 中)？

Loaders can transform files from a different language like CoffeeScript to JavaScript, or inline images as data URLs. Loaders even allow you to do things like require() css files right in your JavaScript!”

Answer 1

加载器不会将 CSS 转换为 JavaScript，但它允许您直接从 JavaScript 导入 CSS 文件 文件。例如你有基于组件的应用程序架构，每个组件都有它自己的CSS，你可以直接从组件的JS文件加载CSS。

像这样(在你的app.js中)

import styles from './app.css';

或更通用的

import './app.css';

From Official site

Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

示例

For example, you can use loaders to tell webpack to load a CSS file or to convert TypeScript to JavaScript. To do this, you would start by installing the loaders you need:

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示 webpack 对每个 .css 文件使用 css-loader，对所有 .ts 文件使用 ts-loader: