Webpack4

1. wepack4与其他版本的区别

• 速度更快，创建大型项目节约的90%构建时间
• 内置了更多的默认设置，变更了许多API
• 不局限于版本，全面账务、全面掌握webpack4

2.webpack是什么

webpack是一个模块打包工具。是一个现代应用程序的静态模块打包器。当webpack处理应用程序时，她会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

3. 常用模块规范

• commonjs：

使用module.exports或者exports导出，使用require加载。代表：node

• amd：

使用define定义模块，使用require加载，依赖前置。代表：requirejs

• cmd:

使用define定义模块，使用require加载，就近依赖。代表：seajs

• esmodule

export导出，import加载。推荐写法。

4. 模块打包工具

顾名思义，就是用来分辨模块的依赖关系，组织模块代码的工具。对于webpack模块，有着更广泛的类型支持，不仅仅是js模块而已。（虽然本质上还是先翻译成js模块，但是形式上支持各种类型的模块）。 总的来说，webpack 提供了可定制的、强大和丰富的 API，允许任何技术栈使用 webpack，保持了在你的开发、测试和生成流程中的无侵入性(non-opinionated)。

5. webpack正确的安装环境

1. 首先要下载node.js，打开node.js官网，

   

   因为这个版本更稳定。
2. 打开终端输入 node -v， npm -v

3. 然后npm init 初始这个项目。全部按回车

4. 安装webpack 全局安装webpack

局部安装

5. 然后出现的 输入npx webpack -v

6. 对index.js 进行打包，

但我写的时候输入了index.html

6. webpack的配置文件

1 自己在根目录下创建webpack.config.js文件。

2. 如果想要创建 webpackconfig.js文件，就在命令符中输入 npx webpack --config webpackconfig.js

7. 用 npm run 方法，简化

1. 把这一行给删掉，

   

2. 重新输入 ，如图：

   

3. 然后就可在命令行输入 npm run bundle

   

   先从这个项目开始找webpack，

8. webpack-cli

下载webpack-cli，是为了，能过使用webpack，与npx。

9. webpack打包输出内容

填上如图下的代码：就不会报出警告