webpack#RuleSetRule TypeScript Examples

The following examples show how to use webpack#RuleSetRule. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.ts    From reskript with MIT License 6 votes vote down vote up 
script = async (entry: WebpackBuildEntry): Promise<RuleSetRule> => {
    const {cwd, projectSettings: {build: {script: {babel}}}} = entry;
    const use = createUseWith(entry);
    const isProjectSource = isProjectSourceIn(cwd);
    const rulesWithBabelRequirement = async (requireBabel: boolean) => {
        return {
            oneOf: [
                // 在项目源码内的`*?worker`，需要`worker-loader`
                {
                    resourceQuery: /worker/,
                    use: await use('worker', requireBabel && 'babel'),
                },
                // 项目源码内的其它文件，需要`eslint`检查
                {
                    resource: isProjectSource,
                    use: await use(requireBabel && 'babel'),
                },
                // 第三方代码，按需过`babel`
                {
                    use: await use(requireBabel && 'babel'),
                },
            ],
        };
    };
    const [hasBabel, noBabel] = await Promise.all([rulesWithBabelRequirement(true), rulesWithBabelRequirement(false)]);

    return {
        test: /\.[jt]sx?$/,
        oneOf: [
            {
                resource: normalizeRuleMatch(cwd, babel),
                ...hasBabel,
            },
            noBabel,
        ],
    };
}
Example #2
Source File: index.ts    From reskript with MIT License 6 votes vote down vote up 
less = async (entry: WebpackBuildEntry): Promise<RuleSetRule> => {
    const {cwd, usage, projectSettings: {build: {style: {modules, extract}}}} = entry;
    const use = createUseWith(entry);
    const final = (usage === 'build' && extract) ? 'cssExtract' : 'style';
    const uses = [
        use(final, 'css', 'postcss', 'less'),
        use('classNames', final, 'cssModules', 'postcss', 'less'),
    ] as const;
    const [globalLess, less] = await Promise.all(uses);

    return {
        test: /\.less$/,
        oneOf: [
            {
                test: /\.global\.less$/,
                use: globalLess,
            },
            {
                resource: normalizeRuleMatch(cwd, modules),
                use: less,
            },
            {
                use: globalLess,
            },
        ],
    };
}
Example #3
Source File: index.ts    From reskript with MIT License 6 votes vote down vote up 
css = async (entry: WebpackBuildEntry): Promise<RuleSetRule> => {
    const {cwd, usage, projectSettings: {build: {style: {modules, extract}}}} = entry;
    const use = createUseWith(entry);
    const final = (usage === 'build' && extract) ? 'cssExtract' : 'style';
    const uses = [
        use(final, 'css', 'postcss'),
        use('classNames', final, 'cssModules', 'postcss'),
    ] as const;
    const [globalCss, css] = await Promise.all(uses);

    return {
        test: /\.css$/,
        oneOf: [
            {
                test: /\.global\.css$/,
                use: globalCss,
            },
            {
                resource: normalizeRuleMatch(cwd, modules),
                use: css,
            },
            {
                use: globalCss,
            },
        ],
    };
}
Example #4
Source File: index.ts    From reskript with MIT License 6 votes vote down vote up 
image = async (entry: WebpackBuildEntry): Promise<RuleSetRule> => {
    const use = createUseWith(entry);

    return {
        test: /\.(jpe?g|png|gif)$/i,
        use: await use('img'),
        ...assetModuleConfig(entry),
    };
}
Example #5
Source File: index.ts    From reskript with MIT License 6 votes vote down vote up 
svg = async (entry: WebpackBuildEntry): Promise<RuleSetRule> => {
    const {mode} = entry;
    const use = createUseWith(entry);
    const uses = [
        use('babel', 'svgToComponent', mode === 'production' && 'svgo'),
        use(mode === 'production' && 'svgo'),
    ] as const;
    const [svgComponent, svg] = await Promise.all(uses);

    return {
        test: /\.svg$/,
        oneOf: [
            {
                // 如果挂了`?react`的，就直接转成组件返回
                resourceQuery: /^\?react$/,
                use: svgComponent,
            },
            {
                resourceQuery: {
                    not: /^\?react$/,
                },
                use: svg,
                ...assetModuleConfig(entry),
            },
        ],
    };
}
Example #6
Source File: webpack.rules.ts    From TsingHuaELTHelper with GNU General Public License v3.0 5 votes vote down vote up 
rules: RuleSetRule[] = [
    //webpack本身就可以识别js文件，所以不需要额外定义规则
    {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
            {
                loader: "babel-loader",
            },
        ],
    },
    {
        test: /\.tsx?$/,
        use: [
            "babel-loader",
            {
                loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                },
            },
        ],
        exclude: /node_modules/,
    },
    {
        test: /\.(post)?css$/,
        use: [
            "style-loader",
            {
                loader: "css-loader",
                options: {
                    importLoaders: 1,
                },
            },
            "postcss-loader",
        ],
    },
    {
        test: /\.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/i,
        use: [
            {
                loader: "url-loader",
                // options: {
                //     limit: 8192,
                // },
            },
        ],
    },
    {
        test: /\.vue$/,
        use: "vue-loader",
        exclude: /node_modules/,
    },
]
Example #7
Source File: index.ts    From reskript with MIT License 5 votes vote down vote up 
file = async (entry: WebpackBuildEntry): Promise<RuleSetRule> => {
    return {
        test: /\.(eot|ttf|woff|woff2)(\?.+)?$/,
        ...assetModuleConfig(entry),
    };
}
Example #8
Source File: index.ts    From vanilla-extract with MIT License 5 votes vote down vote up 
test: RuleSetRule['test'];