webpack 基本使用
第1步：最简单使用
创建一个空项目 webpack-demo，安装 webpack 依赖
npm install --D webpack webpack-cli
接着，我们在项目中创建文件 src/index.js，内容如下
console.log('哈哈')
最后我们运行，npx webpack, 你会发现 项目中多出来了 dist/main.js！
这是因为 webpack 在你不定义配置文件的情况下，默认 入口为src/index.js, 输出为 dist/main.js
第2步：配置文件
但是大多数情况下，我们项目不可能这么简单而是需要额外的配置，若你不想使用复杂的命令行，那么配置文件是你的最优选择
// webpack.config.js
const path = require('path');
module.exports = {
mode:'development', // 非必填，默认production
entry:'./src/index.js', // 非必填，默认既此值
output:{
path:path.resolve('build'), // 非必填，默认为 dist
filename: 'main.js' // 非必填，默认既此值
}
}
最后再次执行 编译也叫打包的命令 npx webpack -c webpack.config.js，
不过 配置文件可以不用指定，因为 webpack 默认会自动找项目根目录下webpack.config.js，最终执行 npx webpack 即可！
第3步：使用模板插件
一般情况下 webpack 打包后的代码 最终是会引入到 html 中使用，但是我们每次手动复制还是比较麻烦！
html-webpack-plugin是一个Webpack插件，用于简化在构建过程中创建HTML文件的过程。它的作用是在构建时自动生成HTML文件，并将打包生成的JavaScript和CSS文件自动引入到这些HTML文件中。
在npm install --D html-webpack-plugin后，我们只需对其简单配置即可
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins:[
new HtmlWebPackPlugin({
// 模板路径，需要我们在项目中创建对应的文件即可
template: path.resolve('index.html'),
filename: 'index.html' // 输出路径
})
]
}
第4步：开发环境下的优化
devServer
如上，我们每次更改文件 你都要重新打包 并【重新双击文件预览 或 手动刷新页面】，在开发中效率也太低了！ webpack-dev-server 这个一款官方开发出来的辅助工具，使用它 可以解决这些问题：它起了一个 node 服务，运行打包后的内容，不过这个打包后的内容是它自己做的， 也并不会像 npx webpack 一样将刷出产出到 dist 或 build 目录中，而是放到内存中，随着你的服务停止而销毁，并且会自动监听你源码改动 热加载页面变动！
使用步骤
安装它 npm install --D webpack-dev-server，然后运行启动命令即可 npx webpack server，最后，你就可以通过 http://localhost:8080 直接访问你的页面了！
同时，根据不同的需求，它也支持配置项
// webpack.config.js
module.exports = {
// ...
devServer:{
port: 1234 // 指定启动端口
}
}
第5步：CSS样式
前置知识
从这里开始，我们就要接触 loader 了，中文称之为加载器。
webpack在本职工作中（处理模块化）， 默认只能处理（解析） js 文件。
如下代码 我导入了 css ，若使用 webpack打包 或 webpack server启动 的时候会报错。
// style.css
body{
background-color: blue;
}
// index.js
import './style.css';
console.log('你好!');
此时我们应该为webpack添加能处理css相关额外的oader对应 loader 即可：loader的本质是一个函数，接收导入文件的原始内容，返回你处理后的内容，以下我们写一个简单自定义loader 并应用，一下子就能明白了！
// custom-loade.js
module.exports = function (source) {
console.log("当前正在处理的文件：", this.resourcePath);
console.log("上一步的结果：", source); // 这里 source 是当前 loader 处理的内容
return source; // 必须返回处理后的结果，以便传递到下一个 loader
};
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
use: ["xxx-loader",path.resolve("loader","custom-loader.js")],
},
],
}
};
方式1
npm install --D style-loader css-loader ，并为 webpack 配置上
// webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.css$/i,
use: [{ loader: "style-loader", options: { injectType: "styleTag" } },"css-loader"],
},
],
},
};
解释说明：css-loader 会处理 css 解析 并将其转换为 js 能识别的结果 类似于 return {result: "body { background-color: blue; }"}，然后 style-loader 将这个结果设置到页面上 将这个 result 以 <style>${result}</style> 插入到 DOM 中的。
方式2
npm install --D style-loader file-loader ，并为 webpack 配置上
// webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.css$/i,
use: [{ loader: "style-loader", options: { injectType: "linkTag" } },"file-loader"],
},
],
},
};
解释说明：file-loader 的功能是拷贝一个 当前导入文件的副本到构建目录中（和源文件同后缀名），并返回新文件的地址 类似于 return {result: "./build/style.css"}，然后 style-loader 将这个结果设置到页面上 将这个 result 以 <link rel="stylesheet" href="${result}"> 自动把 styles 插入到 DOM 中的。
或者 使用 mini-css-extract-plugin 这个插件，它也有这个能力，他会将 css-loader 返回的内容 提取到新创建的一个 xx.css 文件，并以 <link rel="stylesheet" href="${result}"> 自动把 styles 插入到 DOM 中的。
// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
// ...
new MiniCssExtractPlugin({
filename: '[name]-[hash].css', // 可选：输出的 CSS 文件名，默认和源文件同名
})
]
};
总结
通过这个例子我们可以了解到，js 中 导入的非 js 文件 需要额外的对应 loader 来处理，并且可能会需要多个loader 来协助处理。
多个 loader 会形成一条链路，处理的顺序是逆行的：后者会把执行结果递交个上一个 loader 继续执行，直至到第一个 loader 。
第 6 步：less 或 sass
less 或 sass 都是 css 预编译器，浏览器并不能直接识别，webpack 也不能直接识别，需要安装额外的 loader 来处理。
{
test: /\.less$/i,
use: ['style-loader', 'css-loader', 'less-loader'],
}
以上会把 less-loader 会把 less 转为 css，然后 css-loader 处理css为js可识别内容，style-loader拿到内容后以<style>形式插入到dom中，如果你想以 <link rel="stylesheet">形式插入需要额外的处理下
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 提前 npm install --D mini-css-extract-plugin
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader, // 提取 CSS 到单独的文件
'css-loader', // 将 CSS 转换为 CommonJS
'less-loader' // 将 Less 编译为 CSS
]
}
]
},
plugins: [
new MiniCssExtractPlugin()
]
};
最后：create-new-webpack-app
每次涂手搭建webpack项目的时候，都要npm install --D webpack webpack-cli，并且还需要手动创建 webpack.config.js，这还仅仅只是最基本的必须操作。
后续还要配置入entry、output、plugin、loader 等等，若你用到了vue、react 框架 还要配置的更多！
因此 webpack 团队出了一个专门用于初始化项目的 npm cli 包 create-new-webpack-app
创建一个空项目，执行以下命令，会有交互式选项，选择完成后即可创建项目！
npx create-new-webpack-app
