webpack 安装babel处理ES6语法
1.package.json 下6个包(版本不同可能会出错,注意版本)
babel-loader:加载器 @babel/core:babel核心包,babel-loader的核心依赖 @babel/preset-env:ES语法分析包 @babel/runtime和@babel/plugin-transform-runtime:babel 编译时只转换语法,几乎可以编译所有时新的 JavaScript 语法,但并不会转化BOM(浏览器)里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。这2个包就是来搞定这些api的。 @babel/plugin-proposal-class-properties:用来解析类的属性的。
原网址:https://www.cnblogs.com/ldq678/p/10448374.html
npm i @babel/core babel-loader @babel/plugin-transform-runtime -D
npm i @babel/preset-env @babel/plugin-proposal-class-properties @babel/runtime -D
{ "name": "study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot", "dev1": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.7.7", "@babel/plugin-proposal-class-properties": "^7.7.4", "@babel/plugin-transform-runtime": "^7.7.6", "@babel/preset-env": "^7.7.7", "@babel/runtime": "^7.7.7", "babel-loader": "^8.0.6", "css-loader": "^3.4.0", "file-loader": "^5.0.2", "html-webpack-plugin": "^3.2.0", "less": "^3.10.3", "less-loader": "^5.0.0", "open-iconic": "git+https://github.com/iconic/open-iconic.git", "sass": "^1.24.0", "sass-loader": "^8.0.0", "style-loader": "^1.1.2", "url-loader": "^3.0.0", "webpack": "^4.41.5", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.10.1" }, "dependencies": { "bootstrap": "^4.4.1" } }
2.babelrc 文件下
{ "presets": [ "@babel/env" ], "plugins": [ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ] }
3.webpack.config.js 下添加 'babel-loader'
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //处理 less 文件 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //处理 sass 文件 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //处理css 里面的图片 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader?limit&name[hash:8]-[name].[ext]'] }, //处理字体文件 { test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader' }, //处理es6 语法 exclude 排除 node_modules 下面的文件 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, ] },