公共路径

image.png

  1. output:{
  2.   // 可以指定为前端域名，也可以指定为cdn域名
  3.   publickPath:"http://localhost:8080/"
  4. }

编译代码后：（所有的资源前面都加上了基础路径）
image.png
编译之前：
image.png

环境变量

image.png

  1. const path = require("path")
  2. const HtmlWebpackPlugin = require("html-webpack-plugin")
  3. // 将导出的对象换成一个函数
  4. // env 为编译时输入的信息
  5. module.export = (env) => {
  6.  return {
  7.   // 配置多入口
  8.   entry:{
  9.     index:"./src/index.js",
  10.     another:"./src/another-module.js"
  11.   },
  12.   output:{
  13.     filename:"[name].[contenthash].js",
  14.     path:path.resolve(__dirname,"./dist"),
  15.     clean:true,
  16.     assetModuleFilename:"images/[contenthash][ext]"
  17.   },
  18.     // 因为现在是一个函数了,并且有一个env对象传入
  19.     // 通过env对象动态调整mode(环境变量)的值
  20.   mode:env.production ? "production" : "development",
  21.   // devtool:"inline-source-map",
  22.   // plugins: [
  23.   //   new HtmlWebpackPlugin({
  24.   //     template:"./index.html",
  25.   //     filename:"app.html",
  26.   //     inject:"body"
  27.   //   })
  28.   // ],
  29.   // 定义哪些资源文件需要打包
  30.   module:{
  31.       rules:[
  32.       // ...
  33.     ]
  34.   },
  35.   // 优化插件
  36.   optimization:{
  37.     // 压缩代码
  38.     minimizer:{
  39.       new CssMinimizerPlugin(),
  40.         new TerserPlugin()
  41.     },
  42.     // 分离代码
  43.     // 配置后，将会自动把公共的代码抽离到单独的文件中
  44.     // splitChunks:{
  45.     //   chunks:"all"
  46.     // }
  47.   }
  48. }
  49. }

打包:npx webpack —env production —env goal=local
编译的结果中有编译是输入的信息,通过这些信息确定使用那个环境
image.png
这时的文件并没有压缩(但我们可以使用terser进行压缩),这里没有起作用是因为配置了css代码压缩,如下:
image.png
如果这时还想要别的代码页压缩,就需要配置terser了,如下:
npm i terser-webpack-plugin -D
安装好后引入对应的插件
image.png
然后配置裁:
image.png
这时通过命令,在生产环境下打包:npx webpack —env production
打包后的文件将都会被压缩,
但如果通过开发模式打包:npx webpack —env development
打包后的文件是不会被压缩的
这就是配置环境变量的作用

拆分配置文件

image.png
项目根目录下创建config文件夹,用于存放配置文件
image.png

开发环境配置文件

  1. const path = require("path")
  2. const HtmlWebpackPlugin = require("html-webpack-plugin")
  3. const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  5. const toml = require("toml")
  6. const yoml = require("yoml")
  7. const json5 = require("json5")
  10. // 将导出的对象换成一个函数
  11. // env 为编译时输入的信息
  12. module.export = 
  13.   {
  14.   // 配置多入口
  15.   entry:{
  16.     index:"./src/index.js",
  17.     another:"./src/another-module.js"
  18.   },
  19.   output:{
  20.     filename:"[name].js",
  21.     path:path.resolve(__dirname,"../dist"),
  22.     clean:true,
  23.     assetModuleFilename:"images/[contenthash][ext]"
  24.   },
  25.   mode:"development",
  26.     // 调试代码
  27.   devtool:"inline-source-map",
  28.   plugins: [
  29.     new HtmlWebpackPlugin({
  30.       template:"./index.html",
  31.       filename:"app.html",
  32.       inject:"body"
  33.     }),
  34.     new MiniCssExtractPlugin({
  35.       filename:"styles/[contenthash].css"
  36.     })
  37.   ],
  38.     // 用于启动服务
  39.   devServer:{
  40.     static:"./dist"
  41.   },
  42.   // 定义哪些资源文件需要打包
  43.   module:{
  44.       rules:[
  45.       {
  46.         test:/\.png$/,
  47.         type:"asset/resource",
  48.         generator:{
  49.           filename:"images/[contenthash][ext]"
  50.         }
  51.       },
  52.       {
  53.         test:/\.svg$/,
  54.         type:"asset/inline",
  55.       },
  56.       {
  57.         test:/\.txt$/,
  58.         type:"asset/source",
  59.       },
  60.       {
  61.         test:/\.jpg$/,
  62.         type:"asset",
  63.         // 解析器
  64.         parser:{
  65.           // 定义是否生成URL的临界值，当文件大于时创建，反之生成URL
  66.           dataUrlCondition:{
  67.             maxSize:4*1024*1024
  68.           }
  69.         }
  70.       },
  72.       {
  73.         test:/\.(css|less)$/,
  74.         // 这时需要将css文件抽离，所以将不需要style-loader，替换为MiniCssExtractPlugin-loader
  75.         // 这个loader是由MiniCssExtractPlugin插件自带的
  76.         //use:[MiniCssExtractPlugin-loader,"css-loader","less-loader"]
  77.         use:[MiniCssExtractPlugin.loader,"css-loader","less-loader"]
  78.       },
  79.       {
  80.         test:/\.(woff|woff2|eot|ttf|otf)$/,
  81.         type:"asset/resource"
  82.       },
  83.       {
  84.         test:/\.(csv|tsv)$/,
  85.         type:"csv-loader"
  86.       },
  87.       {
  88.         test:/\.xml$/,
  89.         type:"xml-loader"
  90.       },
  91.       {
  92.         // 需要转换的文件
  93.         test:/\.toml$/,
  94.         // 转换后的类型
  95.         type:"json",
  96.         // 使用什么转换
  97.         parser:{
  98.           parse:toml.parse
  99.         }
  100.     },
  101.     {
  102.       // 需要转换的文件
  103.       test:/\.yoml$/,
  104.       // 转换后的类型
  105.       type:"json",
  106.       // 使用什么转换
  107.       parser:{
  108.         parse:yoml.parse
  109.       }
  110.     },
  111.     {
  112.       // 需要转换的文件
  113.       test:/\.json5$/,
  114.       // 转换后的类型
  115.       type:"json",
  116.       // 使用什么转换
  117.       parser:{
  118.         parse:json5.parse
  119.       }
  120.     },
  121.       {
  122.       test:/\.js$/,
  123.       exclude:/node_modules/,
  124.       use: {
  125.         loader:"babel-loader",
  126.         options:{
  127.           presets:["@abel/preset-env"],
  128.           // 用于定义插件的插件，及@babel/plugin-transform-runtime是属于"babel-loader"的插件
  129.           plugins:[
  130.             [
  131.               "@babel/plugin-transform-runtime"
  132.             ]
  133.           ]
  134.         }
  135.       }
  136.     }
  137.     ]
  138.   },
  139.   // 优化插件
  140.   optimization:{
  141.     // 分离代码
  142.     // 配置后，将会自动把公共的代码抽离到单独的文件中
  143.      splitChunks:{
  144.       // 缓存组
  145.       // 一般用于定义需要缓存的第三方库
  146.       cacheFGroups:{
  147.         // 第三方库一般都是在node_modules中的
  148.         vendor:{
  149.           // 这样配置，是为了确保能获取到node_modules中的文件
  150.           test:/[\\/]node_modules[\\/]/,
  151.           // 起个名字
  152.           name:"vendors",
  153.           // all 对所有chunks（模块）做处理
  154.           chunks:"all"
  155.         }
  156.       }
  157.     }
  158.   }
  160. }

打包,并指定运行那个配置文件,当前是开发环境:
npx webpack -c ./com\nfig/webpack.config.dev.js 或
npx webpack —config ./config/webpack.config.dev.js
打包后会生成一个dist文件夹(在项目根目录下)

生产环境配置文件

在config文件夹下创建webpack.config.prod.js开发环境配置文件

  1. const path = require("path")
  2. const HtmlWebpackPlugin = require("html-webpack-plugin")
  3. const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  4. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
  5. const TerserPlugin = require("terser-webpack-plugin")
  7. const toml = require("toml")
  8. const yoml = require("yoml")
  9. const json5 = require("json5")
  12. // 将导出的对象换成一个函数
  13. // env 为编译时输入的信息
  14. module.export = 
  15.   {
  16.   // 配置多入口
  17.   entry:{
  18.     index:"./src/index.js",
  19.     another:"./src/another-module.js"
  20.   },
  21.   output:{
  22.     // 用于缓存
  23.     filename:"[name].[contenthash].js",
  24.     path:path.resolve(__dirname,"../dist"),
  25.     clean:true,
  26.     assetModuleFilename:"images/[contenthash][ext]",
  27.     pulicPath:"http://localhost:8080"
  28.   },
  29.   mode:"production",
  30.     // 调试代码
  31.   // devtool:"inline-source-map",
  32.   plugins: [
  33.     new HtmlWebpackPlugin({
  34.       template:"./index.html",
  35.       filename:"app.html",
  36.       inject:"body"
  37.     }),
  38.     new MiniCssExtractPlugin({
  39.       filename:"styles/[contenthash].css"
  40.     })
  41.   ],
  42.     // 用于启动服务
  43.   // devServer:{
  44.   //   static:"./dist"
  45.   // },
  46.   // 定义哪些资源文件需要打包
  47.   module:{
  48.       rules:[
  49.       {
  50.         test:/\.png$/,
  51.         type:"asset/resource",
  52.         generator:{
  53.           filename:"images/[contenthash][ext]"
  54.         }
  55.       },
  56.       {
  57.         test:/\.svg$/,
  58.         type:"asset/inline",
  59.       },
  60.       {
  61.         test:/\.txt$/,
  62.         type:"asset/source",
  63.       },
  64.       {
  65.         test:/\.jpg$/,
  66.         type:"asset",
  67.         // 解析器
  68.         parser:{
  69.           // 定义是否生成URL的临界值，当文件大于时创建，反之生成URL
  70.           dataUrlCondition:{
  71.             maxSize:4*1024*1024
  72.           }
  73.         }
  74.       },
  76.       {
  77.         test:/\.(css|less)$/,
  78.         // 这时需要将css文件抽离，所以将不需要style-loader，替换为MiniCssExtractPlugin-loader
  79.         // 这个loader是由MiniCssExtractPlugin插件自带的
  80.         //use:[MiniCssExtractPlugin-loader,"css-loader","less-loader"]
  81.         use:[MiniCssExtractPlugin.loader,"css-loader","less-loader"]
  82.       },
  83.       {
  84.         test:/\.(woff|woff2|eot|ttf|otf)$/,
  85.         type:"asset/resource"
  86.       },
  87.       {
  88.         test:/\.(csv|tsv)$/,
  89.         type:"csv-loader"
  90.       },
  91.       {
  92.         test:/\.xml$/,
  93.         type:"xml-loader"
  94.       },
  95.       {
  96.         // 需要转换的文件
  97.         test:/\.toml$/,
  98.         // 转换后的类型
  99.         type:"json",
  100.         // 使用什么转换
  101.         parser:{
  102.           parse:toml.parse
  103.         }
  104.     },
  105.     {
  106.       // 需要转换的文件
  107.       test:/\.yoml$/,
  108.       // 转换后的类型
  109.       type:"json",
  110.       // 使用什么转换
  111.       parser:{
  112.         parse:yoml.parse
  113.       }
  114.     },
  115.     {
  116.       // 需要转换的文件
  117.       test:/\.json5$/,
  118.       // 转换后的类型
  119.       type:"json",
  120.       // 使用什么转换
  121.       parser:{
  122.         parse:json5.parse
  123.       }
  124.     },
  125.       {
  126.       test:/\.js$/,
  127.       exclude:/node_modules/,
  128.       use: {
  129.         loader:"babel-loader",
  130.         options:{
  131.           presets:["@abel/preset-env"],
  132.           // 用于定义插件的插件，及@babel/plugin-transform-runtime是属于"babel-loader"的插件
  133.           plugins:[
  134.             [
  135.               "@babel/plugin-transform-runtime"
  136.             ]
  137.           ]
  138.         }
  139.       }
  140.     }
  141.     ]
  142.   },
  143.   // 优化插件
  144.   optimization:{
  145.     minimizer:[
  146.       new CssMinimizerPlugin(),
  147.       new TerserPlugin()
  148.     ]
  149.     // 分离代码
  150.     // 配置后，将会自动把公共的代码抽离到单独的文件中
  151.      splitChunks:{
  152.       // 缓存组
  153.       // 一般用于定义需要缓存的第三方库
  154.       cacheFGroups:{
  155.         // 第三方库一般都是在node_modules中的
  156.         vendor:{
  157.           // 这样配置，是为了确保能获取到node_modules中的文件
  158.           test:/[\\/]node_modules[\\/]/,
  159.           // 起个名字
  160.           name:"vendors",
  161.           // all 对所有chunks（模块）做处理
  162.           chunks:"all"
  163.         }
  164.       }
  165.     }
  166.   },
  167. // 与性能有关的配置
  168.     performance: {
  169.       hints:false
  170.     }
  171. }

打包,并指定运行那个配置文件,当前是开发环境:
npx webpack -c ./comfig/webpack.config.prod.js 或
npx webpack —config ./config/webpack.config.prod.js
打包后会生成一个dist文件夹(在项目根目录下)

通过npx 启动一个服务:npx webpack serve -c ./comfig/webpack.config.dev.js
情动服务后可在浏览器查看效果

npm脚本

image.png
在package.json文件中新建脚本
image.png
通过 npm run xxx 例如： npm run start ,或 npm run build 运行上面的两个脚本
在脚本中使用webpack可以补添加npx 前缀，如下：
image.png

提取公共配置

image.png
在config项目的文件夹下，创建一个公共配置文件（用于配置生产环境和开发环境中相同的配置）webpack.config.common.js
image.png
下面没有注释的就是通用配置

  1. const path = require("path")
  2. const HtmlWebpackPlugin = require("html-webpack-plugin")
  3. const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  4. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
  5. const TerserPlugin = require("terser-webpack-plugin")
  7. const toml = require("toml")
  8. const yoml = require("yoml")
  9. const json5 = require("json5")
  12. module.export = 
  13.   {
  14.   // 配置多入口
  15.   entry:{
  16.     index:"./src/index.js",
  17.     another:"./src/another-module.js"
  18.   },
  19.   output:{
  20.     // 用于缓存
  21.     // filename:"[name].[contenthash].js",
  22.     path:path.resolve(__dirname,"../dist"),
  23.     clean:true,
  24.     assetModuleFilename:"images/[contenthash][ext]",
  25.     // pulicPath:"http://localhost:8080"
  26.   },
  27.   // mode:"production",
  28.     // 调试代码
  29.   // devtool:"inline-source-map",
  30.   plugins: [
  31.     new HtmlWebpackPlugin({
  32.       template:"./index.html",
  33.       filename:"app.html",
  34.       inject:"body"
  35.     }),
  36.     new MiniCssExtractPlugin({
  37.       filename:"styles/[contenthash].css"
  38.     })
  39.   ],
  40.     // 用于启动服务
  41.   // devServer:{
  42.   //   static:"./dist"
  43.   // },
  44.   // 定义哪些资源文件需要打包
  45.   module:{
  46.       rules:[
  47.       {
  48.         test:/\.png$/,
  49.         type:"asset/resource",
  50.         generator:{
  51.           filename:"images/[contenthash][ext]"
  52.         }
  53.       },
  54.       {
  55.         test:/\.svg$/,
  56.         type:"asset/inline",
  57.       },
  58.       {
  59.         test:/\.txt$/,
  60.         type:"asset/source",
  61.       },
  62.       {
  63.         test:/\.jpg$/,
  64.         type:"asset",
  65.         // 解析器
  66.         parser:{
  67.           // 定义是否生成URL的临界值，当文件大于时创建，反之生成URL
  68.           dataUrlCondition:{
  69.             maxSize:4*1024*1024
  70.           }
  71.         }
  72.       },
  74.       {
  75.         test:/\.(css|less)$/,
  76.         // 这时需要将css文件抽离，所以将不需要style-loader，替换为MiniCssExtractPlugin-loader
  77.         // 这个loader是由MiniCssExtractPlugin插件自带的
  78.         //use:[MiniCssExtractPlugin-loader,"css-loader","less-loader"]
  79.         use:[MiniCssExtractPlugin.loader,"css-loader","less-loader"]
  80.       },
  81.       {
  82.         test:/\.(woff|woff2|eot|ttf|otf)$/,
  83.         type:"asset/resource"
  84.       },
  85.       {
  86.         test:/\.(csv|tsv)$/,
  87.         type:"csv-loader"
  88.       },
  89.       {
  90.         test:/\.xml$/,
  91.         type:"xml-loader"
  92.       },
  93.       {
  94.         // 需要转换的文件
  95.         test:/\.toml$/,
  96.         // 转换后的类型
  97.         type:"json",
  98.         // 使用什么转换
  99.         parser:{
  100.           parse:toml.parse
  101.         }
  102.     },
  103.     {
  104.       // 需要转换的文件
  105.       test:/\.yoml$/,
  106.       // 转换后的类型
  107.       type:"json",
  108.       // 使用什么转换
  109.       parser:{
  110.         parse:yoml.parse
  111.       }
  112.     },
  113.     {
  114.       // 需要转换的文件
  115.       test:/\.json5$/,
  116.       // 转换后的类型
  117.       type:"json",
  118.       // 使用什么转换
  119.       parser:{
  120.         parse:json5.parse
  121.       }
  122.     },
  123.       {
  124.       test:/\.js$/,
  125.       exclude:/node_modules/,
  126.       use: {
  127.         loader:"babel-loader",
  128.         options:{
  129.           presets:["@abel/preset-env"],
  130.           // 用于定义插件的插件，及@babel/plugin-transform-runtime是属于"babel-loader"的插件
  131.           plugins:[
  132.             [
  133.               "@babel/plugin-transform-runtime"
  134.             ]
  135.           ]
  136.         }
  137.       }
  138.     }
  139.     ]
  140.   },
  141.   // 优化插件
  142.   optimization:{
  143.     // minimizer:[
  144.     //   new CssMinimizerPlugin(),
  145.     //   new TerserPlugin()
  146.     // ]
  147.     // 分离代码
  148.     // 配置后，将会自动把公共的代码抽离到单独的文件中
  149.      splitChunks:{
  150.       // 缓存组
  151.       // 一般用于定义需要缓存的第三方库
  152.       cacheFGroups:{
  153.         // 第三方库一般都是在node_modules中的
  154.         vendor:{
  155.           // 这样配置，是为了确保能获取到node_modules中的文件
  156.           test:/[\\/]node_modules[\\/]/,
  157.           // 起个名字
  158.           name:"vendors",
  159.           // all 对所有chunks（模块）做处理
  160.           chunks:"all"
  161.         }
  162.       }
  163.     }
  164.   },
  165. // 与性能有关的配置
  166.     performance: {
  167.       hints:false
  168.     }
  169. }

开发环境

  2. module.export = {
  3.   output:{
  4.     // 用于缓存
  5.     filename:"script/[name].js",
  6.   },
  7.   mode:"development",
  8.     // 调试代码
  9.   devtool:"inline-source-map",
  11.     // 用于启动服务
  12.   devServer:{
  13.     static:"./dist"
  14.   }
  15. }

生产环境

  1. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
  2. const TerserPlugin = require("terser-webpack-plugin")
  5. module.export = {
  6.   output:{
  7.     // 用于缓存
  8.     filename:"script/[name].[contenthash].js",
  9.     pulicPath:"http://localhost:8080"
  10.   },
  11.   mode:"production",
  12.   optimization:{
  13.     minimizer:[
  14.       new CssMinimizerPlugin(),
  15.       new TerserPlugin()
  16.     ]
  17.   },
  18. // 与性能有关的配置
  19.     performance: {
  20.       hints:false
  21.     }
  22. }

合并上面的三个配置文件

通过使用webpack-merge合并配置文件
安装：npm i webpack-merge -D
在项目下的config文件下创建文件 webpack.config.js：
通过webpack.config.js将上面三个配置文件合并到一起
image.png

  1. const {merge} = require("webpack-merge")
  3. // 导入配置文件
  4. const commonConfig = require("./webpack.config.common")
  5. const productionConfig = require("./webpack.config.prod")
  6. const developmentConfig = require("./webpack.config.dev")
  8. // 导出
  9. module.exports = (env) => {
  10.   switch(true) {
  11.       // 通过判断env.development是否为true，是否执行合并
  12.     case env.development :
  13.       // 合并配置开发配置文件
  14.       return merge(commonConfig,developmentConfig)
  16.     case env.production: 
  17.       return merge(commonCofig,productionConfig)
  18. // defult在这里可以不用添加
  19.     defult:
  20.         return new Error("No matching configuration was found")
  21.   }
  22. }

提取后的脚本

提取完公共配置文件后的运行脚本：（需要在运行时传递当前的环境变量）
image.png