账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    babel-loader和less-loader冲突导致babel-loader的include不生效问题
    68
    0
    问题描述babel-loader 和 less-loader一起用时 babel-loader的include配置会被影响到 我不引入less文件 就没问题webpack configconst path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");const { CleanWebpackPlugin } = require("clean-webpack-plugin");const config = { mode: "production", entry: "./src/index.ts", output: { path: path.resolve(__dirname, 'dist'), filename: "bundle.js", environment: { arrowFunction: false, const: false } }, module: { rules: [{ test: /\.ts$/, use: [{ loader: "babel-loader", options: { presets: [ ["@babel/env", { targets: { ie: "11" }, corejs: "3", useBuiltIns: "usage" }] ] } }, "ts-loader"], exclude: /node_modules/ }, { test: /\.js$/, use: [{ loader: "babel-loader", options: { presets: [ ["@babel/env", { targets: { ie: "11" }, corejs: "3", useBuiltIns: "usage" }] ] } }], include: /html-entities/, exclude: /node_modules/ }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', { loader: "postcss-loader", options: { postcssOptions: { plugins: [ [ "postcss-preset-env", { browsers: "last 2 versions" } ] ] } } }, 'less-loader' ], exclude: /node_modules/ }] }, plugins: [ new HtmlWebpackPlugin({ title: "ace-world", favicon: "./public/favorite.ico", template: "./public/index.html" }), new CleanWebpackPlugin() ], resolve: { extensions: [".js", ".ts"] }, devServer: { port: 8089, compress: true, client: { progress: true, }, }}module.exports = config引入less时不生效
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 水中看太阳 普通会员 1楼

      在Babel.js中，include和exclude选项用于指定哪些文件或模块应该被Babel-loader处理。如果include和exclude选项的值冲突，那么Babel-loader可能会出现无法正确识别include和exclude选项导致的include的babel-loader不生效的问题。

      以下是一些可能导致Babel-loader无法正确识别include和exclude选项的原因：

      1. 非ES6模块引用：如果include选项的值中包含非ES6模块的引用，如import('import')，那么Babel-loader可能无法正确识别这些模块，导致include选项的babel-loader无法正确应用。

      例如： javascript // main.js import('import/mypackage');

      在这种情况下，Babel-loader将忽略mypackage模块，并且不包含在include选项中。

      1. 非ES6模块配置：在exclude选项中，如果包含非ES6模块的配置，如module: { rules: [ { test: /\.js$/, use: 'babel-loader' } ] }，那么Babel-loader可能无法正确识别这些模块，导致include选项的babel-loader无法正确应用。

      例如： javascript // main.js import('mymodule').then(() => console.log('Hello from mymodule'));

      在这种情况下，Babel-loader将忽略mymodule模块，并且不包含在exclude选项中。

      1. 未正确配置include和exclude选项：在Babel.js的配置文件中，如果没有正确配置include和exclude选项，那么Babel-loader可能无法正确识别这些选项，导致include的babel-loader不生效。

      例如： javascript // config/index.js module.exports = { module: { rules: [ { test: /\.js$/, use: 'babel-loader', include: ['src/main.js'] } ] } };

      在这种情况下，include选项的babel-loader会根据src/main.js文件的路径来应用，但如果没有正确指定include选项的值，那么Babel-loader将无法正确应用。

      解决办法：

      1. 使用ES6模块引用：在include选项中，确保使用ES6模块的引用，如import('import/mypackage')。这将确保Babel-loader能够正确识别并应用这些模块。

      2. 使用ES6模块配置：在exclude选项中，确保包含非ES6模块的配置，如module: { rules: [ { test: /\.js$/, use: 'babel-loader' } ] }。这将确保Babel-loader能够正确识别并应用这些模块。

      3. 错误配置include和exclude选项：确保在Babel.js的配置文件中正确配置了include和exclude选项。例如，使用include: ['src/main.js']来指定src/main.js文件应该被Babel-loader处理。如果没有正确指定include选项的值，例如include: ['src/main.js', 'node_modules']，那么Babel-loader将无法正确应用。

      4. 使用@babel/core插件：如果你使用的是Babel >= 7，可以使用@babel/core插件来配置Babel。你可以将以下配置添加到module选项中，这样include选项的babel-loader将使用@babel/core插件来处理ES6模块。

      javascript module.exports = { module: { rules: [ { test: /\.js$/, use: 'babel-loader', include: ['src/main.js'] } ], plugins: [ '@babel/core' ] } };

      这样，include选项的babel-loader将使用@babel/core插件来处理ES6模块，并且不会忽略任何非ES6模块的配置。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部