准备学习Web前端工程化的内容,做个记录,以后需要的时候方便查找:
webpack只能打包处理.js相关的文件,其他资源可以使用插件的方式来曲线救国。
1 安装babel转换器相关的包,运行命令:
npm i babel-loader @babel/core @babel/runtime -D
2 安装babel语法插件相关的包,命令如下:
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3 在项目根目录,创建并配置babel.config.js文件
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
4 在webpack.config.js中,配置module -> rules数组, 添加loader规则如下:
rules:[
// exclude为排除项, 表示babel-loader不需要处理node_modules中的js文件
{ test:/\.js$/, use:"babel-loader", exclude:/node_modules/ }
]