什么是Webpack
Webpack是前端资源打包工具,可以将多个静态文件打包为一个文件,减少资源的请求次数。
Webpack安装
npm install -g webpack webpack-cli
#查看Webpack版本
webpack -v
es5演示
1. 创建一个项目webpack
2. npm init -y 进行初始化
3. 创建js文件
01.js:
//在01.js中创建js方法
const sum = function(a,b){
return parseInt(a) + parseInt(b);
}
//设置可以被其他js调用的方法
module.exports = {
sum
}
****
02.js
const sub = function(a,b){
return parseInt(a) - parseInt(b);
}
module.exports = {
sub
}
****
main.js
const m = require('./01.js');
const n = require('./02.js');
console.log(m.sum(5,12));
console.log(n.sub(5,12));
4. 打包
----4.1 webpack目录下创建webpack.config.js
const path = require("path"); //node.js内置模块
module.exports = {
entry:'./js/main.js', //配置入口文件
output:{
path:path.resolve(__dirname,'./dist'), //输出路径 __dirname为当前文件所在路径
filename:'bundle.js' //输出文件
}
}
----4.2 命令行执行编译命令进行打包
webpack #有黄色警告
或
webpack --mode=development #设置为开发环境或者生产环境,则没有警告
执行后查看bundle.js,里面包含了被打包的源文件的内容并进行了代码压缩
生成的bundle.js
(()=>{var r={898:r=>{r.exports={sum:function(r,t){return parseInt(r)+parseInt(t)}}},648:r=>{r.exports={sub:function(r,t){return parseInt(r)-parseInt(t)}}}},t={};function n(s){if(t[s])return t[s].exports;var e=t[s]={exports:{}};return r[s](e,e.exports,n),e.exports}(()=>{const r=n(898),t=n(648);console.log(r.sum(5,12)),console.log(t.sub(5,12))})()})();
命令行运行:
PS E:\VueProject\webpack\dist> node .\bundle.js
17
-7
同时打包js和css
1. 安装style-loader和css-loader
Webpack本身只能处理JS。如果要处理其他类型文件,就需要使用loader进行转换。
npm install -D style-loader css-loader
2. 修改webpack.config.js
const path = require("path"); //node.js内置模块
module.exports = {
entry:'./js/main.js', //配置入口文件
output:{
path:path.resolve(__dirname,'./dist'), //输出路径 __dirname为当前文件所在路径
filename:'bundle.js' //输出文件
},
//增加了如下配置:
module:{
rules:[
{
test:/\.css$/, //打包规则应用到css结尾的文件上
use:['style-loader','css-loader']
}
]
}
}
3. 创建一个css文件,并被main.js引入
style.css
body{
background-color: red;
}
main.js
const m = require('./01.js');
const n = require('./02.js');
require('./../css/style.css')
console.log(m.sum(5,12));
console.log(n.sub(5,12));
4. 打包,并创建一个html,引入打包后的bundle.js