Basic Webpack ExtractTextWebpackPlugin配置

我有一个配置ExtractTextWebpackPlugin for simpy的问题，包括单独的CSS文件在我的HTML头标记（使用链接标记），这是我相信它的主要目的。Basic Webpack ExtractTextWebpackPlugin配置

我在当前配置webpack.config.js：

var path = require('path'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: './app/index.js', 
    output: { 
    filename: "app.js", 
    path: path.resolve(__dirname, 'dist') 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: "css-loader" 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('general.css') 
    ] 
};

在我的主要index.js文件我有require("../style.css");

的style.css被放置在项目的根文件夹。

在我的index.html我有<script src="dist/app.js"></script>

据我所知这应该inlclude general.css在我头在运行时的标签，但它不存在。

任何帮助表示赞赏。

来源

2017-04-21 Tetra

你能说出你得到了什么错误吗？像页面或控制台中的任何错误 – Niraj

有不同版本的extractTextPlugin for webpack 2＆webpack，请确保安装正确的一个。 – Niraj

@Niraj我没有得到任何错误，一切都建立并运行良好，没有错误，但我没有得到结果。我使用的extractTextPlugin版本是* 2.1.0 *和webpack * 2.3.3 *。 – Tetra

ExtractTextPlugin只会从您的包中移除CSS以将其与JavaScript解耦，并且您需要将它包含在HTML中以及包中。

您可以通过让webpack为您生成一个HTML文件来自动执行此操作。当你在你的文件名中使用散列时，这是特别有用的。您需要使用html-webpack-plugin，它将自动包含捆绑的JavaScript以及由ExtractTextPlugin提取的CSS。因为你首先需要下载JavaScript包（第一个网络请求），那么你需要执行这个包，然后你需要执行这个包。 JS，需要一些时间来解析，然后你必须下载你的CSS文件（第二个网络请求）。由于您依赖于首先执行的软件包，因此您会在短时间内显示没有CSS的页面，或者在网络连接不良的低端移动设备上显示大量时间。

这基本上是什么情况，如果你不使用ExtractTextPlugin而是使用style-loader。 style-loader只是简单地将您的CSS注入<style>标记，该标记是从您的JavaScript包完成的，因此它仍然依赖于正在执行的包，但至少它不需要CSS的额外网络请求。这甚至比你期望的ExtractTextPlugin要好，这会使插件无用。

来源

2017-04-21 17:48:40

我的意思是编写buildtime而不是runtime。在那里犯了一个错误:)但是你仍然对运行时执行提出了一个有效的观点。使用* html-webpack-plugin *是要走的路，所以我将其标记为正确的答案。谢谢迈克尔。 – Tetra

Basic Webpack ExtractTextWebpackPlugin配置

回答

相关问题