Webpack小教程

首先呢，我们先来认识一下它吧。。吼吼~

webpack是一个module bundler,我们暂且管他叫“模块管理工具”。

实现模块化的方法有很多，比如说使用script标签导入js模块，顺序不好把握且我们需要自己梳理可能的冲突和依赖；使用Commonjs规范来解决问题，它使我们在服务器端的模块得到了重用，但是在浏览器端，网络的请求都是异步的，无法并行的require多个module。ES6 modules的实现也只是一小部分，并且想要得到所有浏览器的支持，相比还是需要相当的一段时间。那么我们便引入webpack吧~

当然灵活的模块管理只是webpack的众多特性之一， 它同时支持commonjs和AMD规范（甚至混合的形式）；它可以打成一个完整的包，也可以分成多个部分，在运行时异步加载（可以减少第一次加载的时间）；依赖在编译时即处理完毕，可以减少运行时包的大小； Loaders可以使文件在编译时得到预处理，这可以帮我们做很多事情，比如说模板的预编译，图片的base64处理；丰富的和可扩展的插件可以适应多变的需求。是不是想赶紧拿住它，好滴，我们进入正题。。。

1、安装
打开一个目录  
npm install webpack –g
在项目中也要下载
npm install webpack --save-dev
2、创建一个初始化文件 npm init

想设置就可以设置，默认的话一直回车回车回车.....，最后输出yes,之后会在项目中生成一个package.json的文件，这是对项目的一个基本描述。

个人感觉没什么用吧~~

3、创建文件

Name.js

Var name=”你好”;

Module.exports = name;//将你想要暴露出去的提供一个方式，固定的

Entry.js

document.getElementById("app").textContent ="Hello";

4、创建一个html文件index.html,写一个id为app的div

5、执行打包命令webpack  ./js/entry.js  bundle.js

会在项目中生成bundle.js，打开文件后最后面会发现加入了entry.js中的内容

6、在html中引入bundle.js

7、打开浏览器查看页面

8、之后每一次修改，都要在命令行中执行webpack./js/entry.js bundle.js这句话后刷新页面（太麻烦了~~别急）

9、通过webpack引入css模块化

10、npm installcss-loader style-loader --save-dev

11、创建一个style.css

12、在entry.js中引入css

require("style!css!../css/style.css");

目录结构：

13、执行编译命令，打开网页查看，这个时候发现添加了一个灰色的背景


注意了，注意了~~~下面的配置
14、编写webpack配置文件，可以节省很多编译命令
根目录下创建一个webpack.config.js

module.exports={
	//1.入口文件
	entry:"./js/entry.js",
	//2.输出路径及文件 __dirname根目录
	output:{
		path:__dirname,
		filename:"bundle.js"
	},
	//3.依赖模块
	module:{
		loaders:[
			{test:/\.css$/,loader:"style!css"}
		]
	}
}

此时我们已经不需要再在entry.js中那样引入css了
require("./style.css");
命令行编译 输入webpack即可编译


15、调试代码，通过source-map调试
查看控制台sources
执行命令webpack --devtool source-map


在配置文件中配置直接生成source-map
添加devtool:”source-map”
//添加source-map   调试代码
devtool:"source-map",


在js文件中想要调试的地方添加断点输入：debugger;

在命令行中运行一下输入：webpack
会在浏览器刷新会看到直接跳到debugger处

16、webpack结合babel处理es2015(es6)

 在命令行中安装babel：

npm installbabel-core babel-loader babel-preset-es2015 --save-dev

 

再创建一个文件.babelrc的配置文件，是一个数组

{

“presets”:[“es2015”]

}

在配置文件中配置

添加一个{test:/\.js$/,loader:”babel”}

创建一个test.js,写一些标准的es6的语法

let name = “再见”;

Es6导出方法

Export default name;

在entry.js中导入

Import name from“./name”;

Import “./style.css”

就不要之前的require了（//var name = require("../js/name");
//require("../css/style.css");）这个不要了哈~~~
不用es6时把这些相关语句注释掉
命令行执行命令webpack

17、服务热替换
npm install webpack-dev-server --global
npm install webpack-dev-server --save-dev
webpack.config.js设置
//服务器
devServe:{
inline:true,
host:’localhost’,
port:8080
}
启动命令 webpack-dev-server --inline --hot

更改一下样式表，就可以看到实时效果了

找到package.json文件，中的scripts加入一条
"build": "webpack-dev-server"

在命令行中输入npm run build   
绿色文字要保持一致

在浏览器中输入2这个地址就可以实时刷新了

 

备注：终止命令行： Ctrl+c  c

 

基本配置ok了~~

 

在其他项目中引入3个文件

切记：将bundle.js引入到页面的最后面，不能放在前面。。不然会出大事的~~

像这样的第三方库就这样引入吧，因为它没有暴露的接口。。。忧伤~~~

马上就成功了哦！

 

项目根目录下打开命令行：

执行：webpack

npm run build

浏览器中打开提供的地址

 

So-  完工！