webpack学习笔记七：配置babel

安装依赖

babel-loader 该软件包允许使用Babel和webpack转换JavaScript文件。文档地址@babel/core Babel的核心，各种转换的方法都写在这里 官方文档地址@babel/preset-env 智能的编译js，只需要指定你要支持的浏览器范围，就可以智能的编译。 官方文档地址 cnpm install -D babel-loader @babel/core @babel/preset-env

配置文件

在加载器中添加了对babel的处理

// 生成HTML const HtmlWebpackPlugin = require("html-webpack-plugin"); // 清空文件夹 const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 提取css文件 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = function (env, argv) { return { // 入口 entry: { main: "./src/main.js", test: "./src/js/test.js", }, // 出口 output: { path: `${__dirname}/dist`, // 公用部分代码块文件名，公用部分的代码会提取压缩到这个文件中 chunkFilename: argv.mode == 'production' ? "[name].[contenthash].js" : "[name].chunk.js", // 模块名+哈希字符的文件名 filename: argv.mode == 'production' ? "[name].[contenthash].js" : "[name].chunk.js", }, // 插件配置 plugins: [ // 打包前清理dist new CleanWebpackPlugin(), // 将css提取到一个单独的文件 new MiniCssExtractPlugin(), // 生成HTML文件并导入js和css new HtmlWebpackPlugin({ title: "webpack demo", }), ], // 加载器：处理css,图片，字体文件等 module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"], }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ["file-loader"], }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, ], }, // 优化 optimization: { //压缩： production 模式下默认true // minimize: true, // 运行的公用文件，设置为single时会将所有的共享依赖合并成一个文件，当有多个入口文件时需要这样做 runtimeChunk: "single", // 动态模块导入的共享模块配置 splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: "vendors", // 值为all时，import动态导入的模块也会被打包的共享部分代码文件里,值为async时只会共享异步的模块，initial时只共享同步的模块 chunks: "initial", }, }, }, }, // 开发服务器 devServer: { // 监听文件的位置 contentBase: `${__dirname}/dist`, compress: true, port: 9000, //允许通过外部访问 host: "0.0.0.0", // 模块热替换，实现只更新局部 hot: true, }, }; };

package.json中,browserslist指定babel编译范围

{ "name": "webpackdemo", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "serve": "webpack-dev-server --env.NODE_ENV=dev --mode development --progress --debug --open", "build:dev": "webpack --env.NODE_ENV=dev --mode development --progress", "build:test": "webpack --env.NODE_ENV=test --mode production --progress", "build": "webpack --env.NODE_ENV=prod --mode production --progress" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.11.6", "@babel/preset-env": "^7.11.5", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^3.0.0", "css-loader": "^4.3.0", "file-loader": "^6.1.0", "html-webpack-plugin": "^4.5.0", "mini-css-extract-plugin": "^0.12.0", "moment": "^2.29.0", "style-loader": "^1.2.1", "webpack": "^4.44.2", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" }, "dependencies": { "jddk.js": "^1.0.0", "vue": "^2.6.12" }, "browserslist": [ "> 1%", "last 2 versions" ] }

测试

test.js中添加了es6的语法

function box() { new Promise((resolve, reject) => { setTimeout(() => { return resolve(135300) }) }) } async function test() { let a = await box() }

编译后

查看完整代码可以去我的github

https://github.com/jddk/webpackDemo