打包资源

需要配置webpack.config.js文件

作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）

注：所有的构建工具都是基于nodejs平台运行的，模块化默认才用commonjs

打包样式资源

//resolve用来拼接绝对路径的方法
const {resolve} = require("path");
module.exports = {
 ? ?//webpack配置
 ? ?//入口起点
 ? ?entry:'./src/index.js',
 ? ?//输出
 ? ?output: {
 ? ? ? ?//输出文件名
 ? ? ? ?filename:"built.js",
 ? ? ? ?//输出路径
 ? ? ? ?//_dirname  nodejs的变量，代表当前文件的目录绝对路径
 ? ? ? ?path: resolve(__dirname,'build')
 ?  },
 ? ?module:{
 ? ? ? ?rules:[
 ? ? ? ? ? ?//详细loader的配置
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?//匹配哪些文件
 ? ? ? ? ? ? ? ?test:/\.css$/,
 ? ? ? ? ? ? ? ?//使用哪些loader
 ? ? ? ? ? ? ? ?use:[
 ? ? ? ? ? ? ? ? ? ?//use数组中loader执行顺序：从右到左，从上到下，依次执行
 ? ? ? ? ? ? ? ? ? ?//创建style标签，将js中的样式资源插入进行，添加到head中生效
 ? ? ? ? ? ? ? ? ? ?'style-loader',
 ? ? ? ? ? ? ? ? ? ?//将css文件变成commonjs模块加载到js中，里面内容是样式字符串
 ? ? ? ? ? ? ? ? ? ?'css-loader'
 ? ? ? ? ? ? ?  ]
 ? ? ? ? ?  }
 ? ? ?  ] ? 
 ? ? },
 ? ?plugins:[
 ? ? ? ?//详细plugins的配置
 ?  ],
 ? ?mode:'development'//开发模式
 ? ?//mode:"production"
}
?
/*终端依次输入
npm init
npm i webpack webpack-cli -D
npm i webpack webpack-cli -g
//安装loader
npm i css-loader style-loader -g
npm i css-loader style-loader -D
//我是在webpack5下运行的，指令为
npx webpack
(直接输入webpack无法识别)
*/

如若要在引用less文件，loader的配置不能复用，需要在数组中再加一个配置对象

module:{
 ? ? ? ?rules:[
 ? ? ? ? ? ?//详细loader的配置
 ? ? ? ? ? ?//不同文件必须配置不同的loader处理
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?//匹配哪些文件
 ? ? ? ? ? ? ? ?test:/\.css$/,
 ? ? ? ? ? ? ? ?//使用哪些loader
 ? ? ? ? ? ? ? ?use:[
 ? ? ? ? ? ? ? ? ? ?//use数组中loader执行顺序：从右到左，从上到下，依次执行
 ? ? ? ? ? ? ? ? ? ?//创建style标签，将js中的样式资源插入进行，添加到head中生效
 ? ? ? ? ? ? ? ? ? ?'style-loader',
 ? ? ? ? ? ? ? ? ? ?//将css文件变成commonjs模块加载到js中，里面内容是样式字符串
 ? ? ? ? ? ? ? ? ? ?'css-loader'
 ? ? ? ? ? ? ?  ]
 ? ? ? ? ?  },
 ? ? ? ? ?  {
 ? ? ? ? ? ? ? ?test:/\.less$/,
 ? ? ? ? ? ? ? ?use:[
 ? ? ? ? ? ? ? ? ? ?'style-loader',
 ? ? ? ? ? ? ? ? ? ?'css-loader',
 ? ? ? ? ? ? ? ? ? ?//将less文件编译成css文件
 ? ? ? ? ? ? ? ? ? ?//需要下载less less-loader
 ? ? ? ? ? ? ? ? ? ?'less-loader'
 ? ? ? ? ? ? ?  ]
 ? ? ? ? ?  }
 ? ? ?  ] ? 
 ? ? }

注：不要忘记将less，css文件引入出口文件src/index.js中

import './index.css'
import './index.less'

打包html资源

/* 
loader :  下载  使用（配置loader）
plugins: ? 下载 引入 使用
*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
?
module.exports = {
 ? ?entry:'./src/index.js',
 ? ?output:{
 ? ? ? ?filename:"built.js",
 ? ? ? ?path:resolve(__dirname,'build')
 ?  },
 ? ?module:{
 ? ? ? ?rules:[
 ? ? ? ? ? ?//loader的配置
 ? ? ?  ]
 ?  },
 ? ?plugins:[
 ? ? ? ?//plugins的配置
 ? ? ? ?//html-webpack-plugin
 ? ? ? ?//功能：默认会创建一个空的html,自动引入打包输出所有的资源(js/css)
 ? ? ? ?//需求：需要有结构的html文件
 ? ? ? ?new HtmlWebpackPlugin({
 ? ? ? ? ? ?//复制此路径下的html文件，并自动打包输出所有资源
 ? ? ? ? ? ?template:'./src/index.html'
 ? ? ?  })
 ?  ],
 ? ?mode:'development'
}

注：一定要在本地磁盘下载包html-webpack-plugin