Question

我在我的应用中学习使用Webpack。到目前为止一切顺利，但就目前而言，我无法为javascript文件和样式文件（scss）提供正确的源代码。

以下是我使用它的方法（在ubuntu下使用firefox 50）。

的package.json

"dependencies": {
    "bootstrap": "^3.3.7",
  "font-awesome": "^4.7.0",
  "jquery": "^3.1.1"
},
"devDependencies": {
  "babel-core": "^6.2.1",
  "babel-eslint": "^7.1.1",
  "babel-loader": "^6.2.0",
  "babel-preset-es2015": "^6.1.18",
  "css-loader": "^0.21.0",
  "eslint": "^3.13.0",
  "eslint-config-airbnb-base": "^11.0.1",
  "eslint-loader": "^1.6.1",
  "eslint-plugin-import": "^2.2.0",
  "exports-loader": "^0.6.3",
  "expose-loader": "^0.7.1",
  "extract-file-loader": "^0.1.0",
  "extract-text-webpack-plugin": "^0.8.2",
  "file-loader": "^0.8.4",
  "html-loader": "^0.4.4",
  "html-webpack-plugin": "^1.6.2",
  "image-webpack-loader": "^2.0.0",
  "imports-loader": "^0.7.0",
  "jscs": "^3.0.7",
  "jscs-loader": "^0.3.0",
  "lodash": "^4.17.4",
  "node-sass": "^3.7.0",
  "null-loader": "^0.1.1",
  "postcss-loader": "^0.7.0",
  "resolve-url-loader": "^1.6.1",
  "sass-loader": "^3.2.0",
  "style-loader": "^0.13.0",
  "url-loader": "^0.5.7",
  "webpack": "^1.13.2",
  "webpack-dev-server": "^1.15"
}

webpack.config.js：

...
plugins: [new ExtractTextPlugin('styles.css')],
...
preLoaders: [{test: /\.js$/, loaders: ['eslint']},
...
loaders: [
    { test: /(\.jsx|\.js)$/, loader: 'babel', exclude: /node_modules/ },
    { test: /\.css$/, loader: "style-loader!css-loader?sourceMap" },
    { test: /\.scss/, loader: 'style-loader!css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap' },
    { test  : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
    { test  : /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader'}
],
...
debug: true,
devtool: 'source-map',
...

我的入口点（index.js），只有那些行：

import $ from 'jquery';
import '../scss/main.scss';

$('body').append('<div class="test1">test1</div>');

console.info('app loaded');

我的scss文件：

@import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import '~font-awesome/scss/font-awesome';

所以，我尝试了devtool选项的每个值（eval，source-map，inline-source-map等等），但似乎没有人让我拥有：

正确的文件名（js和scss）
正确的行号（js和scss）

例如，使用 devtool：＆＃39; eval-source-map＆＃39; ， Firefox开发工具向我展示了js文件：

(i) app loaded ---------------- main.js%20line%201051%20%3E%20eval:13:1

而不是：

(i) app loaded ---------------- index.js:6:1

和scss文件：

.fa-3x { ---------------- _larger.scss:11

哪个是正确的。

与 devtool：＆＃39; eval＆＃39;

firefox中的javacsript登录正在显示

(i) app loaded ---------------- index.js?:13:1

文件名正确但不是数字行

使用样式：

.fa-3x { ---------------- blob:http://localhost:8001/f010a6f5-ac3a-4e2c-a3d1-fd3a57ff949b

filenam是完全错误的。

那么我怎样才能为我的环境提供一些有用的源图？如果价值正确，建筑物的速度很慢，我甚至不会开车...

提前致谢

获取js和scss文件的webpack源图

0 个答案: