欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

初识 NPM 及 webpack 包管理工具

程序员文章站 2022-03-13 12:35:17
...

初识 NPM 及 webpack 包管理工具

几个简单的命令

这里需要注意前面都需要加上 npm
| 基础命令 | 简写 | 实际作用 |
| —————— | —— | ——————— |
| --version | -v | 查看版本 |
| instal | i | 安装 |
| --save | -S | 部署到线上环境 |
| --save-dev | -D | 部署到开发环境 |
| -global | -g | 全局安装 |

使用 webpack 的简单步骤

  1. 初始化 npm npm init -y(-y 尽量带上,否则就需要逐项添加修改)
  2. 安装 webpack、webpack 脚手架、webpack 服务器npm i webpack webpack-cli webpack-dev-server --D
  3. 选择打包环境进行打包 webpack --mode development(开发环境) webpack --mode production(生产环境/线上环境)

webpack.config.js 配置

如果不使用 webpack.config.js 进行配置,那么每次运行时都要执行很长一段代码如:
webpack ./src/index.js -o ./build/build.js --mode development
webpack ./src/index.js -o ./build/build.js --mode production

配置 webpack.config.js 后,只运行webpack就能实现上面一段的效果,且里面可以配置更多项,来实现不同的入口文件、输出文件、规则配置、插件配置、模式等

  1. //从path中获取resolve方法去获取目录
  2. const { resolve } = require("path");
  3. //引入html打包插件
  4. const HtmlWebPackPlugin = require("html-webpack-plugin");
  5. module.exports = {
  6. //入口文件
  7. //单文件
  8. //entry: "./src/me.js";
  9. //多文件
  10. // entry: ["./src/me.js", "./src/index.js"],
  11. //多文件输出到多文件
  12. entry: {
  13. vendor: ["./src/jquery.js", "./src/common.js"],
  14. index: "./src/index.js",
  15. cart: "./src/cart.js",
  16. },
  17. //输出
  18. output: {
  19. //单文件及多文件输出到一个文件中
  20. // filename: "main.js",
  21. //多文件生成到多个文件中
  22. filename: "[name].js",
  23. path: resolve(__dirname, "build"),
  24. },
  25. //引入loader
  26. module: {
  27. //写入规则
  28. rules: [
  29. {
  30. //匹配哪些文件
  31. test: /\.css$/,
  32. //这里是从后往前写,先把css加到js中,再把js再加到html中
  33. use: ["style-loader", "css-loader"],
  34. },
  35. {
  36. //匹配哪些文件
  37. test: /\.scss$/,
  38. //这里是从后往前写,先把css加到js中,再把js再加到html中,这里是加载了一个sass的css预处理器,sass是一种专门的编程语言,可以有变量、函数
  39. use: ["style-loader", "css-loader", "sass-loader"],
  40. },
  41. ],
  42. },
  43. //插件,webpack默认只能打包js文件,打包其他的相如html、css、图片需要用到插件,下载=>导入=>使用
  44. plugins: [
  45. new HtmlWebPackPlugin({
  46. //指定入口文件
  47. template: "./src/index.html",
  48. //指定出口文件
  49. filename: "index.html",
  50. //指定chunk
  51. chunks: ["vendor", "index"],
  52. //配置压缩项
  53. minify: {
  54. //去掉空格
  55. collapseWhitespace: true,
  56. //去掉注释
  57. removeComments: true,
  58. },
  59. }),
  60. new HtmlWebPackPlugin({
  61. //指定入口文件
  62. template: "./src/cart.html",
  63. //指定出口文件
  64. filename: "cart.html",
  65. //指定chunk
  66. chunks: ["vendor", "cart"],
  67. //配置压缩项
  68. minify: {
  69. //去掉空格
  70. collapseWhitespace: true,
  71. //去掉注释
  72. removeComments: true,
  73. },
  74. }),
  75. ],
  76. //模式
  77. mode: "development", //定义生产模式或者运行模式,
  78. };