Webpack是什么

Webpack是一个模块打包工具，把相互依赖的html、css、javacript、图片、字体经过一系列的处理，打包成静态的前端项目。

好处

以往的项目开发中，需要通过在html中引入大量的javascript、css等文件，会导致命名冲突、体积变大等问题。在nodejs出现后，可以通过require进行模块化开发，并且支持npm方便管理依赖。使用webpack用来将nodejs的模块化代码构建成浏览器可执行的代码。

使用

创建

创建一个目录，可命名为webpackLearning
cd到当前目录，执行npm init -y
还是当前目录，执行npm add webpack webpack-cli --dev
在根目录创建一个src源文件目录，在src下创建index.js写入console.log("hello world")
在根目录创建index.html文件，在通过script标签引入刚刚创建的index.js
通过live server（vscode插件）执行html文件。控制台显示打印hello world
回到cmd，执行npx webpack打包命令
打包后发现生成了dist文件夹，文件夹中包含一个main.js文件

核心：配置文件

webpack.config.js文件

const path=require("path")
module.exports={
 mode:"development",
 entry:"./src/index.js",
 output:{
   filename:'dist.js',
   path:path.resolve(__dirname,"dist")
 }
}

形成基础配置，分别问开发模式，入口文件路由，输出文件名以及输出文件路径

添加loader

我们在src目录下创建一个style.css文件，并在index.js文件中导入使用，打包发生爆错，因为没有引入对应的loader，我们在控制台执行npm add --dev style-loader css-loader. 在配置文件中做如下改动,用来将.css后缀的文件，与我们的loader联系起来

const path=require("path")
module.exports={
 mode:"development",
 entry:"./src/index.js",
 output:{
   filename:'dist.js',
   path:path.resolve(__dirname,"dist")
 },
 module:{
   rules:[
     {
       test:/\.css$/i,
       use:["style-loader","css-loader"]
     }
   ]
 }
}

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")  //用于自动生成html文件
const TerserPlugin=require("terser-webpack-plugin")     //用于将打包后的代码进行压缩
const BundleAnalyzerPlugin=require("webpack-bundle-analyzer")  //用户webpack打包项目的可视化
module.exports={
 mode:"development",        //开发模式
 devtool:"inline-source-map",   
 entry:"./src/index.js",       //入口文件
 output:{             
   // filename:'[name].[contenthash].js',  //为了避免浏览器缓存，可生成随机的打包后的文件名
   filename:'dist.js',    //静态写死的文件名
   path:path.resolve(__dirname,"dist")        //打包文件路径
 },
 optimization:{   //压缩配置项
   minimize:true,    //是否压缩
   minimizer:[new TerserPlugin()]  //使用导入的插件
 },
 devServer:{
   static:"./dist",         //配置为代码改动后自动更新
 },
 plugins:[
   new HtmlWebpackPlugin({
     title:"blogList"
   }),               //自动生成html的配置
   new BundleAnalyzerPlugin.BundleAnalyzerPlugin()   //可视化工具配置
 ],
 module:{
   rules:[
     {
       test:/\.css$/i,         //正则匹配.css后缀的文件
       use:["style-loader","css-loader"]   //使用响应的loader
     },
     {
       test:/\.(png|svg|jpg|jpeg|gif)$/i,
       type:"asset/resource",           //内置了对图片静态资源的解析器
     },
     {
       test:/\.js$/,
       exclude:/node_modules/,    //排除node_modules
       use:{
         loader:"babel-loader",
         options:{
           presets:["@babel/preset-env"]
         }
       }
     }
   ]
 }
}

引入的依赖（通过npm add --dev导入的）： package.json文件中

{
  "name": "webpacklearning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --open"    //可通过npm start启动
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.24.0",     
    "@babel/preset-env": "^7.24.0",  //向低版本兼容
    "babel-loader": "^9.1.3",
    "css-loader": "^6.10.0",           //css的loader
    "html-webpack-plugin": "^5.6.0",     //自动生成html的依赖
    "style-loader": "^3.3.4",          
    "terser-webpack-plugin": "^5.3.10",  //压缩依赖
    "webpack": "^5.90.3",
    "webpack-bundle-analyzer": "^4.10.1",    //可视化工具依赖
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.2"   
  }
}

一文搞懂Webpack

Webpack是什么

好处

使用

创建

核心：配置文件

添加loader