webpack

最新推荐文章于 2025-09-07 18:55:52 发布

什么都不会的咸鱼

最新推荐文章于 2025-09-07 18:55:52 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

文章标签： webpack

本文链接：https://blog.youkuaiyun.com/weixin_45516590/article/details/99423175

本文深入解析Webpack，涵盖安装、配置、实时打包构建、模块热替换等关键功能，详解Loader与插件作用，展示如何处理JS、CSS文件，适合前端开发者进阶。

webpack+插件
打包、编译、测试、调试
本质上webpack是一个JavaScript应用程序的静态模块打包器。当webpack处理应用程序时，会递归的构建一个依赖关系图，其中包含应用程序的每个模块，然后将所有这些模块打包成一个或多个bundle。
webpack安装
1.cnpm i -g webpack全局安装webpack，可以全局使用webpack
2.在项目根目录中运行npm i webpack --save-dev 安装到项目依赖中
运行npm init初始化项目，使用npm管理项目中的依赖包
编写配置
默认:webpack.config.js
修改:webpack --config xxxxwebpack基本配置

module exports={
  entry:"文件名",
  output:{
    path:"结果目录"，
    filename:"结果文件名"
  }
}

案例：

1.js文件:
import mod1 from "./2"
console.log(mod1)

2.js文件:
export  default 12;

webpack.config.js文件：

const pathlib =require("path");
module.exports={
    entry:"./src/1",
    output:{
        path:pathlib.resolve("dest/"), //目标目录
        filename:"bundle.js"  //输出文件名
    },
    mode: 'development' // 设置mode
}

webpack的实时打包构建
1.由于每次重新修改代码之后，都需要手动运行webpack打包的命令。比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
2.此时需要在package.json中配置。配置文件如下：

    "main": "基础webpack.config.js",
    "scripts": {
    "start": "webpack-dev-server --watch --inline --config 基础                 webpack.config.js"
    },

此时只需要输入npm start 即可。注意：此时目录下并没有生成bundle.js文件，因为webpack-dev-server将打包好的文件放在了内存中。好处是:由于需要实时打包编译，所以放在内存中速度较快。此时在页面中引入bundle.js需要修改script的src属性为

入口(entry)
输出(output)
loader
插件(plugins)
入口起点:entry指示webpack应该使用那个模块,来作为构建其内部依赖图的开始。进入入口起点，webpack会找出有哪些模块和库是入口起点依赖的。
出口：output属性告诉webpack在那里输出它创建的bundles,以及如何命名这些文件，默认值为./dist。基本上，整个应用程序结构，都会编译到指定的输出路径文件夹中。可以通过在配置中指定一个output字段，来配置这些处理过程。
loader：loader让webpack能够处理那些非JavaScript文件。loader可以将所有类型的文件转换为webpack能够处理的有效模块。然后可以利用webpack打打包能力，进行处理。本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块。
插件：loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
模式:通过选择develoment或production之中的一个来只是mode参数。
多入口

entry:{
   名字:"入口文件地址",
   ......
},
output:{
  path:xxx,
  //[name]占位符
  filename:"[name].xxxxx"  
}

dev-server
安装cnpm i webpack webpack-cli webpack-dev-server -D#webpack-cli 命令行工具
npm i -g webpack
#webpack 库
npm i webpack

模块热替换

const pathlib =require("path");
const Webpack=require("webpack");
module.exports={
    entry:"./src/1.js",
    output:{
        path:pathlib.resolve("dest/"), //目标目录
        filename:"bundle.js"  //输出文件名
    },
    plugins:[
       new Webpack.HotModuleReplacementPlugin()//引入插件
    ],
    devServer:{
        contentBase:pathlib.resolve("static"),
        port: 8989,
        hot: true, //开启热替换
        historyApiFallback:true
    },
    mode: 'development' // 设置mode
}

1.webpack本身
  打包
2.DevServer
  开发服务器
3.Loader--翻译
  babel-loader       给webpack用
  babel-core         babel核心库
  babel-preset-env   环境预设
 
   使用：
  module:{
  rules:[
  {test:正则,use:loader}
]
}

webpack核心
1.打包==>配置
2.DevServer
3.各种loader 转换器
使用webpack打包css文件
1.运行cnpm i style-loader css-loader --save-dev
2.修改webpack.config.js配置文件:

  module:{
     //用来配置第三方loader模块
     rules:[{test:/\.css$/,use:["style-loader","css-loader"]
           }//处理css文件的规则
      ]
}

注意:use表示使用那些模块来处理test所匹配到的文件;use中相关loader模块的调用顺序是从后向前调用的；
使用webpack处理css中的路径
1.运行cnpm i url-loader file-loader --save-dev
2.在webpack.config.js中添加处理url路径的loader模块