注意：文章中有些是测试用的本地文件引入地址，你可以修改src地址加入你自己的一个地址，如果直接全部复制
你又没有这个本地文件地址运行可能会报错(主要是注意：entry入口文件地址，HtmlWebpackPlugin HTML文件模板引入 这两个)
1.安装
npm install webpack-merge -D
2.项目根目录 创建config文件夹 并且里面创建下面的JS文件进行配置
// 提取公共配置 webpack.config.common.js // webpack开发环境配置 webpack.config.dev.js // webpac生产环境配置 webpack.config.prod.js
// 合并文件并且根据条件进行对应的环境处理
webpack.config.js
3.webpack.config.common.js（相关配置）
当前文件是吧开发文件的和生产文件的相同配置代码进行抽离
当前文件环境模块安装
npm install html-webpack-plugin --save-dev npm install mini-css-extract-plugin -D npm install csv-loader xml-loader -D npm install toml yaml json5 -D npm i css-loader style-loader - D npm i postcss -D npm i autoprefixer -D npm i postcss-loader -D npm i file-loader -D npm install csv-loader xml-loader -D npm install babel-loader @babel/core @babel/preset-env -D npm install @babel/runtime -D npm install @babel/plugin-transform-runtime -D
webpack.config.common.js
// resolve 用来拼接绝对路径的方法 const { resolve } = require('path'); // 打包html资源 安装：npm install html-webpack-plugin --save-dev const HtmlWebpackPlugin = require('html-webpack-plugin'); // 让css已link标签方式引入样式表 安装：npm install mini-css-extract-plugin -D const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 自定义的JSON模块parser的加载(不需要使用的可以选择性删除对应的代码) const toml = require('toml') const yaml = require('yaml') const json5 = require('json5') module.exports ={ // 多入口 entry: { index: './src/index.js', // another: './src/another-module.js' }, //出口 output: { // __dirname 是nodejs的变量，代表当前文件的绝对路径 path: resolve(__dirname, '../dist'), clean: true,// 清理上一次dist文件中旧的代码文件 assetModuleFilename:'image/[contenthash][ext]' }, plugins: [ // 详细的plugins配置 // html资源处理----------------------------------------------------------- new HtmlWebpackPlugin({ title: 'webpack配置的标题', template: './public/index.html',// 复制的模板 // inject: 'body'// 在body中生成script标签，默认是head标签内 }), new MiniCssExtractPlugin({ filename: 'styles/[contenthash].css' }) ], module: { rules: [ // 样式处理----------------------------------------------------------- { // 匹配那些文件 test: /\.(css|less)$/, // 使用那些loader进行处理 use: [ // 注意安装：cnpm i css-loader style-loader - D // use数组中的loader执行顺序：从右到左，从上到下 依次执行 // 创建style标签，将js中的样式资源插入进行，添加到head中生效 // 'style-loader', MiniCssExtractPlugin.loader, // 将css文件变成commonjs模块，里面内容是样式字符串 'css-loader', // css兼容 // 1.创建.browserslistrc 添加下的浏览器版本代码 // 2.浏览器版本代码： // > 0.01% // last 4 version // not dead // 3.注意安装：npm i postcss -D,npm i autoprefixer -D,npm i postcss-loader -D // 4.最后在执行项目打包的时候 会吧使用到的css文件进行代码兼容添加 'postcss-loader', // 这里是下面注释对象的简写（使用当前简写方式的前提提要有postcss.config.js文件配置） // { // loader:'postcss-loader', // options:{ // postcssOptions:{ // plugins:['postcss-preset-env'] // } // } // } 'less-loader' ] }, // 图片和文本处理----------------------------------------------------------- // 注意安装：cnpm i file-loader -D { test: /\.(png|svg|gif|jpe?g)$/, type: 'asset', generator: { // 自定义文件夹/[图片原来的名字]+[6位哈希值][图片格式] filename: 'image/[name].[hash:4][ext]', }, parser: { dataUrlCondition: { maxSize: 10 * 1024 // 小于10kb的图片都转成base64编码（减少请求） } } }, // txt文本文件在js中使用: import xx from'xxx.txt' 进行导入获取文本内容 { test: /\.txt$/, type: 'asset/source' }, // 加载fonts字体 { test: /\.(woff|woff2|eot|ttf|otf)$/, type: 'asset/resource' }, // 特殊文件CSV/XML处理----------------------------------------------------------- // 在js中使用 import xx from'xxx.xml', import xx from'xxx.csv'进行导入 // 注意安装：npm install csv-loader xml-loader -D { test: /\.(csv|tsv)$/, use: 'csv-loader' }, { test: /\.xml$/, use: 'xml-loader' }, // JSON模块parser的加载处理----------------------------------------------------------- // 在js中使用 import xx from'xxx.toml', import xx from'xxx.yaml'进行导入 // 注意安装：npm install toml yaml json5 -D { test: /\.toml$/, type: 'json', parser: { parse: toml.parse } }, { test: /\.yaml$/, type: 'json', parser: { parse: yaml.parse } }, { test: /\.json5$/, type: 'json', parser: { parse: json5.parse } }, // JS兼容处理----------------------------------------------------------- // 注意安装：npm install babel-loader @babel/core @babel/preset-env -D // npm install @babel/runtime -D // npm install @babel/plugin-transform-runtime -D { test: /\.js$/, exclude: /node_modules/,// 不需要编译node_modules中的js文件 use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: [ [ '@babel/plugin-transform-runtime' ] ] } } } ] }, optimization: { // 主要是拆分入口文件，重复代码分离,并且缓存第三方库 splitChunks: { // chunks:'all' cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } } }
4.webpack.config.dev.js（开发环境配置）
当前文件是开发读取webpack配置文件
// 当前文件是开发读取webpack配置文件 module.exports = { //出口 output: { filename: "scripts/[name].js", }, // npx webpack-dev-server devServer: { static: './dist', compress:true, // 开启服务器到浏览器传输的过程中文件是压缩的，提高传输效率 port:3000,// 本地服务器端口 // 设置headers响应头 传输给浏览器 headers:{ 'x-access-Token':'123' }, proxy:{ '/api':'https://www.baidu.com/'// 服务端接口请求获取数据地址 }, // https:true, //如果想本地的项目运行 http://localhost:3000/ 的http 改变成https 开启当前配置 http2:true, // 注意没有证书的https 浏览器会警告提醒，可以使用http2配置属性 使用默认证书 historyApiFallback:true, // 解决：如果项目是一个SPA单页面应用(vue...)，使用路由访问，当输入一个不存在的地址控制台和视图会报错 host:'0.0.0.0', // 该配置可以在开发环境中，相同局域网下，其他主机电脑访问本地运行的项目 hot:true// 开启热替换和热更新 （默认webapck是开启的） }, devtool: 'cheap-module-source-map', // 快速找到代码报错的文件和行数（帮助我们bug定位）生产环境不配置默认关闭减小体积 mode: 'development' }
5.webpack.config.prod.js（生产环境配置）
// 当前文件是生产读取webpack配置文件 // 压缩css代码 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') // js代码压缩 const TerserPlugin = require('terser-webpack-plugin') module.exports = { //出口 output: { // filename:'js/main.js', filename: "scripts/[name].[contenthash].js", // publicPath: 'http://localhost:8080/'//可以配置一个域名 或者是一个cdn地址 （所有script和link标签都会添加这个域名前缀） }, optimization: { minimizer: [ new CssMinimizerPlugin(), new TerserPlugin() ]
}, mode: 'production', performance:{ hints:false } }
6.webpack.config.js
// 合并文件并且条件打包对应环境的 const { merge } = require('webpack-merge') const commonConfig = require('./webpack.config.common') const productionConfig = require('./webpack.config.prod') const developmentConfig = require('./webpack.config.dev') module.exports = (env) => { switch (true) { case env.development: return merge(commonConfig, developmentConfig) case env.production: return merge(commonConfig,productionConfig) default: return new Error('No matching configuration was found') } }
7.项目根目录创建 .browserslistrc和postcss.config.js （css/js兼容配置）
.browserslistrc (注意这是一个BROWSERSLISTRC文件类型)
0.05% last 4 version not dead
postcss.config.js
// 当前文件是用于webpack打包的时候读取 css兼容配置文件，和color值转化成兼容最佳的rgba module.exports = { plugins:[ require('postcss-preset-env') ] }
8.更改npm 命令启动项目读取指定环境下的配置文件
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack serve -c ./config/webpack.config.js --env development", "build": "webpack -c ./config/webpack.config.js --env production" },
完成以上步骤配置完成，最后附上package.json配置文件的全部内容
如果遇到环境安装失败，或者找不到模块了可以拷贝package.json配置 直接使用npm i 进行安装
{ "name": "webpack5z", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack serve -c ./config/webpack.config.js --env development", "build": "webpack -c ./config/webpack.config.js --env production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.16.0", "@babel/plugin-transform-runtime": "^7.16.4", "@babel/preset-env": "^7.16.4", "@babel/runtime": "^7.16.3", "autoprefixer": "^10.4.0", "babel-loader": "^8.2.3", "css-minimizer-webpack-plugin": "^3.2.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", "i": "^0.3.7", "json5": "^2.2.0", "less": "^4.1.2", "less-loader": "^10.2.0", "mini-css-extract-plugin": "^2.4.5", "postcss": "^8.4.4", "postcss-loader": "^6.2.1", "terser-webpack-plugin": "^5.2.5", "toml": "^3.0.0", "webpack": "^5.64.4", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.6.0", "webpack-merge": "^5.8.0", "yaml": "^1.10.2" }, "dependencies": { "-": "0.0.1", "D": "^1.0.0", "css-loader": "^6.5.1", "postcss-preset-env": "^7.0.1", "style-loader": "^3.3.1" } }
我是马丁的车夫，欢迎转发收藏！
