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