webpack

ps：webpack 最新语法有变化，也支持中文文档。可以看官方中文文档

思考题： 1.什么是webpac？2.由什么组成？3.如何使用？部分内容参考的是 阮一峰老师的英文档教程。

1.什么是webpack？

我们通常在html 页面前边会通过 script标签引入 一堆的js

这一大堆js 会造成：1. 可能变量名冲突2.顺序只能按照< script > 顺序加载3.只能自己记得 文件之间的依赖关系4.大型项目各个资源难以管理。长期导致代码混乱不堪

虽然有很多的标准出现，但风格都不一样

例如：CommonJs (特点：exports 或 module.exports) 但，依然是顺序加载，易阻塞。例如： AMD 提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不顺畅还有 其他的标准等

有没有一种模块化系统

可以兼容多种模块风格，尽量可以利用已有的代码，不仅仅只是 JavaScript 模块化，还有 CSS、图片、字体等资源也需要模块化。

在编译的时候，要对整个代码进行静态分析，分析出各个模块的类型和它们依赖关系，然后将不同类型的模块提交给适配的加载器来处理。

比如一个用 LESS 写的样式模块，可以先用 LESS 加载器将它转成一个CSS 模块，在通过 CSS 模块把他插入到页面的 < style> 标签中执行。 Webpack 就是在这样的需求中应运而生。## 总结： Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

2. webpack 的主要组成

需要一个配置文件叫做：webpack.config.js ，运行webpack 命令时候 ，读取其中的任务 先了解如何运行，自己再学习配置文件的书写格式– 先看下边

3.如何使用

1. 比如：a.js 里边引入b.js模块。 合并为一个js

我们使用webpack 把这两个模块进行合并

首先全局安装 npm i -g webpack (生存环境和gulp 一样)然后在局部安装 npm i –save-dev webpack npm info webpack 查看版本开始使用： 合并 a.js(包含b.js) —> 输出 ok.js## 执行：webpack a.js ok.js Webpack 会分析入口文件，解析包含依赖关系的各个文件。 这些文件（模块）都打包到 ok.js 。 Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时，会先执行 a.js 中的代码，其它模块会在运行 require 的时候再执行。

2. Loader (如何合并其他格式的文件)

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

1.什么是loader?

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。 我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

2.loader的组成

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。 大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。## 总结：loader只是一个js模块（实现格式转换的） 常用的 比如说我要 写react 项目：

用到的 转译工具 有 babel-core(babel核心) babel- loader(webpack接口文件) babel-preset-es2015 babel-preset-react (这两个是babel插件) css-loader style-loaser less(核心组件) less-loader(接口文件）

3.loader的使用 压缩css

npm install css-loader style-loader在index.html 中加入style.css 在a.js 中添加 require(“!style-loader!css-loader!./style.css”)

- 上边的意思是 读取外链的css-loader，再用style-loader插入到页面中。

3.配置文件书写

## 1).单文件入口

每次命令行执行任务，不太爽，写入配置文件 webpack.config.js 自动执行 例如： 我们 index.html 中引入了ok.js(需要合并才能用) ok.js = a.js + b.js

// webpack.config.js module.exports = { entry: './ajs', output: { filename: 'ok.js' } };

2).多文件入口

如果有a.js（包含有其他模块） 和 d.js（包含有其他模块） 是独立的两个模块 各自 压缩就是多文件入口：

module.exports = { entry: { bundle1: './a.js', bundle2: './d.js' }, output: { filename: '[name].js' } };

3).react 转译

module.exports = { entry: './main.jsx', //jsx格式文件 output: { filename: 'reactOk.js' // 转换成功的文件 }, module: { loaders:[ { test: /\.js[x]?$/, //匹配loader处理文件的正则 exclude: /node_modules/, // exclude忽略文件 loader: 'babel-loader?presets[]=es2015&presets[]=react' //加载loader的名称 } ] } };

4).react 转译的另外一种写法（query)

切记：先安装 “babel-core” babel-loader 上边两个是 转义 核心模块，必须安装。

而且：一定要，一定要 ，要配置好 .babelrc

“babel-preset-es2015”

“babel-preset-react” module.exports = { entry: './main.jsx', //jsx格式文件 output: { filename: 'reactOk.js' // 转换成功的文件 }, module: { loaders:[ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015', 'react']} // } ] } };

5).css-loader 的读取和插入到页面

入口文件 main.js 中加入 require(./app.css) “` module.exports = { entry: ‘./main.js’, output: { filename: ‘bundle.js’ }, module: { loaders:[ { test: /.css$/, loader: ‘style-loader!css-loader’ }, ] } }; 注意：需要用到连个loader 来处理css 一个读取处理（css-loader），一个插入到页面(style-loader)，\ 但值得注意的是不同的 loaders 被引用的时候 在中间加入感叹号。

这里的 书写顺序是 从右到左的，否则，webpack 会报错。

比如： less 时候 这样写 style-loader!css-loader!less-loader “`

- ## 6).Image loader 图片加载到js中 -入口文件 mian.js 加入 ``` var img1 = document.createElement("img"); img1.src = require("./small.png"); document.body.appendChild(img1); ``` ``` module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, module: { loaders:[ { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' } ] } }; url-loader?limit=8192 //这句的意思是：图片大小 在8192字节内就直接转化能base64数据图片， 超过8192字节就 按照普通图片输出 ```

插件：