Webpack 5 配置手册（从0开始）

webpack安装顺序

1. `npm init -y`，初始化包管理文件 package.json
2. 新建src源代码目录
3. 新建index.html
4. `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文件的loader
9. `yarn add less-loader less`,安装处理less文件的loader
10. `yarn add sass-loader node-sass`,安装处理scss文件的loader
11. `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. 之后看下面的插件安装代码。

yarn add html-webpack-plugin
yarn add style-loader css-loader
yarn add less-loader less
yarn add sass-loader node-sass
yarn add url-loader file-loader
yarn add html-loader
yarn add @babel/core babel-loader @babel/preset-env 前面3个是必须的，后面的看需要 @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties
yarn add postcss postcss-loader postcss-preset-env
yarn add mini-css-extract-plugin
yarn add optimize-css-assets-webpack-plugin
yarn add eslint eslint-loader eslint-webpack-plugin
yarn add eslint-config-airbnb-base 或 eslint-config-airbnb 或 vue的eslint
yarn add 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中配置插件

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {mode: 'development',entry: path.join(__dirname, './src/main.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js',},// 插件plugins: [// htmlnew htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: 'index.html',}),// 打包前清除distnew CleanWebpackPlugin(),],// Loaders 部分module: {rules: [{// test设置需要匹配的文件类型，支持正则test: /\.css$/,// use表示该文件类型需要调用的loaderuse: ['style-loader', 'css-loader'],},{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader'],},{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader'],},{test: /\.(png|gif|bmp|jpg)$/,use: {loader: 'url-loader',options: {limit: 8 * 1024,// 图片取10位hash和文件扩展名name: '[hash:10].[ext]',// 关闭es6模块化esModule: false,//  图片资源的输出路径outputPath: 'images',},},},// 处理html中img资源{test: /.\html$/,loader: "html-loader"},//  处理其他资源(一般指的就是字体资源等)// {//     exclude: /\.(html|js|css|less|scss|jpg|png|gif)/,//     loader: "file-loader",//     outputPath:'media'// },{test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,type: 'asset/inline',},{test: /\.js/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],plugins: ['@babel/plugin-proposal-class-properties'],},},},],},// 使用webpck-dev-server时配置devServer: {historyApiFallback: true,contentBase: path.join(__dirname, './dist'),open: true,hot: true,quiet: true,port: 3000,},
};

webpack.config.js中配置插件

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
// 导入每次删除文件夹的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');// 复用loader加载器
const commonCssLoader = [MiniCssExtractPlugin.loader,'css-loader',// css兼容性处理// 还需要在package.json中定义browserlist'postcss-loader'// 下面是根据路径找配置文件// {//   loader: 'postcss-loader',//   options: {//     postcssOptions:{//       config:'./postcss.config.js'//     }//   }// }
];// 定义node.js到环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';module.exports = {entry: './src/main.js',output: {filename: 'js/bundle.js',path: resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: [...commonCssLoader,]},{test: /\.less$/,use: [...commonCssLoader,'less-loader']},// {//   // eslint语法检查，在package.json中eslintConfig --> airbnb的校验规则//   test: /\.js$/,//   exclude: /node_modules/,//   // 优先执行，先执行eslint在执行babel//   enforce: 'pre',//   loader: 'eslint-loader',//   options: {//     fix: true//   }// },{// js代码兼容性处理test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',options: {presets: [['@babel/preset-env', //基础预设{useBuiltIns: 'usage', // 按需加载corejs: {version: 3},targets: {// 兼容到什么版本到浏览器chrome: '60',firefox: '50',ie: '9',safari: '10',edge: '17'}}]],plugins: ['@babel/transform-runtime','@babel/plugin-proposal-class-properties'],}},{test: /\.(png|gif|bmp|jpg)$/,use: {loader: 'url-loader',options: {limit: 8 * 1024,// 图片取10位hash和文件扩展名name: '[hash:10].[ext]',// 关闭es6模块化esModule: false,//  图片资源的输出路径outputPath: 'images',// publicPath :  这个则是生成的页面中对图片路径的引用时，加上publicPath。publicPath: "../images"}}},// 处理html中img资源{test: /.\html$/,loader: 'html-loader'},// 处理其他⽂件{exclude: /\.(js|css|less|html|jpg|png|gif)/,loader: 'file-loader',options: { outputPath: 'media', },},]},plugins: [// css代码单独抽离new MiniCssExtractPlugin({filename: 'css/bundle.css'}),// css代码压缩new OptimizeCssAssetsWebpackPlugin(),// html文件压缩new HtmlWebpackPlugin({template: './src/index.html',minify: {// 移除空格collapseWhitespace: true,// 移除注释removeComments: true}}),// new ESLintPlugin({//   exclude:'node_modules',//   fix:true// }),new CleanWebpackPlugin(),],mode: 'production'
};

postcss.config.js配置

module.exports = {// You can specify any options from https://postcss.org/api/#processoptions here// parser: 'sugarss',plugins: [// Plugins for PostCSS// ["postcss-short", { prefix: "x" }],"postcss-preset-env",],
};

.eslintlrc.js配置

module.exports = {root: true,env: {commonjs: true,es6: true,browser: true,node: true},extends: ["airbnb-base",// 'plugin:vue/essential',// '@vue/standard'],parserOptions: {ecmaVersion: 7,ecmaFeatures: {jsx: true,experimentalObjectRestSpread: true,},parser: 'babel-eslint',sourceType: "module"},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'}
}

.gitignore配置

node_modules/*
package-lock.json
dist/*
.idea/*

package.json配置

{"scripts": {"test": "echo \"Error: no test specified\" && exit 1","serve": "webpack serve","dev": "webpack --config webpack.config.js","build": "webpack --config webpack.pub.config.js"},"browserslist": {"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"],"production": [">0.2%","not dead","not op_mini all"]}
}

遇到的问题

开发环境，热部署devServer的重新配置，在webpack.config.js中添加热部署的部分代码，之后在package.json
文件内scripts中配置相应的webpack
生产环境在package.json中的配置"build": "webpack --config webpack.pub.config.js"
生产环境图片资源打包之后，网页显示不出来，需要在图片资源的打包中添加publicPath: "../images",这个
则是生成的页面中对图片路径的引用时，加上publicPath,这样访问时姐可以放到文件的正确地址了。
css代码的兼容性处理，使用postcss-loader的配置，可以直接在use里加载postcss-loader的配置文件，也可以直接
使用postcss-loader,让后打包时自动在根目录中找postcss.confgi.js配置文件，来加载postcss配置，此项目使用的
外部postcss.confgi.js配置文件的配置方式。注意：还需要在package.json中定义browserlist

本文首发于前端黑洞网，csdn同步跟新

Webpack 5 配置手册（从0开始）相关推荐

Webpack安装及简易webpack项目配置（4.0以上版本）
一开始照着书上的敲,怎么也run不起来,说缺少webpack-cli.就从网上找"补救方法",然,在我这里都不管用,索性还是看中文官方文档,瞬间run起来了,舒服.毕竟第一次跑通, ...
上海贝尔2452交换机_上海贝尔阿尔卡特交换机配置手册 V2.0
Alcatel-lucentMES2452交流机的装备手册,能够作为MES系列交流机的典型装备.系统根底.pdf系统装备及办理.pdf端口根本装备.pdfVLANMAC地址表办理装备.pdf链路会聚装 ...
Webpack 4 教程：从0配置到生产模式
原文链接:Webpack 4 Tutorial: from 0 Conf to Production Mode webpack 4 问世了!除了大幅度的性能提升,而且增加了零配置的默认设置. 目录 w ...
WSUS 3.0 STEP BY STEP 配置手册
请各位工程师参考,比较详细的配置手册转载于:https://blog.51cto.com/lijia/110632
VS code 插件配置手册
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 VS code 插件配置手册 C/C++ Tools插件---C/ ...
03-2 BGP专有命令--BGP命令与配置手册
Technorati 标签: BGP,配置,CCIE,CCNP,实验该文档涉及的命令有: bgp fast-external-fallover bgp cluster-ID x.x.x.x/xxxx ...
cisco3550交换机配置手册
cisco3550交换机配置手册说明本手册只包括日常使用的有关命令及特性,其它未涉及的命令及特性请参考英文的详细配置手册. 产品特性 3550EMI是支持二层.三层功能(EMI)的交换机支持VL ...
F5 配置手册 -F5 BIG-IP 10.1-2-配置-基本参数
F5 配置手册 F5 BIG-IP 10.1-2-配置 -基本参数统一沟通(中国)有限公司 2012-01-31 前言: 有人给我说,激活了接下来要做什么? 那么我们现在开始做激活后的事务. 但是请 ...
JIRA配置手册（3）：字段和界面
作者:Misha 来源:原力注入在前面我们简单介绍了问题类型和工作流的配置方法,今天我们来聊一聊字段和界面这两个互相依赖的家伙. 界面即Issue展示给用户可见的表单页面,分为创建界面.查看界面和编 ...

Webpack 5 配置手册（从0开始）

webpack安装顺序

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

webpack.config.js中配置插件

webpack.config.js中配置插件

postcss.config.js配置

.eslintlrc.js配置

.gitignore配置

package.json配置

遇到的问题

Webpack 5 配置手册（从0开始）相关推荐

最新文章

热门文章