Fix running tests. Update packages. Modify bundler #9
Conversation
| @@ -8,7 +8,7 @@ | |||
| module.exports = function(_path) { | |||
| return { | |||
| context: _path, | |||
| devtool: 'eval', | |||
| devtool: 'inline-source-map', | |||
There was a problem hiding this comment.
Для дев окружения лучше всего использовать eval-source-map. Он дает лучший маппинг артифактов на сорцы при максимальной скорости билдов.
При этом для прод сборок стоит использовать полноценный source-map.
| ] | ||
| } | ||
| }, | ||
| 'stylus-loader' |
There was a problem hiding this comment.
Для правильной поддержки сорсмапов stylus-loader нужно тоже указать параметр sourceMap: true.
| use: TextPlugin.extract([ | ||
| { | ||
| loader: 'css-loader', | ||
| options: { sourceMap: true } |
There was a problem hiding this comment.
css-loader должен применяться последним лоадером. За это отвечает параметр importLoaders. В данном конфиге у него должно быть значение 2.
В итоге конфиг должен выглядеть следующим образом:
[
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
context: rootAssetPath,
plugins() {
return [
autoprefixer({
remove: false,
browsers: ['last 5 versions']
}),
];
},
},
},
{
loader: 'stylus-loader',
options: {
sourceMap: true,
},
},
]| loader: 'file-loader', | ||
| options: { | ||
| context: rootAssetPath, | ||
| name: path.join('assets','static', '[ext]', '[name].[hash].[ext]') |
There was a problem hiding this comment.
Тут какой-то перебор с path.join.
{
name: path.join('assets','static', '[ext]', '[name].[hash].[ext]'),
}Равнозначно
{
name: 'assets/static/[ext]/[name].[hash].[ext]',
}Только последний короче и воспринимается проще.
| @@ -83,19 +99,16 @@ module.exports = function(_path) { | |||
| plugins: [ | |||
| new webpack.optimize.CommonsChunkPlugin({ | |||
| name: 'vendors', | |||
| filename: 'assets/js/vendors.[hash].js' | |||
| filename: path.join('assets', 'js', '[name].[hash].js'), | |||
There was a problem hiding this comment.
Тут тоже лучше обойтись без path.join
| use: { | ||
| loader: 'babel-loader', | ||
| options: { | ||
| presets: ['es2015'], |
There was a problem hiding this comment.
В резолвинге есть модули с расширением .jsx, но в лоадере нет react пресета? 🤔
| presets: ['es2015'], | ||
| cacheDirectory: true, | ||
| use: { | ||
| loader: 'babel-loader', |
There was a problem hiding this comment.
Конфиг лоадера дублируется. Нужно его вынести в переменную
| use: [ | ||
| 'style-loader', | ||
| 'css-loader', | ||
| 'stylus-loader'] |
There was a problem hiding this comment.
Что-то тестовый конфиг отличается от того что используется в дев и прод сборках. Это не правильно
| name: 'vendors', | ||
| filename: '[name].js', | ||
| children: true, | ||
| minChunks: module => /node_modules/.test(module.resource) && !/.css/.test(module.resource) |
There was a problem hiding this comment.
Дублирование конфига. Нужно вынести в общий модуль или не переопределять секцию plugins
| "file-loader": "0.11.2", | ||
| "glob": "7.1.2", | ||
| "html-webpack-plugin": "2.30.1", | ||
| "json-loader": "0.5.7", |
There was a problem hiding this comment.
json-loader не нужен начиная с webpack@2
vendorов. Теперь в вендор попадают только те пакеты, которые находятся в папкеnode_modulesи только тогда, когда они встречаются во входных точкахDevelopmentрежиме. Теперь в инспекторе можно видеть расположение стиля непосредственно в stylus файле, а не в итоговом css