Eu sou novo no webpack e preciso de uma mão para configurar os mapas de origem. Estou executando a webpack serve
partir da linha de comando, que é compilada com êxito. Mas eu realmente preciso de mapas de origem. Este é o meu 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()
]
};
Sou realmente novo no webpack e, apesar de os documentos não terem realmente ajudado, não tenho certeza de que esse problema seja específico.
The 'debug' property was removed in webpack 2.
Respostas:
Para usar o mapa de origem, você deve alterar o valor da
devtool
opção de para o valor disponível em , por exemplotrue
this list
source-map
fonte
denug
propriedade foi removido em Webpack 2.devtool
é suficiente. Não há necessidade de qualquer valor de depuração.Talvez alguém tenha esse problema em um ponto. Se você usar o
UglifyJsPlugin
in,webpack 2
precisará especificar explicitamente osourceMap
sinalizador. Por exemplo:fonte
devtool: 'source-map'
para que ele funcioneConfiguração mínima do webpack para jsx com mapas de origem:
Executando:
fonte
Se estiver otimizando para a produção do dev + , você pode tentar algo como isto em sua configuração:
Dos documentos:
Estou usando o webpack 2.1.0-beta.19
fonte
dev
variável é definida?.env
arquivos definidos ou sofrer mutaçõesprocess.env
. este é apenas um exemplo, mas poderia ser assim:const dev = process.env.development === true
No Webpack 2, tentei todas as 12 opções de devtool. As seguintes opções são vinculadas ao arquivo original no console e preservam os números de linha. Veja a nota abaixo re: lines apenas.
https://webpack.js.org/configuration/devtool
devtool best dev options
somente linhas
Os mapas de origem são simplificados para um único mapeamento por linha. Isso geralmente significa um único mapeamento por instrução (assumindo que o autor seja assim). Isso evita que você depure a execução no nível da instrução e defina pontos de interrupção nas colunas de uma linha. Combinar com minimizar não é possível, pois os minimizadores geralmente emitem apenas uma única linha.
REVISITANDO ISTO
Em um projeto grande, acho que ... o tempo de reconstrução do mapa de origem-eval é ~ 3.5s ... o tempo de reconstrução do mapa-fonte-inline é ~ 7s
fonte
Mesmo o mesmo problema que enfrentei, no navegador, ele mostrava o código compilado. Fiz abaixo as alterações no arquivo de configuração do webpack e está funcionando bem agora.
e em carregadores eu mantive o babel-loader como primeira opção
fonte
debug
propriedade foi removido em Webpack 2.include
opção é o que a corrigiu. Em Webpack 2 parece que isso:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]