使sourceMap与Webpack 3.8.1一起使用

时间:2018-08-30 17:35:20

标签: webpack source-maps

我已经尝试了几种方法,但是我无法让sourceMap在任何浏览器上都能工作。 它在style.css旁边生成style.css.map,但是在浏览器中,我看到的只是style.css。我正在拆分js和CSS,还拆分了两者的admin和前端。有什么明显的事情我应该尝试吗?这是我的webpack.config:

// Return array of configurations
module.exports = function ( env ) {
  return exportModules([js, css], env);
};

/**
 * Merge filetype configs with shared config and return them as an array of objects.
 * @param objs
 * @param env
 * @return {Array}
 */
const exportModules = (objs, env) => {
  const objArr = [];
  for(let i = 0; i < objs.length; i++){
    objArr.push({
      ...config(env),
      ...objs[i]
    });
  }
  return objArr;
};

// Shared config options
const config = function ( env ) {
  return {
    watch: env === 'watch',
    watchOptions: {
      ignored: [/node_modules/]
    },
    stats: {
      colors: true
    },
    devtool: 'source-map'
  }
};

// Config for JS files
const js = {
  entry: {
    'main.js' : `${__dirname}/src/js/main.es6.js`,
    //'admin.js' : `${__dirname}/src/js/admin.es6.js`,
  },
  output: {
    path: `${__dirname}/build/js`,
    filename: '[name]'
  },
  module: {
    rules: [
      { test: /\.js$/, use: { loader: 'babel-loader' }, exclude: /node_modules/ },
    ]
  }
};

// Config for SCSS files
const css = {
  entry: {
    'style.css' : `${__dirname}/src/scss/style.scss`,
    'admin.css': `${__dirname}/src/scss/admin.scss`
  },
  output: {
    path: `${__dirname}/build/css`,
    filename: '[name]'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        // module chain executes from last to first
        use: [
          {
            loader: 'file-loader?sourceMap',
            options: { name: '[name].css', outputPath: '../css/' }
          },
          { loader: 'extract-loader?sourceMap' },
          { loader: 'css-loader?sourceMap', options: { url: false, sourceMap: true } },
          { loader: 'resolve-url-loader', options: { publicPath: null } },
          { loader: 'sass-loader?sourceMap', options: { sourceMap: true } }
        ]
      },
    ]
  }
};

0 个答案:

没有答案