[TOC] ## 为什么使用webpack - 无法立即体现，脚本的执行依赖于外部扩展库(external library)。 - 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。 - 如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。 ## 模块配置 [模块配置说明文档](https://www.webpackjs.com/configuration/module/) ## 1,安装 - [官网教程https://www.webpackjs.com/guides/installation/](https://www.webpackjs.com/guides/installation/) ### 安装webpack - 创建项目 ``` //创建项目 mkdir study cd study npm init -y ``` - 4.0以上需要cli ``` cnpm install --save-dev webpack cnpm install --save-dev webpack-cli ``` - 快速安装 ``` mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev ``` ### 运行 ``` 执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件 ``` ### pageage.json添加脚本 ~~~ "scripts": { "start": "webpack --config webpack.config.js" } ~~~ - 之后运行 ``` npm run start ```