Webpack基本构建
一、安装
在安装之前，本地环境需要支持node.js。
简单初始化一个项目：
npm init -y
安装：
npm -g
cnpm -g //使用淘宝镜像安装
npm -cli -g // 全局安装 -cli
二、创建项目
例：
三、..js 配置文件
基础配置
/*webpack.config.js webpack的配置文件当运行 webpack 指令时，会加载里面的配置所有的构建工具都是基于 node.js 平台运行的，模块化默认采用commonjs
*/// resolve 用来拼接绝对路径的方法
const {resolve} = require('path');module.exports = {// webpack 配置// 入口起点entry: './src/index.js',// 输出output: {// 输出文件名filename: 'built.js',// 输出路径// __dirname nodejs的变量， 代表当前文件的绝对路径path: resolve(__dirname, 'build')},// loader的配置module: {rules: [// 详细loader配置]},// plugins的配置plugins: [// 详细的plugins 配置],// 模式mode: 'development', //开发模式// mode: 'production', // 生产模式
}
四、打包css和less文件（ 下载 使用（配置））
本身只能处理模块，如果要处理其他类型的文件，就需要用到进行转换。
所以，如果需要在应用中添加css文件，就需要用到css-和style-，css-会遍历CSS文件，然后找到url()表达式处理他们，style-会把原来的CSS代码插入到页面中的一个style标签中。
用处理CSS文件
// loader的配置module: {rules: [// 详细loader配置{test: /\.css$/, // 匹配.css结尾的文件// 使用Loader进行处理use: [// use数组中的执行顺序：从右到左，从下往上，依次执行'style-loader',// 创建style标签，将js中的样式资源插入，添加到head中生效'css-loader'// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串]}]},
// ‘style-’ 创建style标签，将js中的样式资源插入，添加到head中生效
// ‘css-’ 将css文件变成模块加载到js中，里面内容是样式字符串
// use数组中的执行顺序：从右到左，从下往上，依次执行
安装css-和 style-
npm i css- style- -D
打包less文件
{test: /\.less$/,use: ['style-loader','css-loader','less-loader'// 将less文件编译成css文件 需要安装less-loader和less]}
安装less-和less
npm i less- -D
npm i less -D
五、打包html文件（插件 下载 引入 使用）
安装html--
npm i html-- --save-dev
//引入插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');// 引入插件
// plugins的配置plugins: [// 详细的plugins 配置 插件 html-webpack-pluginnew HtmlWebpackPlugin() // 功能：默认创建一个空的html文件，自动引入打包输出的资源],若想要生成有结构的HTML文件，则需要添加配置选项
plugins: [// 详细的plugins 配置 插件 html-webpack-pluginnew HtmlWebpackPlugin({template: './src/index.html' // 复制'./src/index.html'文件，自动引入打包输出的所有资源（js/css）}) // 功能：默认创建一个空的html文件，自动引入打包输出的所有资源（js/css）],
这样就复制了’./src/index.html’文件:
build中的index.html就和src中的index.html一样了。
六、打包图片资源 /src/index.html文件中添加内容
<body><h1>Good night!h1><div id="box1">div><div id="box2">div><div id="box3">div><img src="./images/cute.jpg" alt="">
body>
/src/index.less文件中添加样式（图片分别为24.5KB, 34.8KB, 335KB）
#title {color: #fff;
}#box1 {width: 200px;height: 200px;background-image: url('./images/兔牙.jpg');background-repeat: no-repeat;background-size: 100% 100%;
}#box2 {width: 300px;height: 300px;background-image: url('./images/cute.jpg');background-repeat: no-repeat;background-size: 100% 100%;
}#box3 {width: 400px;height: 400px;background-image: url('./images/小王子.jpg');background-repeat: no-repeat;background-size: 100% 100%;
}
配置文件中添加：
{// 处理图片资源test: /\.(jpg|png|gif)$/,loader: 'url-loader',// 需要url-loader和file-loaderoptions: {// 优点：减少请求数量（减轻服务器压力）// 缺点：图片体积会更大（文件请求速度1更慢）limit: 336 * 1024 // 图片小于336kb就会被base64处理 } }
下载url-和file-：
npm i url- file- -D
图片可以显示：
【问题】不能识别HTML里面的img标签
【解决】
{test: /\.html$/,// 并不是处理html文件，而是专门处理html文件中的img图片标签（负责引入图片，从而能被url-loader打包处理）loader: 'html-loader', options: {esModule: false}}
下载html-
npm i html- -D
七、打包其他资源 打包icon图标资源
1、创建项目，从图标库中打包下载图标代码
点击下载至本地，解压。
2、将.css和.ttf .woff .woff2文件复制到项目中（可放入src/icon文件夹下）。
3、Index.js中引入.css文件。
import './icon/iconfont.css'
index.html文件中添加span标签
<body><h1>Have a good time!h1><span class="iconfont">span><span class="iconfont">span><span class="iconfont">span><span class="iconfont">span>
body>
4、添加配置文件
{// 打包其他资源（除了html/js/css/less之外的资源）exclude: /\.(css|js|html|less)/,loader: 'file-loader'}
5、显示
最好每打包一部分就运行一次查看结果。
运行：
直接在终端进入此文件夹输入命令：
【..js】
/*webpack.config.js webpack的配置文件当运行 webpack 指令时，会加载里面的配置所有的构建工具都是基于 node.js 平台运行的，模块化默认采用commonjs
*/const {resolve} = require('path');// resolve 用来拼接绝对路径的方法
const HtmlWebpackPlugin = require('html-webpack-plugin');// 引入插件module.exports = {// webpack 配置// 入口起点entry: './src/index.js',// 输出output: {// 输出文件名filename: 'built.js',// 输出路径// __dirname nodejs的变量， 代表当前文件的绝对路径path: resolve(__dirname, 'build'),},// loader的配置// 不同文件需要配置不同Loader module: {rules: [// 详细loader配置{test: /\.css$/, // 匹配.css结尾的文件// 使用Loader进行处理use: [// use数组中的执行顺序：从右到左，从下往上，依次执行'style-loader',// 创建style标签，将js中的样式资源插入，添加到head中生效'css-loader'// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串]},{test: /\.less$/,use: ['style-loader','css-loader','less-loader'// 将less文件编译成css文件 需要安装less-loader和less]},{// 处理图片资源test: /\.(jpg|png|gif)$/,loader: 'url-loader',// 需要url-loader和file-loaderoptions: {// 优点：减少请求数量（减轻服务器压力）// 缺点：图片体积会更大（文件请求速度1更慢）limit: 336 * 1024, // 图片小于336kb就会被base64处理 esModule: false} },{test: /\.html$/,loader: 'html-loader', // 并不是处理html文件，而是专门处理html文件中的img图片标签（负责引入图片，从而能被url-loader打包处理）options: {esModule: false}}]},// plugins的配置plugins: [// 详细的plugins 配置 插件 html-webpack-pluginnew HtmlWebpackPlugin({template: './src/index.html' // 复制'./src/index.html'文件，自动引入打包输出的所有资源（js/css）}) // 功能：默认创建一个空的html文件，自动引入打包输出的所有资源（js/css）],// 模式mode: 'development', //开发模式// mode: 'production', // 生产模式
}
八、清理dist文件夹 clean--
由于过去的代码会遗留在dist中，导致dist目录非常混乱，无法追踪到哪些文件是实际在项目中用到的。因此推荐在每次构建前清理dist文件夹，把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净，再生成新的，如此便只会生成用到的文件，下面的插件可以实现这个功能：
npm i clean-- --save-dev
最新版的中 new ()；中不需要写里面的目标路径，会自动清除生成的文件夹，比如是build文件夹。
九、开发服务器 ， 的热更新 : 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器…）
每次修改代码之后都要重新打包一次再运行，非常麻烦，可以使程序修改后浏览器自动刷新，不用再重新输入命令打包，还可以自动打开浏览器。
..js配置
// 开发服务器：devServer 特点：只会在内存中编译打包，不会有任何输出// 启动devServer指令：npx webpack serve （webpack5之后）devServer: {contentBase: resolve(__dirname, 'build'),// 项目构建后的路径compress: true,// 启动gzip压缩port: 3000,// 端口号open: true // 自动打开浏览器（默认）},
的热更新
模块热更新（热替换），其目的是为了加快用户的开发速度，提高编程体验。它并不适用于生产环境，这意味着它应当只能在开发环境中使用。
模块热替换（HMR - Hot ）
它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面：
..js 文件的配置 引入库使用new .()设置选项中的hot字段为true
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');// 清除文件const webpack = require('webpack');module.exports = {entry: {app: './src/index.js'},devtool: 'inline-source-map',devServer: {contentBase: './dist',hot: true},plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Hot Module Replacement'}),new webpack.HotModuleReplacementPlugin()],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};
就酱@_@
