twitter-bootstrap - 为什么要使用 webpack 导入引导 css 而不仅仅是链接到它?
问题描述
我一直在学习用于单页应用程序的 webpack。
示例之一是使用:
import 'bootstrap/dist/css/bootstrap.min.css';
连同这样的装载机:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
这可以将引导 css 注入 main.js,然后在运行时注入 dom。
好的。但为什么?我看不出这比仅仅拥有一个正常的链接有什么好处。
代码的另一面是,现在这增加了包的大小(我的应用包已经超过 5 兆),与使用 CDN 相比,它只会增加启动时间。
我错过了什么吗?
更新
我想我找到了答案:下一步是使用 MiniCssExtractPlugin 将导入的 css 提取到 css 文件中,如下所述
解决方案
当您有一个依赖项时,它不会有任何区别。但是,如果您有一堆第三方库,您可以将其捆绑并缩小为一个。当您的应用程序投入生产时,它将为您提供优势。
还有其他好处是将 .scss 转换为 css
示例 web 包配置
module.exports = {
mode: 'development',
entry: {
'main.app.bundle': ['main.ts', "./somestyle.css"]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
output: {
publicPath: '/dist/',
filename: '[id].js',
chunkFilename: "[name].js",
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
'exports-loader?module.exports.toString()',
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader',
]
},
{
// This plugin will allow us to use html templates when we get to the angularJS app
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader',
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
}
]
},
node: {
fs: 'empty'
},
resolve: {
modules: [
__dirname,
'node_modules',
],
extensions: [".ts", ".tsx", ".js"]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HashOutput({
validateOutput: false,
}),
new MiniCssExtractPlugin({
filename: 'application.bundle.css',
chunkFilename: '[name].css'
})
],
devtool: 'source-map',
externals: [],
devServer: {
historyApiFallback: true
}
};
推荐阅读
- r - 如何使用函数将变量归类
- c++ - Sancov象征大文件这么久?
- python - 我试图让我的放弃时间说 5 天提醒 432000 秒
- go - 如何在不编组的情况下将结构从中间件传递到 Gin 中的处理程序?
- google-apps-script - 使用谷歌应用脚本将项目从一个谷歌表单移动到一个新的谷歌表单
- javascript - 使用专门的阅读页面制作每个链接或页面
- node.js - RPi 上的 NodeJs Lan 应用程序到谷歌云平台到自定义域
- c# - 如何解决 ASP.NET.MVC 中的模型问题?
- .net - 没有注册类型为“TodoListGQL.Data.ApiDbContext”的服务 .Net 5、GraphQL 和 Hot Chocolate
- c# - 是否可以在 C# 中将对象类型转换为另一种内联类型?