什么是webpack?

发布于 2020-12-22 16:29:33

怎么理解webpack在前端开发中的作用和意义?

查看更多

浏览量
3027
8 个回答
猫哥
猫哥 项目组成员 2020-12-25
更多相关扩展问题如需解决? 可加猫哥QQ(632906391)寻求帮助

webpack 是js模块打包工具,用于解决模块之间的依赖,把各个模块按照特定的规则和顺序组织在一起,最终合并为一个文件.

猫哥
猫哥 项目组成员 2021-01-13
更多相关扩展问题如需解决? 可加猫哥QQ(632906391)寻求帮助

如何使用webpack-dev-server进行打包?

  1. 安装 webpack-dev-server webpack webpack-cli;
  2. 配置 webapck.config.js,告知webpack如何进行打包;

    module.exports = {
    entry: './src/index.js',//入口文件
    output: {
        filename: './bundle.js'//打包后文件
    },
    mode: 'development',
    devServer: {
        publicPath: '/dist',//输入目录
    },
    };
  3. 配置package.json,设置启动命令

    "scripts":{
        "start": "webpack-dev-server --open"
    }
  4. 命令行运行 npm run start
猫哥
猫哥 项目组成员 2020-12-28
更多相关扩展问题如需解决? 可加猫哥QQ(632906391)寻求帮助

最近一直安装web-dev-server,就是不成功,老出错.烦死了.我是先装的webpack webpack-cli 然后装的 web-dev-server, 提示安装失败,网上搜索各种说版本不兼容,郁闷..

后来我把webpack相关的软件都 npm uninstall,然后重新安装,这回先安装 webpack-dev-server,尽然成功了,然后我安装了 webpack. 连 webpack-cli 都没有独立专门安装就提示已经有了.

npx webpack -v
webpack 5.11.0
webpack-cli 4.3.0
webpack-dev-server 3.11.0

完美谢幕. 撒花..............

猫哥
猫哥 项目组成员 2020-12-25
更多相关扩展问题如需解决? 可加猫哥QQ(632906391)寻求帮助

webpack 一个很重要的特性就是异步加载模块

猫哥
猫哥 项目组成员 2021-01-12
更多相关扩展问题如需解决? 可加猫哥QQ(632906391)寻求帮助

--save-dev 是什么意思?

这个表示安装的软件只在开发环境中使用,生产环境中不使用.package信息会出现在devDependencies中.

猫哥
猫哥 项目组成员 2020-12-22
更多相关扩展问题如需解决? 可加猫哥QQ(632906391)寻求帮助

webpack可以将多中静态资源js css less转换成一个静态文件,减少页面请求次数

猫哥
猫哥 项目组成员 2020-12-22
更多相关扩展问题如需解决? 可加猫哥QQ(632906391)寻求帮助
如何安装和使用webpack

cnpm install --save-dev webpack 安装webpack核销库
cnpm install --save-dev webpack-cli 安装webpack的命令行功能,用于执行打包的操作.

猫哥
猫哥 项目组成员 2020-12-27
更多相关扩展问题如需解决? 可加猫哥QQ(632906391)寻求帮助

为什么要用webpack

  • 作为一款模块打包工具,它支持多种模块标准,AMD CommonJS ES6模块.
  • 打包的文件过大? 它可以对代码进行分割,首屏只加载必要的代码,不太重要的放到后面加载.
  • 只打包JS,不,它还可以打包其他资源,图片,样式,模板等.

学习
记录

发布
问题

分享
好友

手机
浏览

扫码手机浏览