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