4步完成基础webpack5项目的工程化
当前webpack配置支持：
- css版本兼容 自动添加前缀
- 自动对JS代码进行兼容
- 对于本地图片资源小于10kb的都会自动转成base64编码(减少请求，大小规定可以自定义)
- 支持txt，加载fonts字体，特殊文件CSV/XML处理，JSON模块parser的加载处理
- 拆分入口文件，去掉重复代码分离，并且缓存第三方库
-
支持 less css预编译
- CSS和JS代码压缩
以下文件的配置模块安装：
npm install html-webpack-plugin --save-dev npm install mini-css-extract-plugin -D npm i css-loader style-loader - D npm install postcss-preset-env npm install less-loader less -D npm i postcss -D npm install css-minimizer-webpack-plugin -D npm i autoprefixer -D npm i postcss-loader -D npm install terser-webpack-plugin -D npm i file-loader -D npm install csv-loader xml-loader -D npm install toml yaml json5 -D npm install babel-loader @babel/core @babel/preset-env -D npm install @babel/runtime -D npm install @babel/plugin-transform-runtime -D
注意：下面entry和plugins这两个对象中的文件引入和注释(创建默认的index.html，入口文件需要多个就创建多个，需要单个使用单个)
1.在项目根目录创建webpack.config.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') // 压缩css代码 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') // 自定义的JSON模块parser的加载(不需要使用的可以选择性删除对应的代码) const toml = require('toml') const yaml = require('yaml') const json5 = require('json5') // js代码压缩 const TerserPlugin = require('terser-webpack-plugin') module.exports = (env) => { return { // 单入口 // entry:'./src/index.js', // 多入口 entry: { index: './src/index.js', another: './src/another-module.js' }, //出口 output: { // filename:'js/main.js', filename: "scripts/[name].[contenthash].js", // __dirname 是nodejs的变量，代表当前文件的绝对路径 path: resolve(__dirname, './dist'), clean: true,// 清理上一次dist文件中旧的代码文件 // assetModuleFilename:'image[contenthash][ext]'//资源模块文件名(自动生成哈希值文件名称) // publicPath: 'http://localhost:8080/'//可以配置一个域名 或者是一个cdn地址 （所有script和link标签都会添加这个域名前缀） }, 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', // 这里是下面注释对象的简写（使用当前简写方式的前提提要有.browserslistrc文件配置，在第二步） // { // 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: { minimizer: [ new CssMinimizerPlugin(), new TerserPlugin() ], // 主要是拆分入口文件，重复代码分离,并且缓存第三方库 splitChunks: { // chunks:'all' cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } }, }, // npx webpack-dev-server devServer: { static: './dist' }, devtool: 'inline-source-map', // 快速找到代码报错的文件和行数（帮助我们bug定位） mode:env.production?'production':'development' // mode: 'development',// 开发模式 // mode:'production'// 生产模式 } }
2.在项目根目录创建 .browserslistrc文件 配置CSS和JS代码兼容范围配置
该文件表示 某浏览器市场占比大于1%的都进行CSS兼容和JS兼容小于1%不考虑，并且进行当前浏览器最近4个版本进行自动代码添加和兼容
> 1% last 4 version not dead
3.在项目根目录创建postcss.config.js 文件配置16进制的色值的 转化和兼容
// 当前文件是用于webpack打包的时候读取 css兼容配置文件，和color值转化成兼容最佳的rgba module.exports = { plugins:[ require('postcss-preset-env') ] }
4.在项目根目录package.json文件修改scripts对象的npm 命令
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack serve -c ./webpack.config.js --env development", "build": "webpack -c ./webpack.config.js --env production" },
运行项目：npm run start
打包项目：npm run build
欢迎查看下一篇webpack5文章是 对当前配置进行了抽离 和文件管理使代码更加的简洁明确
进一步的提高代码的可读性和维护性
我是马丁的车夫，欢迎转发收藏！
