webpack前端构建工具学习总结

将webpack安装到全局环境中

4.输入命令：webpack -v，查看当前webpack的版本号

5.进入项目目录，输入命令：npm init，生成package.json文件

package.json的文件内容：

6.输入命令：npm install webpack --save-dev为项目添加webpack依赖

7.创建一个静态文件index.html和entry.js

运行命令之前，bundle.js是空白的文件

运行命令：webpack src\js\entry.js src\js\bundle.js，将entry.js编译并打包到bundle.js

bundle.js文件内容如下：

8.运行index.html

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

loader的使用：

Loader 可以在 require() 引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用。

输入命令：npm install css-loader style-loader，安装loader