什么是webpack

一种静态模块打包器，将js/css/images等静态资源进行打包，生成相应的静态模块。
资源构建工具

npm init 初始化一个package.js包

核心概念

Entry，入口，webpack从哪里入口开始打包。
Output，输出到指定路径
Loader，处理非js的资源，帮助webpack理解。
Plugins，执行范围更广的任务。

Mode, develop; production

目录结构

在这里插入图片描述

npm install jquery
npm install webpack webpack-cli -D   #本地

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

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

webpack 打包index.js

webpack ./src/index.js -o ./build --mode=development
//或者 --mode==production

//执行
node ./build/main.js

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

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

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

打包css/img等资源

需要使用loader，需要配置webpack.config.js(在src的同级目录)

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

//resolve拼接绝对路径
const {path} = require("path")
module.exports = {
	entry: './src/index.js', //入口
	output:{
		filename:'main.js',
		//__dirname nodejs中的变量，代表当前文件的目录
		path: resolve(__dirname, 'build')
	},
	//loader
	module:{
		rules:[
			{
				test:/\.css$/,
				//加载css文件转为commonjs，     创建style标签
				use:['css-loader','style-loader']
			},
			{
				test:/\.less$/,
				use:['css-loader','style-loader','less-loader']
			}
		]
	}
}

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

//安装 -D 安装到devDependencies开发依赖
npm install style-loader css-loader less less-loader -D
webpack  //打包