webpack用来做什么?
简单的说,可以将多个js、css…文件打包成一个js文件,引用了这个js文件就相当于引用了所有的被打包的文件。
webpack安装
首先,保证你已经安装好node.js,检查一下:
node -v
安装webpack与webpack脚手架:
npm install webpack -g
npm install webpack-cli -g
在使用webpack打包之前,先初始化一下当前目录,做好准备:
npm init -f
Demo1——将多个js文件打包成一个js文件
基本目录结构:
app
├── index.html // 内部引入dist/bundle.js,用于测试打包效果
├── runoob1.js // js文件
├── runoob2.js // js文件
├── runoob3.js // js文件(主入口文件)
└── dist
├── bundle.js // 尚未创建
代码编写:
index.html --------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src=".dist/bundle.js" charset="utf-8"></script>
</body>
</html>
runoob1.js --------------------------------------------------------------------------------
exports.info = function () {
document.write("我是第一只Loli >_<");
}
runoob2.js --------------------------------------------------------------------------------
exports.info = function () {
document.write("我是第二只Loli >_<");
}
runoob3.js --------------------------------------------------------------------------------
var runoob1 = require("./runoob1.js");
var runoob2 = require("./runoob2.js");
runoob1.info();
runoob2.info();
webpack打包:
webpack runoob3.js dist/bundle.js
理解:
runoob3做为主入口js文件,依赖了runoob1.js和runoob2.js。打包后,这三个js文件被压缩为了一个整体,index.html引入这个打包形成的dist/bundle.js文件即可。
其实,就算runoob1.js和runoob2.js之间也存在依赖关系,这种关系也会被打包。webpack可以对被打包文件之间的依赖关系进行静态分析,十分方便。
Demo2——将css文件也一起打包
基本目录结构:
app
├── index.html // 内部引入dist/bundle.js,用于测试打包效果
├── runoob1.js // js文件
├── runoob2.js // js文件
├── runoob3.js // js文件(主入口文件)
├── style.css // css文件
└── dist
├── bundle.js // 尚未创建
引入loader模块:
npm install css-loader
npm install style-loader
代码编写:
index.html 同上,依旧引用尚未创建的dist/bundle.js
runoob1.js 同上
runoob2.js 同上
runoob3.js --------------------------------------------------------------------------------
require("!style-loader!css-loader!./style.css"); // 多加这一句
require("./runoob1.js").info();
require("./runoob2.js").info();
style.css ---------------------------------------------------------------------------------
body {
background: pink;
}
webpack打包:
webpack runoob3.js dist/bundle.js
理解:
webpack本身是只能打包多个js文件的,想要打包css文件需要借助loader模块进行转化。
转化的原理非常简单,css-loader用于扫描css文件,style-loader把扫描的内容从外链式转化为行内式。最终把css文件“融合”进了js文件。
Demo3——使用webpack.config.js配置文件进行统一管理
以Demo2为例(Demo2非常完整),为其新建一个配置文件:
module.exports = {
entry: "./runoob3.js",
output: {
path: __dirname,
filename: "dist/bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
直接打包:
webpack
JS Saikou!!!