什么是webpack?

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

如何使用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

最近一直安装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

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

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

--save-dev 是什么意思?

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

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

如何安装和使用webpack

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

为什么要用webpack

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