Webpack 4 devtool 选项不适用于 webpack-dev-server [英] Webpack 4 devtool option does not work with webpack-dev-server

查看：50
本文介绍了Webpack 4 devtool 选项不适用于 webpack-dev-server的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我决定发布这个问题之前，我做了很多事情作为背景调查.所以，我的问题是:

- 我使用 webpack v4.6.0 和 webpack-dev-server v3.1.3- 它们一起工作得很好，但现在我正在尝试为我的应用程序设置源映射，似乎

  • 您是否知道该问题是否会由某个公关解决，或者您是否尝试过自己解决?任何提示或帮助表示赞赏！

    我想获得此处描述的输出，

    我看到了一个类似的问题 此处，但似乎没有人回答.这个错误是故意的！这不仅适用于 linting 错误，还适用于我的应用程序中的每个错误.这是我的 GITHUB 存储库的链接:https://github.com/marharyta/webpack-fast-development

    2018 年 5 月 1 日更新

    我用更简洁的设置创建了另一个存储库:https://github.com/marharyta/webpack-4.6.0-test以及我如何到达这里的详细说明:https://medium.com/p/79fb676417f4/editwebpack 贡献者提供了一些建议，但仍然对我不起作用:https://github.com/marharyta/webpack-4.6.0-test/issues/1

    2018 年 5 月 2 日更新

    经过长时间的调查，我在下面发布了我的答案.问题是 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

    解决方案

    所以，经过长时间的尝试和错误，我终于得到了一位 webpack 维护者的帮助.主要问题是 eslint.如果您将其作为加载程序加载，则会产生意外行为.通过从 js 的 webpack 加载器中删除 eslint，你可以解决这个问题.

    之前的 webpack 设置:

    //webpack v4const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const WebpackMd5Hash = require('webpack-md5-hash');const CleanWebpackPlugin = require('clean-webpack-plugin');const baseConfig = {条目:{主:'./src/index.js'}，输出: {路径:path.resolve(__dirname, 'dist'),文件名:'[名称].[哈希].js'},开发服务器:{contentBase: './dist',热:真的，打开:真实},模块: {规则: [{测试:/\.js$/,排除:/node_modules/，**用: [{ loader: 'babel-loader' },{loader: 'eslint-loader',选项:{ 格式化程序:要求('eslint/lib/formatters/stylish')}}**]}]},插件: [new CleanWebpackPlugin('dist'),新的 HtmlWebpackPlugin({注入:假，哈希:真实，模板:'./src/index.html',文件名:'index.html'}),新的 WebpackMd5Hash()]};如果(process.env.NODE_ENV === '发展'){baseConfig.devtool = 'inline-source-map';}module.exports = baseConfig

    之后工作的 webpack:

    //webpack v4const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const WebpackMd5Hash = require('webpack-md5-hash');const CleanWebpackPlugin = require('clean-webpack-plugin');模块.出口 = {条目:{主:'./src/index.js'}，输出: {路径:path.resolve(__dirname, 'dist'),文件名:'[名称].[哈希].js'},开发工具:廉价模块源图"，开发服务器:{contentBase: './dist',热:真的，打开:真实},模块: {规则: [{测试:/\.js$/,排除:/node_modules/，**使用:[{加载器:'babel-loader'}]**}]},插件: [new CleanWebpackPlugin('dist'),新的 HtmlWebpackPlugin({注入:假，哈希:真实，模板:'./src/index.html',文件名:'index.html'}),新的 WebpackMd5Hash()]};

    我的 packeje.json 看起来像:

    {"name": "post","版本": "1.0.0",描述": ""，"main": "index.js",脚本":{"build": "webpack --mode=production","start": "NODE_ENV=development webpack-dev-server --mode=development --hot"},作者": ""，"license": "ISC",开发依赖":{"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","更漂亮": "^1.12.1","反应": "^16.3.2","react-dom": "^16.3.2","webpack": "^4.6.0","webpack-cli": "^2.0.13",webpack-md5-hash":0.0.6"},依赖关系":{"webpack-dev-server": "^3.1.3"}}

    另请参阅在我的分支上创建的问题的建议:https://github.com/marharyta/webpack-4.6.0-test

    Before I decided to post this issue, I did quite a few things as a background check. So, my problem is:

    - I use webpack v4.6.0 and webpack-dev-server v3.1.3 - they work fine together, but now I am trying to set up source maps for my application, it seems that devtool option does not work.

    At least for me, I have tried and tested every option from the list:

    • Webpack 4 - Sourcemaps : this issue suggests that devtool: 'source-map' should work out of the box, but this is not the case for me
    • https://github.com/webpack/webpack/issues/6400 : this one is not an accurate description of my issue, by trying the methods here did not seem to help me either
    • I tried to use webpack.SourceMapDevToolPluginbut it doesn't work with my setup either, even when I delete devtools or set them to false
    • I do not use UglifyJS plugin here
    • I know that webpack-dev-server is in maintenance now, so I tried webpack-serve, but it seems like source maps do not work with it either
    • I have tried source-map-support package as well, but no luck either, have a similar situation as

    Do you know if that issue is going to be fixed by some PR or have you tried to solve it yourself? Any tips or help is appreciated!

    I would like to get output as described here, in blogpost with direct links to my files and the original files code.

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

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

    my output in console is:

    Edit:

    I saw a similar question here, but nobody seems to be answering. The error was made on purpose! This does not just apply to linting errors but to every error my my app. Here is a link to my GITHUB repo: https://github.com/marharyta/webpack-fast-development

    UPDATE 01.05.2018

    I have created another repo with cleaner setup: https://github.com/marharyta/webpack-4.6.0-test And detailed explanation of how I got there here: https://medium.com/p/79fb676417f4/edit Some suggestions were given by the webpack contributors but that still did not work for me: https://github.com/marharyta/webpack-4.6.0-test/issues/1

    UPDATE 02.05.2018

    After a long investigation, I posted my answer below. The problem was ESLint and probably some mode markings since I had to do it the CLI way. I also an issue in ESLint loader here: https://github.com/webpack-contrib/eslint-loader/issues/227 I also created a post with a more detailed description here: https://medium.com/@riittagirl/how-to-solve-webpack-problems-the-practical-case-79fb676417f4

    解决方案

    So, after a long tried and error, I finally got help from one of webpack mainteiners. The main issue was eslint. If you load it as a loader, it creates unexpected behaviour. By deleting the eslint from webpack loaders for js you can fix that.

    The webpack setup before:

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

    the webpack that works after:

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

    my packeje.json looks like:

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

    See also the suggestions from the issue that was created on my branch: https://github.com/marharyta/webpack-4.6.0-test

    这篇关于Webpack 4 devtool 选项不适用于 webpack-dev-server的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    其他开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆