webpack学习笔记（1）——初识webpack

1.webpack的作用：

webpack是一个前端项目构建和打包的工具，可以实现js、css、图片的压缩和合并，是一款现代js引用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖图，其中包含应用程序需要的每个模块，然后将所有这些模块打包到一个或多个包中。
构建:就是将源代码转换成发布线上可执行的js,css,html代码
构建的过程包含:

1. 代码转换:loader 用于对模块的源代码进行转换，如TypeScript编译成javascript,less,sass编译成css等，通过“loaders”可以执行Common Js、AMD、ES6等模块，CSS、Images、LESS……
2. 文件优化:能够压缩js,css,HTML代码,压缩合并图片
3. 代码分割:能够提取多个页面中的公共代码,提取不需要执行的部分代码,让其异步执行
4. 模块合并:在采用模块化的项目中会有很多个模块和文件,需要构建功能把模块化分类合并成一个文件
5. 自动刷新:监听本地源代码的改变,自动重新构建刷新浏览器
6. 代码校检:在代码被提交到仓库前需要校检代码是否符合规范以及单元测试是否通过
7. 主动发布:更新完代码后自动构建出上线发布代码,并传出给发布系统

2.webpack环境安装：

1. 运行环境：需要安装npm和node，安装步骤可以参考Vue环境搭建中的安装步骤：Vue的环境搭建、项目创建及项目运行，（在安装时设置淘宝镜像，npm install -g cnpm --registry=https://registry.npm.taobao.org
   因为国内使用npm安装较慢，所有使用设置npm的淘宝镜像，之后使用cnpm下载数据会快些。）
2. 创建项目目录，并通过npm初始化项目，执行如下命令：

mkdir webpack-demo && cd webpack-demo
npm init -y //初始化项目

3. 局部安装webpack（也可以全局安装，-g）

cnpm install -D webpack webpack-cli

安装成功后通过webpack -v命令可以查看安装后的版本：

==note：==如果显示命令不存在，在电脑上配置一下环境变量path

3.使用webpack打包项目：

3.1项目的目录结构如下图所示：

index.html文件如下图所示：

index.js文件如下图所示：
index.css文件如下图所示：

其中webpack.config.js文件为webpack的配置文件，在里面声明了webpack打包项目的入口文件entry、目标文件output、打包过程中用到的loaders模块工具等：

3.2webpack打包：

打包命令：
（1）直接在命令行输入，明确打包的入口和目标文件：

wepack index.js --output dist/bundle.js

（2）通过配置文件打包，前面我们在项目中创建了webpack配置文件，默认名称为：webpack.config.js，然后在命令行运行:

webpack --config webpack.config.js

如果配置文件的名称为默认名称webpack.config.js，则可以直接直接运行：

webpack

运行成功后，我们会在项目目录下发现打包文件dist/bundle.js文件：

最后在index.html文件中引如我们的打包后的js文件的路径，在浏览器中执行index.html文件，会发现代码执行成功：

3.2.1 css打包：

上述项目中我们出创建了index.css文件，我们同样需要将css文件打包到bundle.js文件中，打包步骤如下：

1. 安装依赖库css-loader:用于遍历样式,使得webpack可以处理css文件；style-loader:将通过style-loader处理后的文件通过style标签直接插入到页面的头部：
   
   安装成功后会在package.json文件中显示依赖：
   
2. 在index.js中引入index.css文件：
   
3. 然后通过webpack命令打包，下图可见样式已经添加在页面上：
   

note:

在打包css时报错如下：ERROR in ./index.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

修正方式：引入css文件方式有误。引入css文件方式须为**require(’!style-loader!css-loader!./index.css’);**，在引用中指定相应的loader。
也可以在命令行中通过–module-bind指明相应的loader：