webpack简单入门（一）

靓仔芳
528 阅读2分钟

用来记录自己学习webpack的笔记, 一些api可以自行查询官方文档, webpack

  1. npm init 初始化, npm init -y 使用默认配置

  2. npm install webpack webpack-cli -D 局部安装webpack以及webpack-cli, 缺一不可, webpack执行时依赖webpack-cli(-g 全局安装), 使用npm进行安装可能会因为各种原因安装失败, 我们可以使用cnpm，并且将cnpm设置为淘宝的镜像.

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    cnpm config get registry # https://r.npm.taobao.org/

    cnpm install webpack webpack-cli -D

    image.png

  3. 当前目录输入 webpack 进行打包, 会报错。

    image.png

原因是因为输入命令会在当前目录下找webpack，如果没有找到就会去全局找，而我这里并没有对webpack进行全局安装所以会报错。 如果想在当前目录下使用局部安装的webpack有3种方法。

  • 找到node_module下面的webpack

    ./node_modules/.bin/webpack

  • 修改package.json中的scripts 并且执行命令 npm run webpack 进行打包

        "scripts": {
          "webpack": "webpack"
        }

  • 使用npx(npx会到当前目录的node_modules/.bin目录下查找对应的命令)

    npx webpack

    image.png

  1. 还碰到一个小问题就是, webpack打包的入口默认是 ./src/index, 如果不是的话会报错

    image.png

我们可以新建一个webpack.config.js来对wepack进行配置

    const path = require('path'); // node 的核心模块

   // CommonJS
    module.exports = {
      entry: "./src/main.js", // 配置入口文件
      output: {
        path: path.resolve(__dirname, "./dist"), // 配置输出文件夹
        filename: "main.js"  // 配置输出文件名
      }
    }
  1. 这里给大家说一下 require(X) 比较常见的查找规则, 没有找到会报错 not found

  • 如果 X 是一个Node核心模块, 比如path、 http, 直接返回核心模块, 并且停止查找

  • X是以./ 或../ 或/（根目录）开头的

    1. 如果有后缀名，按照后缀名的格式查找对应的文件

    2. 如果没有后缀名，会按照如下顺序

       直接查找文件X --> 查找X.js文件 -->查找X.json文件 -->查找X.node文件

    3. 没有找到对应的文件，将X作为一个目录

       查找目录下面的index文件 --> 查找X/index.js文件 --> 查找X/index.json文件 --> 
 查找X/index.node文件

  • 直接是一个X（没有路径），并且X不是一个核心模块, 一层一层往上找

        C:\Users\23115\Desktop\webpack练习\src\node_modules
        C:\Users\23115\Desktop\webpack练习\node_modules\
        C:\Users\23115\Desktop\node_modules
        C:\Users\23115\node_modules
        C:\Users\node_modules 
        C:\node_modules

这就是第一天学习webpack的踩坑, 加油！！！

参考资料: 王红元老师《深入vue3 + TypeScript》

avatar
文章
阅读
粉丝