node npm webpack初步体验

安装webpack

以前安装过一次node.js,运行npm -v很顺利。node -v也没问题。
使用npm install <module Name> 安装模块也没问题。需要说一下，这里的’install’可以简写成’i’，模块名字后可跟几个参数

-g 表示全局安装，不带-g 表示局部安装
--save 简写为-S 表示包依赖生产环境
--save-dev 简写 -D 表示包依赖开发环境

安装都很顺利。安装完webpack,运行webpack，总数提示“webpack不是内部或外部命令,也不是可运行程序….”
百度了很多内容，按照找到的方案操作到下半夜，也没成功。我把node.js卸载了，重新安装，还是那个提示。第二天早上，把注册表里的“node.js”清空，又重新安装，再npm i webpack webpack-cli webpack-dev-server -D安装webpack,运行webpack -v看到了

• 修改镜像

  npm config set registry https://registry.npm.taobao.org --global
  npm config set disturl https://npm.taobao.org/dist --global

  修改镜像后安装模块的速度就是快。

webpack 操作

• 建立空文件夹，名为1028，在文件夹运行cmd
• 初始化 npm init -y
• 安装 webpacknpm i webpack webpack-cli webpack-dev-server -D
• 在文件夹内建文件夹src,别写错了，开始，我就写成scr了，结果运行webpack --mode development 出错。
• 配置文件 webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  // 入口文件
  //   entry: "./src/my.js",
  //   entry: ["./src/my.js", "./src/index.js"], //多个入口文件
  // entry: {
  //   one: "./src/my.js",
  //   two: "./src/index.js",
  // },
  entry: {
    vendor: ["./src/jquery.js", "./src/common.js"],
    index: "./src/index.js",
    cart: "./src/cart.js",
  },
  output: {
    filename: "[name].js",
    path: resolve(__dirname, "build"),
  },
  //   module: {},
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      chunks: ["vendor", "index"],
      // 压缩html
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
    new HtmlWebpackPlugin({
      template: "./src/cart.html",
      chunks: ["vendor", "cart"],
      filename: "cart.html",
      // 压缩html
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
  ],
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
    ],
  },
  target: "web",
  mode: "development",
};

• webpack 打包 html 资源
  下载插件npm i html-webpack-plugin -D
• webpack 打包 CSS 资源
  下载loader npm i css-loader -D
• 0 webpack 打包 less 或 sass 资源
  Less 需要使用 npm 下载 less 包和 less-loader npm i less less-loader -D
  Sass 需要使用 npm 下载 node-sass 包和 sass-loader npm i node-sass sass-loader -D出现错误