web-dev-qa-db-fra.com

L'option Webpack 4 devtool ne fonctionne pas avec webpack-dev-server

Avant de décider de publier ce numéro, j’avais effectué pas mal de choses en guise de vérification des antécédents… .. Mon problème est donc le suivant:

- J'utilise webpack v4.6.0 et webpack-dev-server v3.1.3 - ils fonctionnent bien ensemble, mais maintenant j'essaye de configurer des cartes sources pour mon application. Il semble que option devtool ne marche pas. 

Au moins pour moi, j'ai essayé et testé chaque option de la liste: 

  • Webpack 4 - Sourcemaps : Ce problème suggère que devtool: 'source-map' devrait fonctionner immédiatement, mais ce n'est pas le cas pour moi.
  • comment transformer webpack sourcemap en fichiers originaux : ajouter devtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/') à ma config de sortie ne m'a pas beaucoup aidé, au lieu de client.js, il affiche index.js pour moi si  enter image description here  enter image description here
  • https://github.com/webpack/webpack/issues/6400 : celui-ci n'est pas une description précise de mon problème, le fait d'essayer les méthodes ici ne semble pas m'aider non plus
  • J'ai essayé d'utiliser webpack.SourceMapDevToolPlugin mais cela ne fonctionne pas non plus avec ma configuration, même lorsque je supprime devtools ou que je les affecte à false
  • Je n'utilise pas le plugin UglifyJS ici
  • Je sais que webpack-dev-server est en maintenance, j'ai donc essayé webpack-serve, mais il semble que les cartes sources ne fonctionnent pas non plus.
  • J'ai aussi essayé le paquet source-map-support, mais pas de chance, j'ai une situation similaire à ici :  enter image description here

Savez-vous si ce problème va être résolu par certains PR ou avez-vous essayé de le résoudre vous-même? Toute astuce ou aide est appréciée! 

Je voudrais obtenir une sortie comme décrit ici, dans blogpost avec des liens directs vers mes fichiers et le code des fichiers d'origine.

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

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

ma sortie en console est:  enter image description here

Modifier:

J'ai vu une question similaire ici , mais personne ne semble répondre .L'erreur a été commise! Cela ne s'applique pas seulement aux erreurs de peluches mais à chaque erreur de mon application .Voici un lien vers mon dépôt GITHUB: https://github.com/marharyta/ webpack-fast-development

UPDATE 01.05.2018

J'ai créé un autre dépôt avec une configuration plus propre: https://github.com/marharyta/webpack-4.6.0-test Et une explication détaillée de la façon dont je suis arrivé ici: https: // support .com/p/79fb676417f4/edit .__ Quelques suggestions ont été fournies par les contributeurs de WebPack mais cela n’a toujours pas fonctionné pour moi: https://github.com/marharyta/webpack-4.6.0-test/ questions/1

UPDATE 02.05.2018

Après une longue enquête, j'ai posté ma réponse ci-dessous. Le problème était ESLint et probablement quelques marquages ​​de mode puisque je devais le faire de la manière CLI . J'ai aussi un problème dans le chargeur ESLint ici: https://github.com/webpack-contrib/eslint-loader/issues/227 J'ai également créé un article avec une description plus détaillée ici: https://medium.com/@riittagirl/how-to-solve-webpack-problems-the-practical-case-79fb676417f4

reactjsnpmwebpackwebpack-dev-serversource-maps
8
margarita

Ainsi, après une longue tentative et une erreur, j'ai finalement eu l'aide de l'un des principaux développeurs de webpack ... Le principal problème était Eslint. Si vous le chargez en tant que chargeur, cela crée un comportement inattendu. En supprimant eslint de Webpack Loaders for js, vous pouvez résoudre ce problème.

La configuration du webpack avant:

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

le webpack qui fonctionne après:

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

mon packeje.json ressemble à:

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

Voir également les suggestions du numéro créé sur ma branche: https://github.com/marharyta/webpack-4.6.0-test

3
margarita

Dans webpack4, vous devez définir le mode dans votre config webpack. S'il-vous-plait ajoutez 

mode: "development"

Pour votre config webpack.

Vous pouvez supprimer NamedModulesPlugin car il est déjà utilisé en mode dev.

L'option source-map est destinée aux versions de production . Pour votre version de développement, je supprimerais l'accessoire devtool, car alors, Webpack utilise eval comme valeur par défaut . Si cela ne fonctionne pas, essayez:

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

C'est ce que j'utilise. La configuration la plus minimale.

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