wake-up-neo.com

Die Option webpack 4 devtool funktioniert nicht mit dem webpack-dev-server

Bevor ich mich dazu entschloss, diese Ausgabe zu veröffentlichen, habe ich einige Dinge als Hintergrundüberprüfung durchgeführt ... Das ist mein Problem:

- Ich verwende webpack v4.6.0 und webpack-dev-server v3.1.3 - sie funktionieren gut zusammen, aber jetzt versuche ich, Quellkarten für meine Anwendung einzurichten. Es scheint, dass devtool option funktioniert nicht. 

Zumindest für mich habe ich jede Option aus der Liste ausprobiert und getestet: 

  • Webpack 4 - Sourcemaps : In dieser Ausgabe wird vorgeschlagen, dass devtool: 'source-map' sofort funktionieren sollte. Dies ist jedoch bei mir nicht der Fall
  • Wie mache ich eine Webpack-Quelle zu Originaldateien? : Das Hinzufügen von devtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/') zu meiner Ausgabekonfiguration hat nicht viel geholfen. Statt client.js wird jedoch index.js für mich angezeigt.  enter image description here  enter image description here
  • https://github.com/webpack/webpack/issues/6400 : Dies ist keine genaue Beschreibung meines Problems. Die Methoden hier zu versuchen, schien mir auch nicht zu helfen
  • Ich habe versucht, webpack.SourceMapDevToolPlugin zu verwenden, aber es funktioniert auch nicht mit meinem Setup, auch wenn ich devtools lösche oder auf false setze
  • Ich benutze hier kein UglifyJS Plugin
  • Ich weiß, dass der Webpack-Dev-Server derzeit in der Wartung ist, also habe ich Webpack-Serve ausprobiert, aber es scheint, als würden Quellkarten nicht damit funktionieren
  • Ich habe auch Quellkarten-Support-Paket ausprobiert, aber auch kein Glück, eine ähnliche Situation wie hier :  enter image description here

Wissen Sie, ob dieses Problem von einer PR behoben wird oder haben Sie versucht, es selbst zu lösen? Irgendwelche Tipps oder Hilfe wird geschätzt! 

Ich möchte die Ausgabe wie hier beschrieben erhalten, in blogpost mit direkten Links zu meinen Dateien und dem ursprünglichen Dateicode.

Meine 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()
  ]
};

mein 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"
  }
}

meine Ausgabe in der Konsole ist:  enter image description here

Bearbeiten:

Ich habe eine ähnliche Frage hier gesehen, aber niemand scheint zu antworten .Der Fehler wurde absichtlich gemacht! .__ Dies gilt nicht nur für Linting-Fehler, sondern für jeden Fehler meiner App .Hier ist ein Link zu meinem GITHUB-Repo: https://github.com/marharyta/ webpack-fast-development

UPDATE 01.05.2018

Ich habe ein weiteres Repo mit Cleaner-Setup erstellt: https://github.com/marharyta/webpack-4.6.0-test Und eine detaillierte Erklärung, wie ich hierher gekommen bin: https: // medium .com/p/79fb676417f4/edit Einige Vorschläge wurden von den Webpack-Mitwirkenden gemacht, was aber immer noch nicht funktioniert hat: https://github.com/marharyta/webpack-4.6.0-test/ Ausgaben/1

UPDATE 02.05.2018

Nach einer langen Untersuchung habe ich meine Antwort hier veröffentlicht. Das Problem war ESLint und wahrscheinlich einige Modusmarkierungen, da ich es auf die CLI-Art tun musste. Ich habe auch ein Problem mit ESLint Loader hier: https://github.com/webpack-contrib/eslint-loader/issues/227 Ich habe hier auch einen Beitrag mit einer detaillierteren Beschreibung erstellt: https://medium.com/@riittagirl/how-to-solve-webpack-problems-the-practical-case-79fb676417f4

reactjsnpmwebpackwebpack-dev-serversource-maps
8
margarita

Nach langem Ausprobieren bekam ich schließlich Hilfe von einem der Webpack-Verantwortlichen. Das Hauptproblem war eslint. Wenn Sie es als Loader laden, führt dies zu unerwartetem Verhalten. Durch Löschen des eslint aus den Webpack-Ladern für js können Sie dies beheben.

Das Webpack-Setup vor:

// 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

das webpack, das funktioniert nach:

// 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()
  ]
};

mein packeje.json sieht so aus:

{
  "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"
  }
}

Siehe auch die Vorschläge aus dem Problem, das in meiner Zweigstelle erstellt wurde: https://github.com/marharyta/webpack-4.6.0-test

3
margarita

In webpack4 müssen Sie den Modus in Ihrer Webpack-Konfiguration einstellen. Bitte hinzufügen 

mode: "development"

Zu deiner Webpack-Konfig.

Sie können NamedModulesPlugin entfernen, da es bereits im Dev-Modus verwendet wird.

Die Option source-map ist für Produktions-Builds gedacht. Für Ihren Dev-Build würde ich die devtool-Komponente entfernen, da webpack eval als Standardwert verwendet. Wenn dies nicht funktionieren sollte, versuchen Sie Folgendes:

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

Das ist was ich benutze. Minimalste Konfig.

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: 'eval-cheap-module-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