針對新手入門(mén)搭建項目，Webpack5 配置手冊（從0開(kāi)始）

webpack 5

webpack安裝順序

1.`npm init -y`，初始化包管理文件 package.json2.新建src源代碼目錄3.新建index.html4.`yarn add webpack webpack-cli`,安裝webpack相關(guān)包5.在項目根目錄中，創(chuàng )建webpack.config.js 的配置文件6.`yarn add webpack-dev-server`,安裝支持項目自動(dòng)打包的工具，并配置7.`yarn add html-webpack-plugin`,安裝生成預覽頁(yè)面插件并配置8.`yarn add style-loader css-loader`,安裝處理css文件的loader9.`yarn add less-loader less`,安裝處理less文件的loader10.`yarn add sass-loader node-sass`,安裝處理scss文件的loader11.`yarn add postcss postcss-loader postcss-preset-env autoprefixer`,配置postCSS自動(dòng)添加css的兼容前綴（可選）12.`yarn add url-loader file-loader`,安裝處理css文件中的圖片和字體文件13.`yarn add html-loader`,安裝處理html文件中的圖片和字體文件14.`yarn add @babel/core babel-loader @babel/preset-env 前面3個(gè)是必須的，后面的看需要 @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties`,安裝處理js高級語(yǔ)法（ES6以上）15.之后看下面的插件安裝代碼。yarnadd html-webpack-pluginyarnadd style-loader css-loaderyarnadd less-loader lessyarnadd sass-loader node-sassyarnadd url-loader file-loaderyarnadd html-loaderyarnadd @babel/core babel-loader @babel/preset-env 前面3個(gè)是必須的，后面的看需要 @babel/plugin-transform-runtime @babel/plugin-proposal-class-propertiesyarnadd postcss postcss-loader postcss-preset-env 前面3個(gè)是必須的，后面的看需要 postcss-cssnextyarnadd mini-css-extract-pluginyarnadd optimize-css-assets-webpack-pluginyarnadd eslint eslint-loader eslint-webpack-pluginyarnadd eslint-config-airbnb-base 或 eslint-config-airbnb 或 vue的eslintyarnadd clean-webpack-plugin

使用npx babel-upgrade將所有關(guān)于babel的插件都升級到最新版本以適應兼容性

在.babelrc 中配置，或者在package.json中直接添加

{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

webpack.config.js中配置插件

constpath =require(path);consthtmlWebpackPlugin =require(html-webpack-plugin);const{ CleanWebpackPlugin } =require(clean-webpack-plugin);module.exports = {