webpack-module-rules，webpack-resolve-extensions&alias

最新推荐文章于 2024-05-15 11:45:46 发布

weixin_33853827

最新推荐文章于 2024-05-15 11:45:46 发布

阅读量186

点赞数

文章标签： webpack ViewUI

原文链接：https://juejin.im/post/5b6037825188251aa30c7c57

版权

本文深入讲解了Webpack中module rules的功能，包括如何使用特定loader将.ts文件转换为.js文件，以及如何将.scss文件转换为.css文件。通过实际示例介绍了如何安装和配置所需的loader，如ts-loader和sass-loader。此外，还探讨了如何利用webpack的resolve extensions和alias功能来简化导入路径，提高代码的可读性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack-module-rules有什么用
例如：
1、对.ts文件做.js文件转换
2、对.scss文件做.css文件转换
首选，要安装对应的loader
npm install ts-loader --save-dev
npm install sass-loader --save-dev
然后
module: {
    rules: [
        {
            test: /\.ts$/,
            use: 'ts-loader'
        },
        {
            test: /\.sass$/,
            use: 'sass-loader'
        }
    ]
}

webpack-resolve-extensions&alias
webpack-resolve-extensions
自动解析的扩展
比如：
resolve: {
    extensions: ['.js','.json']
}
import a from './a' // a.js 不用写 './a.js'
// 用户引入时可以不带扩展

webpack-resolve-alias 
创建import和from的别名，让引用变得简单复制代码

转载于:https://juejin.im/post/5b6037825188251aa30c7c57