Я новичок в Webpack, и мне нужна помощь в настройке для создания исходных карт. Я бегу webpack serve
из командной строки, которая успешно компилируется. Но мне действительно нужны исходные карты. Это мое 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()
]
};
Я действительно новичок в вебпаке, и смотрю, хотя документы действительно не помогли, так как я не уверен, к чему относится эта проблема.
The 'debug' property was removed in webpack 2.
Ответы:
Для того , чтобы карта источника использования, вы должны изменить
devtool
параметр значение отtrue
до значения , которое доступно вthis list
, например ,source-map
источник
denug
Свойство было удалено в WebPack 2.devtool
достаточно. Не нужно никаких отладочных значений.Может быть, кто-то еще имеет эту проблему в какой-то момент. Если вы используете
UglifyJsPlugin
in,webpack 2
вам нужно явно указатьsourceMap
флаг. Например:источник
devtool: 'source-map'
чтобы это работалоМинимальная конфигурация webpack для jsx с исходными картами:
Запуск это:
источник
При оптимизации для разработки dev + , вы можете попробовать что-то вроде этого в вашей конфигурации:
Из документов:
Я использую webpack 2.1.0-beta.19
источник
dev
переменная?.env
определенные файлы или мутации вprocess.env
. это только пример, но это может выглядеть так:const dev = process.env.development === true
На Webpack 2 я перепробовал все 12 вариантов devtool. Следующие параметры ссылаются на исходный файл в консоли и сохраняют номера строк. Смотрите примечание ниже: только строки.
https://webpack.js.org/configuration/devtool
devtool лучшие варианты разработки
только линии
Исходные карты упрощены до одного сопоставления на строку. Обычно это означает одно сопоставление для каждого оператора (если вы, автор, именно так). Это предотвращает отладку выполнения на уровне оператора и настройки точек останова на столбцах строки. Объединение с минимизацией невозможно, поскольку минимизаторы обычно излучают только одну строку.
ПЕРЕСМОТР ЭТОГО
В большом проекте я нахожу ... время перестройки eval-source-map составляет ~ 3,5 с ... время перестроения inline-source-map составляет ~ 7 с
источник
Даже с той же проблемой, с которой я столкнулся, в браузере показывался скомпилированный код. Я сделал ниже изменения в конфигурационном файле webpack, и теперь он работает нормально.
и в загрузчиках я оставил babel-loader в качестве первого варианта
источник
debug
Свойство было удалено в WebPack 2.include
опции это то, что исправило ее для меня. В webpack 2 это выглядит так:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]