Webpack源映射绝对/资源路径问题

时间:2020-08-28 09:08:33

标签: node.js npm webpack laravel-mix

当我运行npm run build时,源映射路径包括绝对/资源路径。我找不到我做错了什么地方或丢失了什么地方。我认为此问题与Windows有关,但我不确定

  • NPM v5.6.0
  • 节点v8.11.3
  • Windows v10

已编译index.css.map

{
  "version": 3,
  "sources": [
    "webpack:///./src/scss/D:/GitHub/RepoId/src/scss/D:/GitHub/RepoId/src/scss/src/scss/base/reset.scss",
    "webpack:///./src/scss/D:/GitHub/RepoId/src/scss/index.scss"
  ],
  "sourceRoot": ""
}

期望的index.css.map

{
  "version": 3,
  "sources": [
    "webpack:///./src/scss/base/reset.scss",
    "webpack:///./src/scss/index.scss"
  ],
  "sourceRoot": ""
}

资源

index.scss

@charset 'utf-8';
@import "base/reset";

webpack.mix.js文件

const autoprefixer = require("autoprefixer");
const calc = require("postcss-calc");
const extend = require("extend");
const fs = require("fs");
const glob = require("glob");
const mix = require("laravel-mix");
const path = require("path");

/* -------------------------------------------------------------------------- */

const ENV = process.env.NODE_ENV;

/* Load user config if exists */

const defaultConfig = JSON.parse(fs.readFileSync("./config.default.json"));

let config = {};

if (fs.existsSync(path.resolve(__dirname, "./config.json"))) {
  config = extend(defaultConfig, JSON.parse(fs.readFileSync("./config.json"))); // eslint-disable-line global-require
} else {
  config = defaultConfig;
}

/**
 * 1. Make $ENV variable globally available in SASS.
 */
const sassSettings = {
  data: `$ENV: ${ENV};`, /* 1 */
  precision: 10,
};

/**
 * 1. Deactivate integrated autoprefixer, because configuration is
 *    hardcoded (May 28th, 2018) and cannot be changed via
 *    configuration.
 */
mix.options({
  autoprefixer: false, /* 1 */
  postCss: [
    calc({ precision: 10 }),
    autoprefixer({
      browsers: [
        "last 2 versions",
        "not IE < 11",
        "not IE_mob <= 11",
        "not BB <= 10",
      ],
      grid: false,
    })
  ]
});

/* -------------------------------------------------------------------------- */

mix.js("src/js/index.js", "js");
mix.js("src/js/polyfills/respimage.js", "js/polyfills");
mix.js("src/js/polyfills/promise.js", "js/polyfills");

/* Search for template-specific JavaScript files */
const templateJS = glob.sync("./src/js/templates/*.js");
for (let i = 0, l = templateJS.length; i < l; i++) {
  mix.js(templateJS[i], "js/templates");
}

mix.sass("src/scss/index.scss", "css", sassSettings);

/* Search for template-specific CSS files */
const templateCSS = glob.sync("./src/scss/templates/*.scss");
for (let i = 0, l = templateCSS.length; i < l; i++) {
  mix.sass(templateCSS[i], "css/templates", sassSettings);
}

/* -------------------------------------------------------------------------- */

mix.browserSync({
  proxy: {
    target: config.host,
  },
  files: [
    "www/assets/css/*.css",
    "www/assets/css/templates/*.css",
    "www/assets/js/*.js",
    "site/snippets/**/*.php",
    "site/templates/**/*.php",
    "www/content/**/*",
  ],
  open: false,
  ghostMode: false,
});

mix.sourceMaps();
mix.disableNotifications();
mix.setPublicPath("www/assets");
mix.setResourceRoot("/assets/");

mix.webpackConfig({
  output: {
    publicPath: "/assets/",
    chunkFilename: "js/bundle-[name].js?id=[chunkhash]",
  },
  plugins: [
  ],
  stats: {
    assets: false,
    chunks: false,
    hash: false,
  },
});

mix.version();

0 个答案:

没有答案