Skip to content

Commit

Permalink
feat(webpack-runner): 适配新版cssModules配置
Browse files Browse the repository at this point in the history
  • Loading branch information
@Littly
Littly committed Dec 17, 2018
1 parent 0df6b30 commit a7a6b23
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 81 deletions.
1 change: 1 addition & 0 deletions packages/taro-webpack-runner/package.json
View file
Expand Up @@ -74,6 +74,7 @@
"@types/node": "^10.3.5",
"@types/resolve": "^0.0.8",
"@types/webpack": "^4.4.3",
"@types/webpack-chain": "^5.0.0",
"@types/webpack-dev-server": "^2.9.4",
"@types/webpack-merge": "^4.1.3",
"npm-run-all": "^4.1.2",
Expand Down
20 changes: 0 additions & 20 deletions packages/taro-webpack-runner/src/config/base.conf.ts
View file
Expand Up @@ -23,26 +23,6 @@ export default () => {
babelLoader: getBabelLoader([defaultBabelLoaderOption])
}
},
jsxxx: {
test: /\.jsx?$/,
include: [/aaaa/],
use: {
babelLoader: {
loader: require.resolve('babel-loader'),
options: {
plugins: [
require.resolve('babel-plugin-syntax-dynamic-import'),
[
require.resolve('babel-plugin-transform-react-jsx'),
{
pragma: 'Nerv.createElement'
}
]
]
}
}
}
},
media: {
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: {
Expand Down
17 changes: 8 additions & 9 deletions packages/taro-webpack-runner/src/config/postcss.conf.ts
View file
@@ -1,6 +1,5 @@
import * as autoprefixer from 'autoprefixer';
import * as path from 'path';
import * as modules from 'postcss-modules';
import * as constparse from 'postcss-plugin-constparse';
import * as pxtransform from 'postcss-pxtransform';
import { sync as resolveSync } from 'resolve';
Expand All @@ -26,10 +25,10 @@ const defaultPxtransformOption: {
platform: 'h5'
}
}
const defaultCssModulesOption = {
enable: false,
config: {}
}
// const defaultCssModulesOption = {
// enable: false,
// config: {}
// }
const defaultConstparseOption = {
constants: [{
key: 'taro-tabbar-height',
Expand Down Expand Up @@ -58,7 +57,7 @@ export const getPostcssPlugins = function ({

const autoprefixerOption = recursiveMerge({}, defaultAutoprefixerOption, postcssOption.autoprefixer)
const pxtransformOption = recursiveMerge({}, defaultPxtransformOption, postcssOption.pxtransform)
const cssModulesOption = recursiveMerge({}, defaultCssModulesOption, postcssOption.cssModules)
// const cssModulesOption = recursiveMerge({}, defaultCssModulesOption, postcssOption.cssModules)

if (autoprefixerOption.enable) {
plugins.push(autoprefixer(autoprefixerOption.config))
Expand All @@ -68,9 +67,9 @@ export const getPostcssPlugins = function ({
plugins.push(pxtransform(pxtransformOption.config))
}

if (cssModulesOption.enable) {
plugins.push(modules(cssModulesOption.config))
}
// if (cssModulesOption.enable) {
// plugins.push(modules(cssModulesOption.config))
// }

plugins.push(constparse(defaultConstparseOption))

Expand Down
7 changes: 6 additions & 1 deletion packages/taro-webpack-runner/src/config/prod.conf.ts
View file
Expand Up @@ -148,7 +148,12 @@ export default function (config: Partial<BuildConfig>): any {
staticDirectory
}),
plugin,
optimization: { minimizer }
optimization: {
minimizer,
splitChunks: {
name: false
}
}
})
return chain
}
125 changes: 84 additions & 41 deletions packages/taro-webpack-runner/src/util/chain.ts
View file
Expand Up @@ -52,6 +52,13 @@ const defaultFontUrlLoaderOption = {
const defaultImageUrlLoaderOption = {
limit: 10240
}
const defaultCssModuleOption: PostcssOption.cssModules = {
enable: false,
config: {
namingPattern: 'global',
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}

const getLoader = (loaderName: string, options: Option) => {
return {
Expand Down Expand Up @@ -163,19 +170,31 @@ const getModule = ({
module,
plugins
}) => {

const postcssOption: PostcssOption = module.postcss || {}

const styleLoader = getStyleLoader([{ sourceMap: enableSourceMap }, styleLoaderOption])

const extractCssLoader = getExtractCssLoader()

const lastCssLoader = enableExtract ? extractCssLoader : styleLoader
const lastStyleLoader = enableExtract ? extractCssLoader : styleLoader

const cssModuleOptions: PostcssOption.cssModules = recursiveMerge({}, defaultCssModuleOption, postcssOption.cssModules)

const cssOptions = [
{
importLoaders: 1,
sourceMap: enableSourceMap,
modules: postcssOption.cssModules && postcssOption.cssModules.enable
modules: false
},
cssLoaderOption
]
const cssOptionsWithModule = [
{
importLoaders: 1,
sourceMap: enableSourceMap,
modules: cssModuleOptions.config!.namingPattern === 'module' ? true : 'global',
localIdentName: cssModuleOptions.config!.generateScopedName
},
cssLoaderOption
]
Expand All @@ -185,6 +204,40 @@ const getModule = ({
* https://github.com/webpack-contrib/css-loader/releases/tag/v1.0.0
*/
const cssLoader = getCssLoader(cssOptions)
const cssLoaders = [{
enforce: 'post',
use: [lastStyleLoader, cssLoader]
}]

if (cssModuleOptions.enable) {
const cssLoaderWithModule = getCssLoader(cssOptionsWithModule)
let cssModuleConditionName
let cssModuleCondition

if (cssModuleOptions.config!.namingPattern === 'module') {
cssModuleConditionName = 'include'
cssModuleCondition = {
and: [
{ include: /(.*\.module).*\.(css|s[ac]ss|less|styl)\b/},
{ exclude: /\bnode_modules\b/ }
]
}
} else {
cssModuleConditionName = 'include'
cssModuleCondition = {
and: [
{ exclude: /(.*\.global).*\.(css|s[ac]ss|less|styl)\b/ },
{ exclude: /\bnode_modules\b/ }
]
}
}
cssLoaders.unshift({
enforce: 'post',
[cssModuleConditionName]: [cssModuleCondition],
use: [lastStyleLoader, cssLoaderWithModule]
})
}

const postcssLoader = getPostcssLoader([
{ sourceMap: enableSourceMap },
{
Expand All @@ -205,7 +258,33 @@ const getModule = ({

const stylusLoader = getStylusLoader([{ sourceMap: enableSourceMap }, stylusLoaderOption])

const rule: Option = {}
const rule: {
[key: string]: any
} = {}

rule.sass = {
test: /\.(s[ac]ss)\b/,
enforce: 'pre',
use: [resolveUrlLoader, sassLoader]
}
rule.less = {
test: /\.less\b/,
enforce: 'pre',
use: [lessLoader]
}
rule.styl = {
test: /\.styl\b/,
enforce: 'pre',
use: [stylusLoader]
}
rule.postcss = {
test: /\.(css|s[ac]ss|less|styl)\b/,
use: [postcssLoader]
}
rule.style = {
test: /\.(css|s[ac]ss|less|styl)\b/,
oneOf: cssLoaders
}

rule.jsx = {
use: {
Expand All @@ -217,7 +296,6 @@ const getModule = ({
}
}
}

rule.media = {
use: {
urlLoader: {
Expand Down Expand Up @@ -248,30 +326,6 @@ const getModule = ({
}
}
}
rule.sass = {
test: /\.(css|scss|sass)(\?.*)?$/,
use: [lastCssLoader, cssLoader, postcssLoader, resolveUrlLoader, sassLoader]
}
rule.less = {
test: /\.less(\?.*)?$/,
use: [lastCssLoader, cssLoader, postcssLoader, lessLoader]
}
rule.styl = {
test: /\.styl(\?.*)?$/,
use: [lastCssLoader, cssLoader, postcssLoader, stylusLoader]
}
rule.sassInNodemodules = {
test: /\.(css|scss|sass)(\?.*)?$/,
use: [lastCssLoader, cssLoader, sassLoader]
}
rule.lessInNodemodules = {
test: /\.less(\?.*)?$/,
use: [lastCssLoader, cssLoader, lessLoader]
}
rule.stylInNodemodules = {
test: /\.styl(\?.*)?$/,
use: [lastCssLoader, cssLoader, stylusLoader]
}

const isNodemodule = filename => /\bnode_modules\b/.test(filename)
if (Array.isArray(esnextModules) && esnextModules.length) {
Expand All @@ -286,21 +340,10 @@ const getModule = ({
const notTaroModules = filename => isEsnextModule(filename) ? false : isNodemodule(filename)
/* 通过taro处理 */
rule.jsx.exclude = [notTaroModules]
rule.sass.exclude = [notTaroModules]
rule.less.exclude = [notTaroModules]
rule.styl.exclude = [notTaroModules]

rule.sassInNodemodules.include = [notTaroModules]
rule.lessInNodemodules.include = [notTaroModules]
rule.stylInNodemodules.include = [notTaroModules]
rule.postcss.exclude = [notTaroModules]
} else {
rule.jsx.exclude = [isNodemodule]
rule.sass.exclude = [isNodemodule]
rule.less.exclude = [isNodemodule]
rule.styl.exclude = [isNodemodule]
rule.sassInNodemodules.include = [isNodemodule]
rule.lessInNodemodules.include = [isNodemodule]
rule.stylInNodemodules.include = [isNodemodule]
rule.postcss.exclude = [isNodemodule]
}
return { rule }
}
Expand Down
36 changes: 26 additions & 10 deletions packages/taro-webpack-runner/src/util/types.ts
View file
Expand Up @@ -8,17 +8,25 @@ export interface Option {
[key: string]: any;
};

type TogglableOptions = {
enable: boolean,
config: Option
type TogglableOptions<T = Option> = {
enable?: boolean;
config?: T;
}

export namespace PostcssOption {
export type cssModules = TogglableOptions<{
namingPattern: 'global' | string;
generateScopedName: string;
}>;
}

export interface PostcssOption {
autoprefixer?: TogglableOptions;
pxtransform?: TogglableOptions;
cssModules?: TogglableOptions;
cssModules?: PostcssOption.cssModules;
}


export interface Chain {
[key: string]: any;
}
Expand All @@ -36,7 +44,7 @@ export interface TaroH5Config {
router?: {
mode?: 'hash' | 'browser';
custouRoutes?: Option;
},
};
devServer: webpackDevServer.Configuration;
enableSourceMap: boolean;
enableExtract: boolean;
Expand Down Expand Up @@ -66,7 +74,18 @@ export interface TaroH5Config {
export interface TaroPlugins {
babel: Option;
csso?: TogglableOptions;
uglify?: TogglableOptions
uglify?: TogglableOptions;
}

export interface CopyOptions {
patterns: {
from: string;
to: string;
ignore: string[]
}[];
options: {
ignore: string[];
};
}

export interface TaroBaseConfig {
Expand All @@ -75,10 +94,7 @@ export interface TaroBaseConfig {
publicPath: string;
staticDirectory: string;
chunkDirectory: string;
copy: {
patterns: object[];
options: object[]
};
copy: CopyOptions;

designWidth: number;
deviceRatio?: number;
Expand Down

0 comments on commit a7a6b23

Please sign in to comment.