webpack该如何打包

1.我们先创建一个空的大文件夹

2.打开该文件夹的终端 输入npm init -y

2.1.打开该文件夹的终端

2.2在该终端运行 npm init -y

3.安装webpack

3.1打开webpack网址 点击“中文文档”

3.2点击“指南”在点击“起步”

3.3复制基本安装图片画线的代码

4.在一开始的文件夹下在创建一个名为src的文件夹

5.然后再在src内创建一个名为index.js的文件

6.打开名为packge.json的文件修改名叫scripts内属性名后的所有内容,修改为webpack

7. 然后在终端内执行npm run scripts内的属性名(该属性名可以修改)

8.如果修改了src内 index.js的名字就不会打包成功

9.如果想打包成功那就需要在一开始的文件夹下创建一个名为webpack.config.js文件(简化打包命令)

10.在文件内书写以下内容

//导出一个配置对象
//path是nodejs内置模块 帮助处理路径、
const path = require('path')
module.exports = {
    //入口 ————dirname当前模块的绝对路径
    entry:path.resolve(__dirname,'src/index.js'),//此的地址为src内自己定义的文件名
    //出口
    output:{
        //目录
        path:path.resolve(__dirname, 'dist'),
        //文件名
        filename:'index.js',//此地址为src内自己定义的文件
        //清空dist 输出最新的内容
        clean:true,
    },
}

11.在一次执行 npm run scripts内的属性名(该属性名可修改)

相关推荐

  1. 如何使用Webpack打包js文件

    2023-12-11 20:44:01       56 阅读
  2. 如何使用Webpack打包vue文件

    2023-12-11 20:44:01       58 阅读
  3. Webpack打包

    2023-12-11 20:44:01       43 阅读
  4. Webpack打包

    2023-12-11 20:44:01       35 阅读
  5. webpack 打包前端项目

    2023-12-11 20:44:01       53 阅读
  6. webpack 打包前端项目

    2023-12-11 20:44:01       51 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-11 20:44:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-11 20:44:01       101 阅读
  3. 在Django里面运行非项目文件

    2023-12-11 20:44:01       82 阅读
  4. Python语言-面向对象

    2023-12-11 20:44:01       91 阅读

热门阅读

  1. 自定义带有构建标记的Go二进制文件

    2023-12-11 20:44:01       60 阅读
  2. magic-api post 参数带入

    2023-12-11 20:44:01       60 阅读
  3. C语言实现toupper函数的功能

    2023-12-11 20:44:01       52 阅读
  4. Python 围圈报数

    2023-12-11 20:44:01       68 阅读