web-dev-qa-db-ja.com

Webpack 4 devtoolオプションがwebpack-dev-serverで機能しない

この問題を投稿する前に、バックグラウンドチェックとしてかなりの数のことを行いました。だから、私の問題は：

-私はwebpack v4.6.0とwebpack-dev-server v3.1.3を使用しています-それらは一緒に正常に動作しますが、アプリケーションのソースマップを設定しようとしています- devtoolオプション は機能しません。

少なくとも私にとっては、リストのすべてのオプションを試してテストしました。

  • Webpack 4-Sourcemaps ：この問題は、_devtool: 'source-map'_がそのまま使用できることを示唆していますが、私には当てはまりません
  • webpackソースマップを元のファイルに作成する方法 ：出力構成にdevtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')を追加しても、client.jsの代わりにindex.jsが表示される代わりに、あまり役に立ちませんでした enter image description hereenter image description here
  • https://github.com/webpack/webpack/issues/64 ：これは私の問題の正確な説明ではありません。ここの方法を試しても、私には役に立たないようです
  • _webpack.SourceMapDevToolPlugin_を使用しようとしましたが、devtoolsを削除したりfalseに設定したりしても、私のセットアップでは機能しません。
  • ここではUglifyJSプラグインを使用していません
  • Webpack-dev-serverは現在メンテナンス中であることを知っているので、webpack-serveを試しましたが、ソースマップも機能していないようです
  • 私もsource-map-supportパッケージを試してみましたが、運も悪くありません here ： enter image description here

その問題が一部のPRによって修正されるかどうか、または自分で解決しようとしたかどうかを知っていますか？ヒントやヘルプは大歓迎です！

ここに記載されているように出力を取得したいと思います blogpost 自分のファイルと元のファイルのコードへの直接リンクがあります

私のwebpack.js

_// webpack v4.6.0
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const stylish = require('eslint/lib/formatters/stylish');
const webpack = require('webpack');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    devtoolModuleFilenameTemplate: info =>
      'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'
  },
  devtool: 'source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          formatter: stylish
        }
      }
    ]
  },
  plugins: [
    // new webpack.SourceMapDevToolPlugin({
    //   filename: '[file].map',
    //   moduleFilenameTemplate: undefined,
    //   fallbackModuleFilenameTemplate: undefined,
    //   append: null,
    //   module: true,
    //   columns: true,
    //   lineToLine: false,
    //   noSources: false,
    //   namespace: ''
    // }),
    new CleanWebpackPlugin('dist', {}),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash(),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
};_

私のpackage.json

_{
  "name": "post",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook",
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@storybook/addon-actions": "^3.4.3",
    "@storybook/react": "v4.0.0-alpha.4",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^0.1.19",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^2.9.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.7.0",
    "html-webpack-plugin": "^3.2.0",
    "prettier": "^1.12.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "webpack": "v4.6.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "v3.1.3",
    "webpack-md5-hash": "0.0.6",
    "webpack-serve": "^0.3.1"
  },
  "dependencies": {
    "source-map-support": "^0.5.5"
  }
}_

コンソールでの私の出力は： enter image description here

編集：

同様の質問 here を見ましたが、誰も答えていないようです。 エラーは意図的に作成されました！これは、lintingエラーだけでなく、私のアプリのすべてのエラーに適用されます。 これは私のGITHUBリポジトリへのリンクです：https://github.com/marharyta/webpack-fast-development

UPDATE 01.05.2018

よりクリーンなセットアップで別のリポジトリを作成しました： https://github.com/marharyta/webpack-4.6.0-test そして、ここに到達する方法の詳細な説明： https：/ /medium.com/p/79fb676417f4/edit Webpackの貢献者からいくつかの提案がありましたが、それでも私にはうまくいきませんでした： https://github.com/marharyta/webpack-4.6.0-テスト/問題/ 1

UPDATE 02.05.2018

長い調査の後、私は以下に私の回答を投稿しました。問題は、ESLintと、おそらくCLIの方法で実行する必要があるため、いくつかのモードマーキングでした。 ESLintローダーの問題もここにあります： https://github.com/webpack-contrib/eslint-loader/issues/227 ここにも詳細な説明を記載した投稿を作成しました https://medium.com/@riittagirl/how-to-solve-webpack-problems-the-practical-case-79fb676417f4

reactjsnpmwebpackwebpack-dev-serversource-maps
11
margarita

長い間試行錯誤を繰り返した結果、ようやくWebpackのメンテナンス担当者から助けをもらいました。主な問題はエスリントでした。ローダーとしてロードすると、予期しない動作が発生します。 jsのwebpackローダーからeslintを削除することで修正できます。

以前のwebpackセットアップ：

// webpack v4
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const baseConfig = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'
  },
  devServer: {
    contentBase: './dist',
    hot: true,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        **use: [
          { loader: 'babel-loader' },
          {
            loader: 'eslint-loader',
            options: { formatter: require('eslint/lib/formatters/stylish') }
          }**
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist'),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
};

if (process.env.NODE_ENV === 'development') {
  baseConfig.devtool = 'inline-source-map';
}

module.exports = baseConfig

後に機能するWebpack：

// webpack v4
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'
  },
  devtool: 'cheap-module-source-map',
  devServer: {
    contentBase: './dist',
    hot: true,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        **use: [{ loader: 'babel-loader' }]**
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist'),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
};

私のpackeje.jsonは次のようになります：

{
  "name": "post",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=production",
    "start": "NODE_ENV=development webpack-dev-server --mode=development --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^0.1.19",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^2.9.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.7.0",
    "html-webpack-plugin": "^3.2.0",
    "prettier": "^1.12.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.13",
    "webpack-md5-hash": "0.0.6"
  },
  "dependencies": {
    "webpack-dev-server": "^3.1.3"
  }
}

私のブランチで作成された問題の提案も参照してください： https://github.com/marharyta/webpack-4.6.0-test

5
margarita

Webpack4では、webpack設定でモードを設定する必要があります。追加してください

mode: "development"

あなたのウェブパックの設定に。

NamedModulesPluginはすでに開発モードで使用されているため、削除できます。

オプション source-mapは製品ビルド用です。あなたの開発ビルドでは、webtoolがデフォルトでevalを使用するため、devtoolプロップを削除します。うまくいかない場合は、以下を試してください。

devtool: 'cheap-module-eval-source-map'

それが私が使うものです。ほとんどの最小限の構成。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const stylish = require('eslint/lib/formatters/stylish');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: { main: './src/index.js' },
  output: {
    filename: '[name].[hash].js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    hot: true,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' },
          { loader: 'eslint-loader', options: { formatter: stylish } }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist'),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};
0
Daniel