https://www.webpackjs.com/
首先，去官网下载node.js 并安装！
一，我们在合适的位置创建一个文件夹，比如e:webpack/test，然后进入这个文件夹按着shift+鼠标右键，点击 “在此处打开powershell窗口”
初始化项目，输入:
npm init
一路按enter键即可
二， 接下来安装webpack
（1） 全局安装webpack ，我们在命令行输入： npm install -g webpack
（2） 通常我们会将webpack安装到项目依赖，这样就可以使用本地版本的webpack，我们在命令行输入： npm install webpack --save-dev
三，安装 webpack-cli
npm install -g webpack-cli （此处我使用本地安装 npm install webpack-cli -D）
四 ,设置模式 （该步骤我没有使用）
webpack --mode development
五，创建入口文件
根目录下创建src,并添加入口index.js文件，必须命名index.js，否侧会报错
六，配置
我们在package.json中scripts中加入两个成员：
"dev":"webpack --mode development",
"build":"webpack --mode production"
（ 该步骤我没有使用
全局安装webpack-cli
npm -i webpack-cli -g 本地安装： npm install webpack -D）
七 ， 打包
npm run build
//接着输入 webpack-cli 或者 webpack-command 即可
在项目中是不是生成了dist/main.js
将文件引入index。html看看效果吧
转自：https://www.cnblogs.com/wanghuoya/p/9286431.html
基础示例
尚硅谷 b站
文档：https://www.yuque.com/zhangyuge-vkorl/nmt4ko/plsxw6irc06kwqqc
调试过程中:
1 webpack 和 webpack-cli 全局安装了
2、node使用的最新全局安装包，改为局部node@14X
----------------------------------------
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const TerserPlugin = require("terser-webpack-plugin")
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer");
/**
纯webpack配置
需要全局安装，仅仅局部安装后续处理有问题
npm i webpack webpack-cli -g -D
npm i webpack webpack-cli -D
*/
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry:'./src/index.js',
// entry: {
// main: './path/to/my/entry/file.js',
// },
output:{
filename: 'index.js', // 默认main.js
// filename: '[name].[contenthash].bundle.js',
path: path.resolve(__dirname,'dist'),// 绝对路径
},
// 别名
resolve:{
alias: {
asset: path.resolve(__dirname,"src/asset")
}
},
module:{
rules:[
// npm i --save-dev style-loader css-loader
// css-loader 分析css模块之间的关系，并合成一个css
// Style-loader 会把css-loader生成的内容，以style挂载到页面的heade部分
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
// webpack4的三个loader(在webpack5中已经被替代)
// 参照文档： https://blog.csdn.net/gtLBTNq9mr3/article/details/117173678
// file-loader // 将文件发送到输出目录。将文件import/require()解析为url
// url-loader // 将文件作为data URL内联到bundle中。默认使用file-loader处理路径，增加了识别图片大小，转换为base64，减小体积。所以不需要再安装file-loader
// raw-loader // 将文件导入为字符串。
// webpack5新增的四种资源模块类型：(图片等静态你资源文件，原生自带处理功能，配置即可 )
// https://blog.csdn.net/gtLBTNq9mr3/article/details/117173678
// asset/resource 发送一个单独的文件并导出URL，（替代file-loader）
// asset/inline 导出一个资源的data URL 。（替代url-loader）
// asset/source 导出资源的源代码。（替代raw-loader）
// asset 在导出一个文件和发送一个单独文件之间自动选中。（替代url-loader并配置体积大小限制）
test: /\.(png|svg|jpg|jpeg|gif)$/i,
// webpack5配置
type: "asset/resource", // 替代webpack4的 file-loader
// type: 'asset', //配置图片大小限制
// parser: {
// dataurlCondition:{maxSize:10*1024}
// }
// 以下是webpack4的配置
// loader: 'url-loader',
// options:{
// // 小于10K，处理为base64.
// // 优点： 减少服务器请求量
// // 缺点：图片体积变大，文件请求速度变慢
// limit: 10*1024,
// // 是否使用es6模块导出，默认是true
// esModule: true,
// // [hash:5]获取图片的hash的前5位
// // [ext]获取文件原来的扩展名
// name: '[hash:5].[ext]'
// }
},
// {// 字体不要使用url-loader处理，否则转换成base64浏览器无法识别
// test: /\.(woff|woff2|eot|ttf|otf)$/i,
// loader:"file-loader",
// options:{
// esModule: true
// }
// },
{
test:/\.ico$/i,
use: 'asset/inline' // 新增模块 替代url-loader
},
{
test:/\.text$/i,
use: 'asset/source' // 替代webpack4中的 'raw-loader'
},
// babel 兼容低版本浏览器 npm i --save-dev babel-loader @babel/core @babel/preset-env
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
// typescript
{ test: /\.ts$/, use: 'ts-loader' },
// { test: /\.vue$/, loader: 'vue-loader',
// options: {
// loaders: {
// ts: 'ts-loader',
// tsx: 'babel-loader!ts-loader',
// }
// }
// },
// {
// test: /\.html$/,
// // 处理html文件的Img图片（负责引入Img，从而能被url-loader进行处理）
// loader: 'html-loader',
// }
],
},
// 压缩js代码 npm i --save-dev terser-webpack-plugin
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
plugins:[
// 自动生成.html文件 npm i html-webpack-plugin --save-dev
new HtmlWebpackPlugin({
title: "设置网页标题",
// template: './src/public/index.html'
}),
// 可视化打包工具 npm i --save-dev webpack-bundle-analyzer
new BundleAnalyzerPlugin.BundleAnalyzerPlugin(),
],
// 自动打包 npm i --save-dev webpack-dev-server
devServer: {
static: "./dist",
},
// 在package.json中配置启动命令 执行 cnpm start
// "scripts": {
// "start": "webpack serve --open"
// },
// 注意： vue-cli-service 是基于webpack-dev-server的，webpack-dev-server是基于nodejs框架express的。
// webpack-dev-server 和 webpack serve执行的结果相同，是webpack的插件，而vue-cli-service是vue/cli脚手架的插件
// "scripts": {
// "start": "webpack serve --open",
// "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
// "dev": "vue-cli-service serve",
// "build": "vue-cli-service build",
// }
}
----------------------------------------
src/index.js
import {getData} from "./data.js";
import 'asset/style.css';
import hero from "asset/npm报错 libnpmexec.png"
// 生成元素
let blogs = getData();
let ul = document.createElement("ul");
blogs.forEach( ele=>{
let li = document.createElement("li");
li.innerHTML = ele;
ul.appendChild(li);
})
document.body.appendChild(ul);
// 生成图片
const image = document.createElement("img");
image.src = hero;
document.body.prepend(image);
// 运行npm start 之后添加的代码，也会自动打包
const h1 = document.createElement("h1");
h1.innerText = "自动打包测试";
document.body.prepend(h1);
console.log("indexSHUJU ",getData());
---------------------------------------- 基础配置过程记录
npx笔npm更加智能，使用中缺少的关联包会自动下载,如：
npm run dev
npx dev
package.json文件：管理项目的信息 依赖包 库
尚硅谷 b站
文档：
https://www.yuque.com/zhangyuge-vkorl/nmt4ko/plsxw6irc06kwqqc
首先执行yarn init -y初始化，其中-y表示所有选项使用默认值
npm init //文件夹名字有中文的话只能用这种
安装webpack：
如果本地运行有报错，就在全局和局部都安装，
yarn add webpack webpack-cli --save -dev 将webpack安装到开发者环境中
从下载样式loader开始，执行npx webpack,出现报错webpack-cli包没有下载的问题，(默认全局版本node@20)局部安装node@14就ok
css样式处理
yarn add css-loader style-loader --save -dev
兼容低版本浏览器 js
npm i --dev babel-loader @babel/core @babel/preset-env
自动生成html插件：npm i htmp-webpack-plugin -D (npm安装，yarn报错)
压缩代码 npm i --save-dev terser-webpack-plugin
可视化打包工具 npm i --save-dev webpack-bundle-analyzer
自动打包 npm i --save-dev webpack-dev-server
// devServer: {
// static: "./dist",
// },
// 在package.json中配置启动命令 ： npm start | cnpm start ,之后修改index.js中的代码会自动打包
// "scripts": {
// "start": "webpack serve --open"
// },
如： vue-cli-service 是基于webpack-dev-server的，webpack-dev-server是基于nodejs框架express的。
webpack-dev-server 和 webpack serve执行的结果相同，是webpack的插件，而vue-cli-service是vue/cli脚手架的插件
"scripts": {
"start": "webpack serve --open",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
}
webpack模块只处理js json格式的文件，其他格式的文件需要loader转换器处理。常见的loader:
style-loader
css-loader
less-loader
sass-loader
ts-loader // 将ts准换成js
babel-loader // 转换es6+ 等js新特性语法
eslint-loader // 检查
webpack4的三个loader,在webpack5中已经被替代
https://blog.csdn.net/gtLBTNq9mr3/article/details/117173678
file-loader // 将文件发送到输出目录。图片文件路径处理
url-loader // 将文件作为data URL内联到bundle中。图片大小处理，
raw-loader // 将文件导入为字符串。
webpack5新增的四种资源模块类型：
https://blog.csdn.net/gtLBTNq9mr3/article/details/117173678
asset/resource 发送一个单独的文件并导出URL，（替代file-loader）
asset/inline 导出一个资源的data URL 。（替代url-loader）
asset/source 导出资源的源代码。（替代raw-loader）
asset 在导出一个文件和发送一个单独文件之间自动选中。（替代url-loader并配置体积大小限制）
----------------------------------------
vue2老项目webpack3升级webpack5教程
https://blog.csdn.net/m0_62038960/article/details/124861942
