webpack 学习笔记1

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等.

使用

创建一个空文件夹并初始化

npm init

下载

npm install webpack webpack-cli -D

webpack可以进行0配置，但是0配置的功能会比较弱

现在目录的内容就如上图
我们再创建一个src文件夹，再在里面创建一个index.js文件，随便输出一点东西

现在来打包这个index.js文件。在根目录里打开终端，输入

npx webpack

这条命令会首先去node_modules里面找到bin文件夹里的webpack.cmd，如果存在node.exe就执行，不存在就去到上一级，找到我们刚才安装的webpack。


这个时候，文件目录里面会多出一个dist文件夹，里面会有一个main.js文件，一整行代码，alt+Z 切换，可以看到最后有我们刚才的index.js文件里的内容。这里我们可以安装一个Code Runner 试着跑一下。


从结果来看，我们只有一行代码，打包出来的却有很多？这是因为webpack的功能是打包，默认的支持js的模块化，例如我们写一些模块化的代码，require 是 node 上的模块引入格式，前端没法直接用。

在src下创建一个新的js文件，导出一个字符串，并在index文件中接收输出。

node端可以正常输出，再看看浏览器端。
我们在dist文件夹里创建一个index.html文件，并在引入打包后的main.js文件


依然是可以正常输出的。

我们在没做有配置的时候打包，会有个提醒。这里说，当我们没有设置模式的时候，webpack会默认使用生产模式来进行打包。