首先呢,我们先来认识一下它吧。。吼吼~
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- 完工!