web-dev-qa-db-ja.com

Webpack-dev-serverはソースマップを生成しません

babel-loader を使用しますが、どのように生成するか、または変換されたファイルのソースマップを見つける場所がわかりません。私は試した eval-source-map、inline-source-map、source-map。

webpack.config.js

const BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
    entry: './src/script/index.jsx',
    output: {
        filename: 'bundle.js',
        sourceMapFilename: "bundle.js.map",
        publicPath: 'http://localhost:8090/assets'
    },
    debug: true,
    devtool: 'inline-source-map',
    module: {
        loaders: [
            {   
                test: /\.js[x]?$/, 
                loaders: ['react-hot', 'jsx', 'babel'],
                exclude: /node_modules/ 
              },
              {
                test: /\.scss$/,
                loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
              },
              {
                test: /\.less$/,
                loaders: [ 'style', 'css?sourceMap', 'less?sourceMap' ]
              },
              {
                test: /\.css$/,
                loaders: [ 'style', 'css']
              },
              { test: /\.woff$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff" },
              { test: /\.woff2$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff2" },
              { test: /\.(eot|ttf|svg|gif|png)$/,    loader: "file-loader" }
        ]
    },
    plugins: [
        new BowerWebpackPlugin()
    ],
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}

package.json

    {
    "name": "Won",
    "version": "0.0.1",
    "description": "Internal evidence application",
    "main": "index.jsx",
    "scripts": {
        "start": "npm run serve | npm run dev",
        "serve": "./node_modules/.bin/http-server -p 8080",
        "dev": "webpack-dev-server -d --progress --colors --port 8090"
    },
    "author": "And",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^5.8.23",
        "babel-loader": "^5.3.2",
        "bootstrap": "^3.3.5",
        "bootstrap-select": "^1.7.3",
        "bootstrap-table": "^1.8.1",
        "bower-webpack-plugin": "^0.1.8",
        "colresizable": "^1.5.2",
        "css-loader": "^0.16.0",
        "events": "^1.0.2",
        "extract-text-webpack-plugin": "^0.8.2",
        "file-loader": "^0.8.4",
        "flux": "^2.1.1",
        "http-server": "^0.8.0",
        "jquery": "^2.1.4",
        "jquery-ui": "^1.10.5",
        "json-markup": "^0.1.6",
        "jsx-loader": "^0.13.2",
        "less": "^2.5.1",
        "less-loader": "^2.2.0",
        "lodash": "^3.10.1",
        "node-sass": "^3.2.0",
        "object-assign": "^4.0.1",
        "path": "^0.11.14",
        "react": "^0.13.3",
        "react-hot-loader": "^1.2.9",
        "sass-loader": "^2.0.1",
        "style-loader": "^0.12.3",
        "svg-Sprite-loader": "0.0.2",
        "url-loader": "^0.5.6",
        "webpack": "^1.12.0",
        "webpack-dev-server": "^1.10.1"
    }
}

edit：//

結局、これは webpack.config.js であり、この package.json は私にとってはうまくいきます。

edit2：//

今、私は this webpack config を使用します

webpackwebpack-dev-server
46
Matt

つかいます webpack -d

dフラグは開発ショートカットを表し、ソースマップなどのすべての開発者ツールを有効にします。

28
FaureHu

_webpack-dev-server -d_を使用

  • _-d_は_--debug --devtool source-map --output-pathinfo_の省略形です。

  • _output-pathinfo_は、生成されたバンドルにコメントを追加し、どのモジュール/ファイルがどの場所に含まれているかを説明します。そのため、生成されたコードでは、コメントが次のコード行に追加されます。require(/* ./test */23)は、_23_がtestモジュールを指していることを示しています。これは、Webpackが生成したコードを見るときに最も役立ちますが、デバッガーをステップスルーするときはあまり役に立ちません。この例を入手しました この関連ドキュメントから 。

  • _webpack-dev-server_はwebpackと同じフラグをすべて受け入れるため、これはすべて機能します。

  • ドキュメントのこのセクションを参照 詳細については。

ヒントと落とし穴

  • _--content-base_-デフォルトでは、開発サーバーはコマンドを実行するディレクトリ内のファイルを提供します。ビルドファイルが_build/_にある場合、開発サーバーが提供するように_--content-base build/_を指定する必要がありますbuildディレクトリ内のファイルのセットアップ
  • _--inline_-変更を加えてファイルを保存するたびに自動リロードします！
39
Titus

追加 {devtool:"source-map"} to yourwebpack.config.js

もっと見る こちら

4
柴必青

Webpack.config.jsファイルに以下を追加してください `

devtool： "＃inline-source-map"、

Webpackのサイトからそれに関する明確な情報を見つけることができます ` https://webpack.github.io/docs/configuration.html

また、webpackサイトからsourcemapパーツの添付スクリーンショットを見つけてください。

enter image description here

1
Kostya Harutyunyan

私がしたことはすべて変更です：

// package.json
{
    ...
    **from** "dev:serve": "webpack-dev-server",
    **to** "dev:serve": "webpack-dev-server -d",
    ...
}

に相当： $ webpack-dev-server -d

これで、Ctrl + p in Chromeと、ブレークポイントを設定するES6構文が表示されます。

情報

$ webpack-dev-server --version
webpack-dev-server 2.9.7
webpack 3.10.0
0
Cody