Webpack是一个模块打包器(bundler)。

在Webpack看来, 前真个所有资源文件(js/css/img/less/...)城市作为模块措置惩罚惩罚

它将按照模块的依赖关系进行静态分析，生成对应的静态资源

理解Loader

Webpack 自己只能加载JS模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载

Loader 自己也是运行在 node.js 环境中的 JavaScript 模块

它自己是一个函数，接受源文件作为参数，返反转展转换的功效

loader 一般以 xxx-loader 的方法定名，xxx 代表了这个 loader 要做的转换成果，好比 json-loader。

配置文件(默认)

webpack.config.js : 是一个node模块，返回一个 json 格局的配置信息东西

插件

插件件可以完成一些loader不能完成的成果。

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

Webpack 自己内置了一些常用的插件，还可以通过 npm 安置第三方插件

学习文档 :

webpack官方入门:

Webpack中文指南:

你将学到:

How to install webpack

How to use webpack

How to use loaders

How to use the development server

How to use image

初始化项目: package.json

{ "name": "webpack_test", "version": "1.0.0" }

安置webpack

npm install [email protected] -g //全局安置 npm install [email protected] --save-dev //局部安置

开始编译

创建入口src/js/ : entry.js

document.write("entry.js is work");

创建主页面 build/: index.html

<script type="text/javascript" src="http://www.mamicode.com/js/build.js"></script>

编译js

webpack src/js/entry.js build/js/build.js

检察页面效果

第二个js

创建第二个js: src/js/content.js

module.exports = " <br> It works from content.js";

更新入口js : entry.js

* document.write("entry.js is works."); * document.write(require("./content.js"));

编译js:

webpack src/js/entry.js build/js/build.js

检察页面效果

第一个加载器(loader)

安置样式的loader

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

创建样式文件: src/css/test.css

body { background: red; }

更新入口js : entry.js

+ require("style-loader!css-loader!../css/test.css"); * document.write("entry.js is works."); * document.write(require("./content.js"));

编译js, 并检察页面效果

webpack src/js/entry.js build/js/bundle.js

绑定加载器

更新入口js : entry.js

- require("style-loader!css-loader!./test.css"); + require("./test.css");

编译:

webpack src/js/entry.js build/js/bundle.js --module-bind css=style-loader!css-loader

检察页面效果

使用webpack配置文件

创建webpack.config.js

module.exports = { entry: "./src/js/entry.js",//入口路径配置 output: {//出口配置 path: __dirname + ‘/build/js‘,//输出路径 filename: "bundle.js"//输出文件名 }, module: { loaders: [//模块加载器配置 { test: /\.css$/, loader: "style!css"} //所有css文件声明使用css-loader和style-loader加载器 ] } };

编译

webpack webpack --progress //编译显示进度

问题---每次改削模块文件内容的从头手动打包，，刷新

自动编译

webpack --watch //编译并启动监视(但需要刷新浏览器)

浏览器自动刷新(热加载)----解决手动刷新浏览器问题

npm install [email protected] -g webpack-dev-server 访谒: :8080/webpack-dev-server/ ; :8080 !!!发明问题----访谒的是文件夹路径而不是页面 devServer:{ contentBase: ‘./build‘,//内置处事器动态加载页面地址的目录 historyApiFallback:true,//不跳转 inline:true } contentBase : 默认webpack-dev-server为根文件夹供给内置的处事，如果其他目录下的文件 供给处事需要在此设置目录(我们设置为build文件夹) historyApiFallback : 开发单页面的时候非常有用，它依赖于H5的 history API，当 设置为true的时候所有的跳转都指向index.html； port：可以设置端标语，不设置时候默认为 8080 inline ： 设置为true的时候回自动刷新(有的版本需要共同hot : true使用) webpack-dev-server 访谒: :8080 问题：页面没有热加载，自动刷新，因为index的src引入的硬盘中的build文件而不是webpack-dev-server处事器内存中的build 特点: 自动编译并刷新界面 不生成编译后的文件, 直接在内存中编译措置惩罚惩罚, 并启动处事器运行项目

加载图片

安置依赖的loader

npm install url-loader file-loader --save-dev url-loader比file-loader成果越发完善是对file-loader的上层封装,但二者需共同使用

添加config中loader的配置

{ test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" } //如果图片小于limit就会进行Base64编码

拷入2张图片:

小图: img/logo.png

大图: img/big.jpg