（一）欢迎了解webpack；
（本文的内容大部分来自webpack的官方文档，写的目的是自己入门时候遇到的困惑，并找寻答案，如果你也有同样的困惑不妨看看，有不妥的地方给予建议和指导，我会非常感谢.）
你将了解：如何安装webpack，怎样用webpack，怎样用一些常见的loader，如何使用开发服务器
（二）安装webpack；
1、安装node环境：下载安装合适的版本 （本人是Mac操作系统）
node.js介绍：node.js是一个建立在chrome的v8 javascript引擎上运行的javascript。node.js使用事件驱动的,非阻塞I / O模型,使其轻量级和有效。node.js的npm包生态系统是世界上最大的生态系统的开源库。
2、安装webpack：npm install webpack -g (通过终端全局安装webpack，-g代表全局安装，全局安装才能在终端中调用它的命令)
（三）开始具体的编辑
1、建立一个本地文件夹（例如jq）
在该文档中创建如下文件entry.js 并在其中写入
document.write("It works.");
用vsCode编辑器创建的例子，终端可以在编辑器中调出来
在添加index.html
最后在你的终端中运行 webpack ./entry.js bundle.js
webpack 会把你的文件编译到新创的bundle.js文件中
如果操作成功终端中会有如下展示
Mac操作系统下 vsCode编辑器
在浏览器中打开index.html可以看见
添加一个content.js的文件写入：
module.exports＝“it works from content.js”
更新entry.js
删除document.write("it works")
添加document.write(require("./content.js"))
在终端重新编译：webpack ./entry.js bundle.js
刷新浏览器会看见
webpack 将分析你的入口文件和其它文件之间的依赖关系，这些文件也会包含在bundle.js文件中。webpack将会给每一个模块一个唯一的id并且通过id存储的所有模块在bundle.js文件中。只有的入口module是在启动时被执行的。一个小的运行时提供了require方法并且在required时执行的依赖关系。
（四）loader
我们想添加一个css文件到我们项目中。
webpack只能处理原生的JavaScript,所以我们需要css-loader处理CSS文件。在CSS文件中我们还需要style-loader应用样式。
1、安装xx-loader
npm install css-loader style-loader
(这里不需要加-g，在本地安装就可以，-g属于全局安装)这会在我们项目的根目录下创建出一个node_modules文件，其中就包含了相关的loaders
2、使用loader
创建style.css文件
修改entry.js文件如下：
!style!css!./style.css（从右到左解析，1、找到style.css文件；2、对其进行css-loader编译；3、最后进行style-loader编译）具体的loader配置
在终端重新编译：webpack ./entry.js bundle.js
查看页面
在为模块请求加载loader时，该模型将通过这一loader。这些loader会通过特定的方式改变文件的内容。当这些变更完成后，输出的结果就是一个JavaScript模型
（五）webpack 自己绑定loader
我们还有一种方式可以实现对css文件的loader转换
1、修改entry.js文件，如下
在终端重新编译：webpack ./entry.js bundle.js --module-bind 'css=style!css'（某些环境中可能需要双引号"css=style!css"）
刷新页面可以看到同样的效果，其实就是将require("!style!css!./style.css")的命令，变种方式写，直接由webpack自己绑定调用；
（六）写webpack的配置文件
将要执行的命令统一写入配置文件里，进行统一管理和调用
添加webpack.config.js文件在项目根目录下：
在终端中运行：webpack
(七) 开启监听模式
我们不想在每次编辑完代码后都手动编译，所以我们可以执行如下代码
webpack --watch
监听一直没有结束，除非你手动结束
webpack 能将不变的模块进行缓存并与改变的模块一起重新编译输出。
当运用监听模式时，webpack会对所有文件安装监听，文件监听器在编译过程中被使用。如果察觉到改变，监听模式就再一次执行编译。当启用缓存，webpack会存储每个模块并且如果这些模块没有改变就会复用。
（八）开发服务
开发一个本地服务是非常有必要的，而且热更新时也需要安装
首先安装一个webpack插件：npm install webpack-dev-server -g（全局安装）
安装后执行：webpack-dev-server
可以看到如下效果
在浏览器中打开http://localhost:8080/webpack-dev-server/或者http://本地IP地址:8080/webpack-dev-server/（端口号默认是8080可以修改，webpack有相应的文档配置）
开发服务器使用webpack的监听模式。它还可以防止webpack排放产生的文件到磁盘。相反,它保持和发布服务结果文件来自存储器。
(九)webpack打包到xxx路径下，的xxx文件包
这里我们的路径是dist，文件包叫bundle.js
在终端中运行:webpack --entry ./entry.js --output-path dist --output-file bundle.js
下面的输出结果:
快速定位 Webpack 速度慢的原因:
在终端中运行:
webpack --entry ./entry.js --output-path dist --output-file bundle.js\
--colors\
--profile\
--display-modules
这三个参数的含义分别是：
--colors输出结果带彩色，比如：会用红色显示耗时较长的步骤
--profile输出性能数据，可以看到每一步的耗时
--display-modules默认情况下node_modules下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
网友评论