refactor sryle-loader

makes code more clear and (temporary) fixing dev source maps when extractCSS is on
This commit is contained in:
Pooya Parsa 2017-12-28 19:00:31 +03:30
parent 6fabea392d
commit 4e22416002
3 changed files with 55 additions and 81 deletions

View File

@ -1,7 +1,6 @@
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { cloneDeep } = require('lodash')
const { join, resolve } = require('path')
const webpack = require('webpack')
const { isUrl, urlJoin } = require('../../common/utils')
const TimeFixPlugin = require('./plugins/timefix')
const WarnFixPlugin = require('./plugins/warnfix')
@ -116,25 +115,6 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
config.plugins.push(new ExtractTextPlugin(extractOptions))
}
// --------------------------------------
// Dev specific config
// --------------------------------------
if (this.options.dev) {
//
}
// --------------------------------------
// Production specific config
// --------------------------------------
if (!this.options.dev) {
// This is needed in webpack 2 for minify CSS
config.plugins.push(
new webpack.LoaderOptionsPlugin({
minimize: true
})
)
}
// Clone deep avoid leaking config between Client and Server
return cloneDeep(config)
}

View File

@ -62,13 +62,6 @@ module.exports = function webpackServerConfig() {
}
})
// --------------------------------------
// Production specific config
// --------------------------------------
if (!this.options.dev) {
}
// Extend config
if (typeof this.options.build.extend === 'function') {
const isDev = this.options.dev

View File

@ -2,75 +2,76 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { join } = require('path')
module.exports = function styleLoader(ext, loaders = [], isVueLoader = false) {
// Normalize loaders
loaders = (Array.isArray(loaders) ? loaders : [loaders]).map(loader => {
if (typeof loader === 'string') {
loader = { loader }
}
return Object.assign({
options: {
sourceMap: this.options.build.cssSourceMap
}
}, loader)
})
const sourceMap = Boolean(this.options.build.cssSourceMap)
// https://github.com/postcss/postcss-loader
let postcssLoader
if (!isVueLoader && this.options.build.postcss) {
postcssLoader = {
loader: 'postcss-loader',
options: this.options.build.postcss
}
// Normalize loaders
loaders = (Array.isArray(loaders) ? loaders : [loaders])
.map(loader => Object.assign({ options: { sourceMap } }, typeof loader === 'string' ? { loader } : loader))
// Prepare vue-style-loader
// https://github.com/vuejs/vue-style-loader
const vueStyleLoader = {
loader: 'vue-style-loader',
options: { sourceMap }
}
// -- Configure additional loaders --
// style-resources-loader
// https://github.com/yenshih/style-resources-loader
if (this.options.build.styleResources) {
loaders.push({
loader: 'style-resources-loader',
options: Object.assign({ sourceMap }, this.options.build.styleResources)
})
}
// postcss-loader
// vue-loader already provides it's own
// https://github.com/postcss/postcss-loader
if (!isVueLoader && this.options.build.postcss) {
loaders.unshift({
loader: 'postcss-loader',
options: Object.assign({ sourceMap }, this.options.build.postcss)
})
}
// css-loader
// https://github.com/webpack-contrib/css-loader
const cssLoader = {
loaders.unshift({
loader: 'css-loader',
options: {
minimize: true,
importLoaders: 1,
sourceMap: this.options.build.cssSourceMap,
sourceMap,
minimize: !this.options.dev,
importLoaders: loaders.length, // Important!
alias: {
'/static': join(this.options.srcDir, 'static'),
'/assets': join(this.options.srcDir, 'assets')
}
}
}
})
// https://github.com/vuejs/vue-style-loader
const vueStyleLoader = {
loader: 'vue-style-loader',
options: {
sourceMap: this.options.build.cssSourceMap
}
}
if (this.options.build.extractCSS) {
const extraction = ExtractTextPlugin.extract({
fallback: vueStyleLoader,
use: [
cssLoader,
postcssLoader,
...loaders
].filter(l => l)
// -- With extractCSS --
// TODO: Temporary disabled in dev mode for fixing source maps
// (We need `source-map` devtool for *.css modules)
if (this.options.build.extractCSS && !this.options.dev) {
// ExtractTextPlugin
// https://github.com/webpack-contrib/extract-text-webpack-plugin
const extractLoader = ExtractTextPlugin.extract({
use: loaders,
fallback: vueStyleLoader
})
return this.options.dev ? ['css-hot-loader'].concat(extraction) : extraction
}
// https://github.com/yenshih/style-resources-loader
let styleResourcesLoader
if (this.options.build.styleResources) {
styleResourcesLoader = {
loader: 'style-resources-loader',
options: this.options.build.styleResources
// css-hot-loader
// https://github.com/shepherdwind/css-hot-loader
const hotLoader = {
loader: 'css-hot-loader',
options: { sourceMap }
}
return this.options.dev ? [ hotLoader ].concat(extractLoader) : extractLoader
}
return [
vueStyleLoader,
cssLoader,
postcssLoader,
...loaders,
styleResourcesLoader
].filter(l => l)
// -- Without extractCSS --
return [ vueStyleLoader ].concat(loaders)
}