javascript - react - webpack wikipedia

¿Cómo genero mapas fuente cuando uso babel y webpack?

Question

Soy nuevo en webpack, y necesito una mano en la configuración para generar mapas fuente. Estoy ejecutando webpack serve desde la línea de comandos, que se compila correctamente. Pero realmente necesito mapas fuente. Este es mi webpack.config.js .

var webpack = require(''webpack'');

module.exports = {

  output: {
    filename: ''main.js'',
    publicPath: ''/assets/''
  },

  cache: true,
  debug: true,
  devtool: true,
  entry: [
      ''webpack/hot/only-dev-server'',
      ''./src/components/main.js''
  ],

  stats: {
    colors: true,
    reasons: true
  },

  resolve: {
    extensions: ['''', ''.js'', ''.jsx''],
    alias: {
      ''styles'': __dirname + ''/src/styles'',
      ''mixins'': __dirname + ''/src/mixins'',
      ''components'': __dirname + ''/src/components/'',
      ''stores'': __dirname + ''/src/stores/'',
      ''actions'': __dirname + ''/src/actions/''
    }
  },
  module: {
    preLoaders: [{
      test: //.(js|jsx)$/,
      exclude: /node_modules/,
      loader: ''jsxhint''
    }],
    loaders: [{
      test: //.(js|jsx)$/,
      exclude: /node_modules/,
      loader: ''react-hot!babel-loader''
    }, {
      test: //.sass/,
      loader: ''style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax''
    }, {
      test: //.scss/,
      loader: ''style-loader!css!sass''
    }, {
      test: //.(png|jpg|woff|woff2)$/,
      loader: ''url-loader?limit=8192''
    }]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

Soy realmente nuevo en webpack, y mirar los documentos realmente no ha ayudado, ya que no estoy seguro de a qué se debe este problema.

Answer 1

Configuración mínima del paquete web para jsx con mapas de origen:

var path = require(''path'');
var webpack = require(''webpack'');

module.exports = {
  entry: `./src/index.jsx` ,
  output: {
    path:  path.resolve(__dirname,"build"),
    filename: "bundle.js"
  },
  devtool: ''eval-source-map'',
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: ''babel-loader'',
        exclude: /node_modules/,
        query: {
          presets: [''es2015'', ''react'']
        }
      }
    ]
  },
};

Ejecutándolo:

Jozsefs-MBP:react-webpack-babel joco$ webpack -d
Hash: c75d5fb365018ed3786b
Version: webpack 1.13.2
Time: 3826ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   1.5 MB       0  [emitted]  main
bundle.js.map  1.72 MB       0  [emitted]  main
    + 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$

Answer 2

En Webpack 2 probé las 12 opciones de devtool. Las siguientes opciones enlazan con el archivo original en la consola y conservan los números de línea. Consulte la nota a continuación con respecto a las líneas solamente.

https://webpack.js.org/configuration/devtool

las mejores opciones de desarrollo de devtool

                                build   rebuild      quality                       look
eval-source-map                 slow    pretty fast  original source               worst
inline-source-map               slow    slow         original source               medium
cheap-module-eval-source-map    medium  fast         original source (lines only)  worst
inline-cheap-module-source-map  medium  pretty slow  original source (lines only)  best

solo líneas

Los mapas de origen se simplifican a una sola asignación por línea. Esto generalmente significa una sola asignación por declaración (suponiendo que su autor sea de esta manera). Esto le impide depurar la ejecución a nivel de instrucción y establecer puntos de interrupción en las columnas de una línea. Combinar con minimizar no es posible ya que los minimizadores generalmente solo emiten una sola línea.

REVISANDO ESTO

En un proyecto grande que encuentro ... el tiempo de reconstrucción de eval-source-map es ~ 3.5s ... el tiempo de reconstrucción de inline-source-map es ~ 7s

Answer 3

Incluso el mismo problema que enfrenté, en el navegador mostraba código compilado. He realizado los siguientes cambios en el archivo de configuración del paquete web y ahora funciona bien.

 devtool: ''#inline-source-map'',
 debug: true,

y en cargadores mantuve babel-loader como primera opción

loaders: [
  {
    loader: "babel-loader",
    include: [path.resolve(__dirname, "src")]
  },
  { test: //.js$/, exclude: [/app//lib/, /node_modules/], loader: ''ng-annotate!babel'' },
  { test: //.html$/, loader: ''raw'' },
  {
    test: //.(jpe?g|png|gif|svg)$/i,
    loaders: [
      ''file?hash=sha512&digest=hex&name=[hash].[ext]'',
      ''image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false''
    ]
  },
  {test: //.less$/, loader: "style!css!less"},
  { test: //.styl$/, loader: ''style!css!stylus'' },
  { test: //.css$/, loader: ''style!css'' }
]

Answer 4

Para usar el mapa fuente, debe cambiar el valor de la opción devtool de true al valor disponible en devtool , por ejemplo source-map

devtool: ''source-map''

devtool : ''source-map'' : se emite un SourceMap.

Answer 5

Puedes probar Dawn, es más simple

https://github.com/alibaba/dawn

ejemplo:

Instalar en pc

npm i dawn -g

Agregue un archivo .dawn.yml a su proyecto

build:
  - name: webpack
    output: ./dist
    entry: ./src/*.js
    template: ./assets/*.html
    sourceMap: true

Ejecute el siguiente comando

dn build

Puedes completar la compilación

Answer 6

Quizás alguien más tenga este problema en algún momento. Si usa UglifyJsPlugin en el UglifyJsPlugin webpack 2 , debe especificar explícitamente el indicador sourceMap . Por ejemplo:

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

Answer 7

Si está optimizando para la producción de dev + , puede probar algo como esto en su configuración:

{
  devtool: dev ? ''eval-cheap-module-source-map'' : ''source-map'',
}

De los documentos:

• devtool: "eval-cheap-module-source-map" ofrece SourceMaps que solo asigna líneas (no asignaciones de columnas) y es mucho más rápido
• devtool: "source-map" no puede almacenar en caché SourceMaps para módulos y necesita regenerar SourceMap completo para el fragmento. Es algo para la producción.

Estoy usando webpack 2.1.0-beta.19