初识 NPM 及 webpack 包管理工具

初识 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就能实现上面一段的效果，且里面可以配置更多项，来实现不同的入口文件、输出文件、规则配置、插件配置、模式等

//从path中获取resolve方法去获取目录
const { resolve } = require("path");
//引入html打包插件
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  //入口文件
  //单文件
  //entry: "./src/me.js";
  //多文件
  //   entry: ["./src/me.js", "./src/index.js"],
  //多文件输出到多文件
  entry: {
    vendor: ["./src/jquery.js", "./src/common.js"],
    index: "./src/index.js",
    cart: "./src/cart.js",
  },
  //输出
  output: {
    //单文件及多文件输出到一个文件中
    // filename: "main.js",
    //多文件生成到多个文件中
    filename: "[name].js",
    path: resolve(__dirname, "build"),
  },
  //引入loader
  module: {
    //写入规则
    rules: [
      {
        //匹配哪些文件
        test: /\.css$/,
        //这里是从后往前写，先把css加到js中，再把js再加到html中
        use: ["style-loader", "css-loader"],
      },
      {
        //匹配哪些文件
        test: /\.scss$/,
        //这里是从后往前写，先把css加到js中，再把js再加到html中，这里是加载了一个sass的css预处理器，sass是一种专门的编程语言，可以有变量、函数
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  //插件,webpack默认只能打包js文件，打包其他的相如html、css、图片需要用到插件，下载=>导入=>使用
  plugins: [
    new HtmlWebPackPlugin({
      //指定入口文件
      template: "./src/index.html",
      //指定出口文件
      filename: "index.html",
      //指定chunk
      chunks: ["vendor", "index"],
      //配置压缩项
      minify: {
        //去掉空格
        collapseWhitespace: true,
        //去掉注释
        removeComments: true,
      },
    }),
    new HtmlWebPackPlugin({
      //指定入口文件
      template: "./src/cart.html",
      //指定出口文件
      filename: "cart.html",
      //指定chunk
      chunks: ["vendor", "cart"],
      //配置压缩项
      minify: {
        //去掉空格
        collapseWhitespace: true,
        //去掉注释
        removeComments: true,
      },
    }),
  ],
  //模式
  mode: "development", //定义生产模式或者运行模式,
};