Installation dependencies
- babel-loader
This package allows the use of Babel and webpack to convert JavaScript files. Document address - @ babel / core
core of Babel, various conversion methods are written in here official documents address - @babel/preset-env
intelligently compile js, you only need to specify the range of browsers you want to support, and you can compile intelligently. Official document address
cnpm install -D babel-loader @babel/core @babel/preset-env
Configuration file
Added the handling of babel in the loader
// 生成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,
},
};
};
In package.json, browserslist specifies the scope of Babel compilation
{
"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
Added es6 syntax to test.js
function box() {
new Promise((resolve, reject) => {
setTimeout(() => {
return resolve(135300)
})
})
}
async function test() {
let a = await box()
}
After compilation
To view the complete code, you can go to my github
https://github.com/jddk/webpackDemo