Webpack简单学习

什么是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