Webpack 2 开发工具不工作

Posted

技术标签:

【中文标题】Webpack 2 开发工具不工作【英文标题】:Webpack 2 devtool not working 【发布时间】:2017-06-16 00:25:44 【问题描述】:

我正在尝试从 webpack 1 转换为 2,但 webpack 似乎没有使用 devtool: 'source-map' 生成源映射文件。如果我使用以下配置运行 webpack,bundle.js 文件会按预期在/public 中创建,但没有bundle.js.map 文件,也没有错误。使用 webpack 1,它按预期工作:

const webpack = require('webpack')

module.exports = 
  entry: ['babel-polyfill', './src/index.js'],
  output: 
    path: './public',
    filename: 'bundle.js'
  ,
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      
    ]
  ,
  devtool: 'source-map',
  plugins: [
    new webpack.DefinePlugin(
      'process.env': 
        NODE_ENV: '"production"'
        API_BASE_URL: `"$process.env.API_BASE_URL || '/api/v1'"`
      
    ),
    new webpack.optimize.UglifyJsPlugin()
  ]

CLI 输出:

> cross-env NODE_ENV=production webpack
Hash: 738da5a3824ffac20236
Version: webpack 2.2.0
Time: 13819ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  611 kB       0  [emitted]  [big]  main
   [2] ./~/react/react.js 56 bytes 0 [built]

【问题讨论】:

【参考方案1】:

看起来如果你使用 UglifyJSPlugin 源映射被静默禁用,除非你在那里重新启用它们:

plugins: [    
    new webpack.optimize.UglifyJsPlugin(sourceMap: true)
]

【讨论】:

以上是关于Webpack 2 开发工具不工作的主要内容,如果未能解决你的问题,请参考以下文章

Gulp和webpack的区别,是一种工具吗?

Webpack 开发服务器不热重载 .vue 文件

Webpack 速成

webpack开发与生产环境配置

说说webpack proxy工作原理?为啥能解决跨域

webpack 等前端工具一定要使用吗,感觉真的学起来好麻烦