Webpack2未生成JS源映射

我似乎无法让Webpack2生成JSSourceMap。我想删除闭包编译器插件可能会修复它，但没有

我的设置：

const path = require('path')
const DefinePlugin = require('webpack').DefinePlugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ClosureCompilerPlugin = require('webpack-closure-compiler')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  devtool: 'source-map',
  entry: {
    'client-bundle': path.join(__dirname, 'src/index')
  },
  module: {
    rules: [
      {
        test: [ /\.jsx?$/ ],
        include: [/src/],
        loader: 'babel-loader',
        exclude: [/\.test.js$/]
      },
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.html?$/, loader: 'html-loader' },
      { test: /\.(css|sass)$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' }) },
      { test: /\.(png|jpg|jpeg|gif|ico)$/, loader: 'file-loader?name=[path][name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
    ]
  },
  output: {
    filename: '[name].js',
    library: '[name]',
    libraryTarget: 'this',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([
      {from: path.join(__dirname, 'src/index.html')}
    ]),
    new ClosureCompilerPlugin({
      compiler: {
        language_in: 'ECMASCRIPT6',
        language_out: 'ECMASCRIPT5',
        compilation_level: 'SIMPLE'
      },
      concurrency: 3
    }),
    new DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    })
  ],
  target: 'web'
}

• 网页2.4.1
• 网页包关闭编译器2.1.4

我正在运行的命令：

const path = require('path')
const DefinePlugin = require('webpack').DefinePlugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ClosureCompilerPlugin = require('webpack-closure-compiler')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  devtool: 'source-map',
  entry: {
    'client-bundle': path.join(__dirname, 'src/index')
  },
  module: {
    rules: [
      {
        test: [ /\.jsx?$/ ],
        include: [/src/],
        loader: 'babel-loader',
        exclude: [/\.test.js$/]
      },
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.html?$/, loader: 'html-loader' },
      { test: /\.(css|sass)$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' }) },
      { test: /\.(png|jpg|jpeg|gif|ico)$/, loader: 'file-loader?name=[path][name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
    ]
  },
  output: {
    filename: '[name].js',
    library: '[name]',
    libraryTarget: 'this',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([
      {from: path.join(__dirname, 'src/index.html')}
    ]),
    new ClosureCompilerPlugin({
      compiler: {
        language_in: 'ECMASCRIPT6',
        language_out: 'ECMASCRIPT5',
        compilation_level: 'SIMPLE'
      },
      concurrency: 3
    }),
    new DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    })
  ],
  target: 'web'
}

网页包-d--颜色--进度

我的网页配置：

const path = require('path')
const DefinePlugin = require('webpack').DefinePlugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ClosureCompilerPlugin = require('webpack-closure-compiler')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  devtool: 'source-map',
  entry: {
    'client-bundle': path.join(__dirname, 'src/index')
  },
  module: {
    rules: [
      {
        test: [ /\.jsx?$/ ],
        include: [/src/],
        loader: 'babel-loader',
        exclude: [/\.test.js$/]
      },
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.html?$/, loader: 'html-loader' },
      { test: /\.(css|sass)$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' }) },
      { test: /\.(png|jpg|jpeg|gif|ico)$/, loader: 'file-loader?name=[path][name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
    ]
  },
  output: {
    filename: '[name].js',
    library: '[name]',
    libraryTarget: 'this',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([
      {from: path.join(__dirname, 'src/index.html')}
    ]),
    new ClosureCompilerPlugin({
      compiler: {
        language_in: 'ECMASCRIPT6',
        language_out: 'ECMASCRIPT5',
        compilation_level: 'SIMPLE'
      },
      concurrency: 3
    }),
    new DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    })
  ],
  target: 'web'
}

我已经尝试了此处指示的

devtool

的所有可能值：。我已经尝试将

create\u source\u map:true

添加到Closure编译器配置中的

compiler

对象中。似乎什么都不管用。这不是权限问题，因为捆绑包生成得很好

编辑： 因此，我将webpack命令更改为使用

-p

选项，而不是

-d

。这产生了一个错误：

ERROR in client.js from UglifyJs
TypeError: Cannot read property 'sections' of null

---

这很奇怪，因为我没有使用UglifyJS插件。更奇怪的是，我只能通过删除闭包编译器插件来消除这个错误。现在，事情构建正确，生成了源代码映射，但我没有压缩。

结果是我的闭包编译器配置出现了一些问题（在我将webpack切换到

-p

命令行选项之后）

由于Babel已经在传输，因此属性中的

language_需要设置为
ECMAScript 5
，而不是
ECMAScript 6

我还需要将

create\u source\u map:true

添加到

编译器

对象中

这是我完整的工作网页包配置（注意：我将捆绑包的名称从“客户端捆绑包”更改为“客户端”）：