Adr*_*ian 5 javascript css webpack vue.js html-webpack-plugin
我有一个静态网站，正在使用Vue和Webpack。
我在一个名为的文件中有一些全局CSS规则，style.css并且正在使用import './styles.css'我的index.js文件导入这些规则。另外，我有一些.vue文件会生成自己的CSS。
要生成HTML页面，我正在使用html-webpack-plugin。
我的CSS规则似乎正确应用。但是，<style>包含它们的标签是<head>通过Webpack生成的Javascript 动态添加到我的页面的。我希望这些<style>标签改为静态地出现在生成的index.html文件中。有什么办法可以做到这一点？
另外，如果可能的话，我希望CSS被缩小。
这是我的webpack配置文件：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
mode: 'development'
};
听起来像这些html-webpack插件的确切用例：
它允许您内嵌javascript和CSS源代码。
如果您在Webpack版本中使用HtmlWebpackPlugin和ExtractTextPlugin
<link>为外部样式表文件创建HTML ，请添加此插件以将链接转换为包含内部CSS的〜〜元素（有时被错误地称为“ in-line”）。
将外部样式表（
<link rel="stylesheet"/>）转换为内部样式表（<style>...<style/>）。需要mini-css-extract-plugin和html-webpack-plugin
最后2个HTML Webpack插件取决于以下Webpack插件之一：
从一个或多个包中提取文本到单独的文件中。[...]它将
*.css条目块中的所有必需模块移动到单独的CSS文件中。因此，您的样式不再内联到JS捆绑包中，而是在一个单独的CSS文件（styles.css）中。
该插件将CSS提取到单独的文件中。
| 归档时间： |
|
| 查看次数： |
5280 次 |
| 最近记录： |