|
针对新手入门搭建项目,Webpack5 配置手册(从0开始)
webpack 5
webpack安装顺序
1.`npm init -y`,初始化包管理文件 package.json2.新建src源代码目录3.新建index.html4.`yarn add webpack webpack-cli`,安装webpack相关包5.在项目根目录中,创建webpack.config.js 的配置文件6.`yarn add webpack-dev-server`,安装支持项目自动打包的工具,并配置7.`yarn add html-webpack-plugin`,安装生成预览页面插件并配置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自动添加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个是必须的,后面的看需要 @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties`,安装处理js高级语法(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个是必须的,后面的看需要 @babel/plugin-transform-runtime @babel/plugin-proposal-class-propertiesyarnadd postcss postcss-loader postcss-preset-env 前面3个是必须的,后面的看需要 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将所有关于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 = {
|
|