我能够让 min-css-extract-plugin top 生成 css 文件就好了，但我似乎无法让它与 SASS 一起使用。当我使用 webpack 开发服务器时，它运行得很好，但它不断将我的 scss 插入我的 javascript 文件，而不是创建单独的 CSS 文件。
我有index.html，index.js和main.scss存储在/src下
webpack.config.js：
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
// fallback to style-loader in development
process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
当我运行 npm run build 失败时，引用 mini-css-extract-plugin：
C:\dev\udemy-restfull\webpack\node_modules\mini-css-extract-plugin\dist\index.js:76
const resource = this._identifier.split('!').pop();
^
TypeError: Cannot read property 'split' of undefined
我尝试搜索错误，但只知道这取决于加载器执行的顺序，所以我只留下了 MiniCssExtractPlugin.loader 和 css-loader，但错误仍然存在。
我浏览了文档并得到了简化的设置，也发生了同样的错误。
我已经在index.js中加载了引导程序，所以我删除了它，认为这可能是原因，也不好。
你能帮助我吗？
这是我的 webpack.config.js 文件：
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: ["@babel/polyfill", "./src/index.js"],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader }, // style-loader
{ loader: "file-loader" }
]
}, …在webpack中配置MiniCssExtractPlugin时，不明白为什么[name]总是“main”？
plugins: [
new MiniCssExtractPlugin({
filename: 'assets/css/[name].css' // where does the name "main" come from?
})
]
我怎么能传入一个变量，以便 [name] 是我的应用程序的名称而不是“main”而不用像这样的硬编码filename: 'assets/css/myapp.css'？
网络包output配置：
module.exports = {
entry: './src/app.js',
output: {
path: utils.resolve('/dist'),
},
奇怪的是，即使是 Webpack 也会将主包文件创建为main.js. 为什么主要？
我在我的打字稿和webpack项目中使用MiniCssExtractPlugin.
我的MiniCssExtractPlugin的webpack配置看起来像
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/index.tsx',
mode: "development",
output: {
path: path.resolve(__dirname, "build"),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
sourceMap: true,
importLoader: 2
}
},
"sass-loader"
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
}),
new MiniCssExtractPlugin({ …我现在使用mini-css-extract-plugin模块，并设置其chunkFilename值，并"[id].css"通过运行来确保其值。但是，我看不到该文件。
参考如下。
https://webpack.js.org/plugins/mini-css-extract-plugin/#minimal-example
所以，我的问题是
mini-css-extract-plugin的chunkFilename是什么？
chunkFilename的目的是什么？
您怎么看文件？
我想用 webpack 4 打包一个 javascript 项目，但我正在努力处理 CSS 文件。我捆绑的 JS 文件将被其他网站使用带有绝对 URI 的脚本标签。所以我希望我的包为样式表注入链接标签，以便管理文件名中的哈希。
我的样式源是一个scss文件。当我使用它时效果很好，style-loader但我想在其他文件中提取 CSS。
我尝试了以下方法webpack.config.js：
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.scss$/,
use: [
miniCssExtractPlugin.loader,
'css-loader',
'sass-loader']
}
]
},
plugins: [
new miniCssExtractPlugin({
filename: '[name].[hash].css',
}),
]
};
它在输出目录中创建我的 CSS 文件，但加载程序不会像那样将它注入到 DOMstyle-loader中。而且我不能style-loader在mini-css-extract-plugin.
我无法使用，html-webpack-plugin因为没有 HTML 输出文件。有没有办法用现有的装载机做我想做的事？有没有办法在JS中获取提取的文件url来自己创建链接标签？
我的 devDependencies ：
{
// ...
"devDependencies": {
"css-loader": "^3.3.2",
"mini-css-extract-plugin": …我们在部署之前使用 webpack 来捆绑我们的资源。然而，现在我们还想通过 webpack 捆绑我们的 sass 文件，这样可以简化我们的构建过程。现在，我们确实遇到了一个问题，即 MiniCssExtractPlugin 声称未定义webpack_require 。
我们不知道为什么会发生这种情况，但它们的根本问题似乎与 css-loader 的代码有关。
我们尝试了很多方法来解决这个问题（例如尝试不同的版本、重新安装软件包、检查剩余的全局软件包等。但这些似乎都对结果没有任何影响。
感谢您提前提供的任何帮助。
错误：
ERROR in ./css/theme.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function
at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:123:63)
at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4919:41)
at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4809:28)
at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
at ****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:85:18
at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:88:10)
at Module._compile (****project/_dev/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at exec (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:60:10)
at childCompiler.runAsChild (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:153:14)
at compile (****project/_dev/node_modules/webpack/lib/Compiler.js:343:11)
at hooks.afterCompile.callAsync.err (****project/_dev/node_modules/webpack/lib/Compiler.js:681:15)
at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at AsyncSeriesHook.lazyCompileHook …