Webpack基本使用

一、webpack默认只打包js模块

• 1.webpack下载

npm init -y 生成一个初始化文件
npm i webpack webpack-cli -D 下载webpack开发依赖

• 2.在根目录新建一个配置文件 webpack.config.js

const path = require("path"); 
module.exports = {
	entry: "./src/index.js",  // 打包入口（最外层js）
	output: {
		path: path.join(__dirname,"./dist"), // 绝对路径
		filename: "bundle.js"
	}
}

• 3.修改package.json文件的 "script"属性，删掉默认的

“script”: {
	"build": "webpack --config webpack.config.js"  // 打包时要用到这个配置文件
}

• 4.在根目录下 执行打包命令
  npm run build

二、打包css资源

• 1.安装依赖：style-loader 和 css-loader
  npm i style-loader css-loader -D

• 2.配置打包规则：在webpack.config.js文件添加moudle属性配置模块规则

const path = require("path"); 
module.exports = {
	entry: "./src/index.js",  // 打包入口（最外层js）
	output: {
		path: path.join(__dirname,"./dist"), // 绝对路径
		filename: "bundle.js"
	},
	module: { // 添加module,配置模块处理信息
		rules: [ // 规则,是一个数组，数组中可以有很多个规则
			{
				test /\.css$/, // 遇到.css结尾的文件
				 // 先用css-loader加载器处理，再用style-loader加载器处理（先用到的写后边，后用的写前边）
				use: ['style-loader',"css-loader"] 
			}
		]
	}
}

三、打包图片

• 1.安装依赖：file-loader
• 2.配置打包规则：

{
	test: /\.(jpg|gif|png|svg)$/,
	use:["file-loader"]
}

四、打包less

• 1.安装依赖：less、less-loader、style-loader、css-loader
• 2.配置打包规则

{
	test /\.less$/, 
	use: ['style-loader',"css-loader","less-loader"] 
}