webpackの学习笔记1

1-webpack

 模块加载器兼打包工具。在webpack中，把各种资源看作一个模块，如js、样式、图片等，都可以作为模块来使用与处理。不同的模块对应不同的加载器，称为loader。

 

2-webpack优势

  可以将任何文件类型模块化，可以通过commonJS的形式开发，支持AMD与CMD，打包、压缩混淆，图片转base64等

 

3-安装node与npm

  安装webpack前，需安装npm，安装npm之前需安装node.js。node.js自带了软件包管理器npm，webpack需node.js v0.6以上支持。

  安装node：

法1：下载安装包，https://nodejs.org/en/，Windows上安装需选择全部组件，包括勾选Add to Path。

法2：使用nvm（Node Version Manager）安装nodejs，

 

4-安装webpack

  全局安装：npm install webpack –g

  查看webpack版本：webpack –v

  推荐将webpack安装到当前的项目依赖中，即可根据本地项目使用对应版本的webpack：

  首先，创建一个测试目录：mkdir testapp

  然后，通过npm初始化该目录：

npm init

name(testapp) hello

npm初始化时会创建一系列基础信息，包括name、version、description、main、author、licence，只要写上name与author，一路回车即可，完成后这些信息将保存在package.json配置文件中。

   上面说到，可以将webpack安装在当前目录下：

   npm install webpack –save-dev

   可简写为：npm i webpack –D

其中，-save模块名将被添加到dependencies，可简化为参数-S；-save-dev 模块名将被添加到devDependencies，可以简化为参数-D。安装完成后，会出现一个node_modules目录，这里面会存放通过npm安装的模块。

 

Webpack打包：

先在testapp目录下创建index.html，其中引入的外部js文件不是我们创建的，而是用webpack生成的文件；

创建app.js文件，命名无所谓，下面会通过webpack打包这个js文件

打包：webpack app.js build.js

其中，app.js为我们创建的外部文件，build.js为我们将app.js打包后的js文件。查看当前文件夹，可看到app.js、build.js、index.html、node_module、packpage.json。打开浏览器即可看到index.html呈现的页面。

 

 

loader：

webpack本身只能处理JavaScript模块，但通过loader转换功能可以实现对其他类型文件的处理。loader可以理解为模块与资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。那么，则可以通过require来加载任何类型的模块或文件，如vue、sass或图片。

 

查看文件内容：TYPE C:\WINDOWS\REDEA.TXT

 

安装css的loader：

    css的转换，需要引入两个loader，css-loader与style-loader

npm install css-loader style-loader –save-dev

新增test.css文件；

在app.js中利用require引入test.css；

打包

 

加载图片：

首先图片需要url-loader加载器，npm install url-loader –save-dev

修改css

再打包

 

 

详细细节可参看：

http://mp.weixin.qq.com/s?__biz=MzI1ODE4NzE1Nw==&mid=2247484497&idx=3&sn=db3c4c05f5b603a56f6c896394d18d6e&chksm=ea0d4eabdd7ac7bd0cd663c544a2872286b1de52ec4a2d506f9966e5656675d68772fa90ea78&mpshare=1&scene=1&srcid=0420sNnJvqqkEwC7cNhA03zV#rd