webpack----认识webpack

什么是webpack

• 一种静态模块打包器，将js/css/images等静态资源进行打包，生成相应的静态模块。
• 资源构建工具，基于nodejs运行
  
• 安装nodejs环境（>10）
• npm init 初始化一个package.js包

webpack >4.2.6 & css-loader
版本兼容性问题

核心概念

Entry，入口，webpack从哪里入口开始打包。
Output，输出到指定路径
Loader，处理非js的资源，帮助webpack理解(默认只能打包js、json)。
Plugins，执行范围更广的任务，如打包、优化、压缩等

Mode，development 开发模式 production 生产模式（打包压缩）

目录结构

创建一个目录，进入并npm init初始化为一个包。

# 安装包
npm install jquery
# 全局安装webpack
npm install -g webpack@5 webpack-cli
npm install webpack@5  -D  //-D 表示安装到开发依赖中
npm install --save-dev webpack-cli   #开发依赖中

在src下，建立一个index.js 作为打包的入口文件。

//index.js
function  add(a,b){
	return a + b
}
console.log("测试打包")

webpack 打包js

// 以index.js作为入口开始打包；必须是/斜杠
webpack ./src/index.js -o ./build --mode=development
//或者 --mode==production

//使用node工具执行打包的文件
node ./build/main.js  

打包完成的main.js 即可以在html页面中引用，可以建立build/index.html 测试。

打包json
在src下创建data.json数据，在index.js中导入

import data from './data.json'
console.log(data)
//重新打包

案例练习

1. 编写index.html，实现一个按钮；
2. 内部引入一个打包后的main.js；
3. 点击按钮时，在控制台输出‘你在xxx时间点击了按钮’
   

注意：打包路径必须是斜杠 /

效果：

代码：
index.js

//模块化操作
import $ from 'jquery'; //ES6模块化（浏览器无法识别）

//立即执行
(function(){
    //3.3后不再用click绑定事件
    $("#app").on("click", (e) => {
        let d = new Date().toLocaleString()
        console.log("你在" + d + "时间点击了按钮。")
    })
})()

 

打包css/img等资源

默认webpack无法理解css、image等，需要使用loader，添加配置webpack.config.js(在src的同级目录)

//webpack.config.js
//webpack 先加载配置文件，基于nodejs运行

//resolve拼接绝对路径
const {resolve} = require("path")  //require 加载模块  同import
module.exports = {
	entry: './src/index.js', //入口
	output:{
		filename:'main.js',
		//__dirname 代表当前目录绝对路径
		path: resolve(__dirname, 'build') // 拼接 返回绝对路径
	},
	//loader 
	module:{
		rules:[
			{
				test:/\.css$/,
				//（css-loader）加载css文件转为commonjs，    (style-loader)放置一个style标签到header中，style内部为css样式
				use:['style-loader','css-loader']//为数组时，从后往前的顺序使用loader
			},
			{
				test:/\.less$/, // 正则
				use:['css-loader','style-loader','less-loader'] //less-loader加载less文件，转为css
			}
		]
	}
}

//src目录下创建一个index.css，并在index.js中引入
import './index.css'

//安装 -D 安装到开发环境中
npm install style-loader css-loader less less-loader -D

// 打包所有资源，命令行的参数可以全部放入配置文件
webpack  --mode==development

使用css-loader必须是webpack@5
所有资源必须导入入口文件中，打包后形成一个xxx.js，被html页面（仅仅引入一个js）引入后，动画效果、样式都有了。

 

打包html

使用html-webpack-plugin打包html。

• 下载插件

npm install html-webpack-plugin -D 

• 配置

//webpack.config.js
const {resolve} = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
	entry: "./src/index.js",
	output:{
		filename: "main.js",
		path: resolve(__dirname, 'build')
	},
	//loader模组
	module:{
		rules:[
			{test: /\.css$/, use: ['style-loader', 'css-loader']}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: "./src/index.html", // 打包index.html(打包后同名)，并自动引入打包后的js等资源
		})
	]
	mode: "development"
}

• 打包

$ webpack

 

打包图片

使用一个url-loader。

• 安装loader

npm install -D url-loader file-loader

• 配置webpack.config.js

module.exports = {
	...
	//loader 模组
	module: {
		rules: [
			{test: /\.css$/, use: ['style-loader', 'css-loader']},
			{
				test: /\.(png|jpg)$/,
				loader: "url-loader", //一个则使用loader  （es6解析url(xxx.jpg)引用的图片） 
				options: {
					limit: 8*1024  // 图片<8k 时使用base64编码处理，减少请求数据				esModule: false, //关闭es6解析，采用commonjs方式
					name: "[hash:5].[ext]" //hash值前5位，采用原来扩展名
				}
			},
			{
				test: /\.(html)$/, // 打包img标签引入的图片
				loader: "html-loader" //将图片引入，然后url-loader打包
			}
		]
	},
	...
}

• src下创建index.css、index.html、index.js
  index.css 样式，加载背景图
  index.html 简单页面，不导入任何资源
  index.js 入口文件，导入css样式

 

打包其他资源

• 如字体、icon等资源图标库
• 使用file-loader 模块（test or exclude）
• 下载字体、icon，然后在index.html中使用font class方式引用(同级目录)
  
  

<!--图标 -->
<span class='icon icon-chufang'></span>

<!--字体-->
<span class='iconfont icon-字体名'></span>

每个图标或者字体都有自己对应的名字，打包过程中引用的资源要能够找到，才能成功打包。