Webpack 路径变量错误

Posted 2023-02-22

【中文标题】Webpack 路径变量错误

【英文标题】：Webpack path variable error

【发布时间】：2018-09-10 11:07:11

【问题描述】：

我正在尝试使用我的 webpack 配置文件设置 sass，但在运行 webpack 时出现以下错误：

yarn run v1.5.1
$ webpack --config webpack.config.js --mode development
/var/www/html/node_modules/webpack/lib/TemplatedPathPlugin.js:43
                throw new Error(
                ^

Error: Path variable [contenthash] not implemented in this context: [name].[contenthash].css
    at fn (/var/www/html/node_modules/webpack/lib/TemplatedPathPlugin.js:43:11)
    at fn (/var/www/html/node_modules/webpack/lib/TemplatedPathPlugin.js:31:16)
    at String.replace (<anonymous>)
    at replacePathVariables (/var/www/html/node_modules/webpack/lib/TemplatedPathPlugin.js:98:5)
    at SyncWaterfallHook.eval [as call] (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:7:16)
    at MainTemplate.getAssetPath (/var/www/html/node_modules/webpack/lib/MainTemplate.js:387:31)
    at Compilation.getPath (/var/www/html/node_modules/webpack/lib/Compilation.js:1798:28)
    at getPath (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:315:51)
    at ExtractTextPlugin.extractedChunks.forEach.extractedChunk (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:323:83)
    at Array.forEach (<anonymous>)
    at compilation.hooks.additionalAssets.tapAsync.assetCb (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:301:25)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/var/www/html/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeTree.callAsync.err (/var/www/html/node_modules/webpack/lib/Compilation.js:946:32)
    at _err0 (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _async2.default.forEach.err (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:296:11)
    at /var/www/html/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/var/www/html/node_modules/async/dist/async.js:1050:13)
    at /var/www/html/node_modules/async/dist/async.js:958:16
    at _async2.default.forEach.err (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:274:13)
    at /var/www/html/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/var/www/html/node_modules/async/dist/async.js:1050:13)
    at /var/www/html/node_modules/async/dist/async.js:958:16
    at compilation.rebuildModule.err (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:261:26)
    at callback (/var/www/html/node_modules/webpack/lib/Compilation.js:782:35)
    at processModuleDependencies.err (/var/www/html/node_modules/webpack/lib/Compilation.js:804:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
error An unexpected error occurred: "Command failed.
Exit code: 1

这是我的 webpack.conf.js：

const path = require('path');

// Webpack Plugins

//enables storing to files instead of within javascript bundle
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin(
    filename: "[name].[contenthash].css", //saves css to single file
    disable: process.env.NODE_ENV === "development" //injects css into html if in dev mode
);
/*============================================================================*/

module.exports = 
  entry: './src/js/index.js', //apps bootstrap javascript file
  output: 
    filename: 'main.js', //name of js file everything is bundled to
    path: path.resolve(__dirname, 'dist') //path where filename saved to
  ,
  module: 
    rules: [
      
        test: /\.scss$/,
        use: extractSass.extract(
            use: [
                loader: "css-loader" //translates CSS into CommonJS - resolves css includes
            , 
                loader: "sass-loader" // compiles Sass to CSS
            ],
            // use style-loader in development
            fallback: "style-loader" // injects css from the bundled js file
        )
      
    ]
  ,
  plugins: [
      extractSass
  ]
;

我的 package.json：

  "name": "test-webpack",
  "version": "1",
  "description": "",
  "private": true,
  "license": "MIT",
  "dependencies": ,
  "devDependencies": 
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.8.3",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
  ,
  "scripts": 
    "dev": "webpack --config webpack.config.js --mode development",
    "build": "webpack --config webpack.config.js --mode production"
  

我一直按照官方文档在这里设置 sass-loader： https://webpack.js.org/loaders/sass-loader/#examples

有谁知道为什么变量 [contenthash] 没有在这个上下文中实现：[name].[contenthash].css？

【参考方案1】：

您需要将 webpack 包降级到 v4.2.0 。看起来 extract-text-webpack-plugin v4.0.0-beta.0 不支持 webpack v4.4.1。

你可以在这里github issue阅读更多关于这个问题的信息