Webpack入门指南-优快云博客

本文介绍了Webpack的基本概念及其安装方法，详细解释了如何通过Webpack进行模块打包，并涵盖了loader、plugin等核心功能，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack是什么?

关于webpack是什么其实这个问题也很好解答只需要打开webpack的官网首先映入眼帘便是这么一段话 webpack is a module bundler 翻译过来就是 webpack是一个模块打包工具 也就是说当我们的项目工程变得非常庞大的时候我们可以将项目拆分成一个个的模块同时借助webpack帮助我们打包最后整合在一起这样可以便于后期的维护和迭代

webpack的安装

关于webpack的安装其实也就是通过npm安装只需要一行命令简单粗暴值得注意的一点是 webpack最好是不要全局安装否则容易引起因为webpack版本的问题从而使得互相依赖的两个项目有冲突安装命令: npm install webpack webpack-cli -D 安装好以后在命令行工具里输入 npx webpack -v 如果正确显示版本号那么就是成功安装了webpack

关于webpack-cli

听起来像是像是一个webpack的脚手架工具是不是? 其实webpack-cli最大的作用在于帮助我们可以在命令行里可以直接使用webpack这个命令例如借助node提供的npx 可以直接在命令行里进入项目 npx webpack

webpack打包命令简化

写过vue的同学应该很熟悉这个命令 npm run dev/start 其实就是通过项目里package.json文件下的npm scripts来改变了原先的webpack打包命令

其中键dev表示的就是打包的命令值就是一些打包的规则后面会讲到

webpack的loader

webpack其实只认识js工具也就是说webpack只会自动识别.js后缀为结尾的文件清楚该怎么打包js文件但是随着项目的不断扩展只有js文件是肯定不行的所以这个时候我们就需要借助各种各样的loader来帮助我们告诉webpack 这个是个什么文件这个文件要怎么打包这也就是loader的概念

现在假设我们的项目下有一个index.js文件和一个 index.css文件 同时你在index.js文件里通过import或者require的方式引入了index.css 这个时候你想让webpack打包那么一定是会报错的所以我们需要借助一些loader来帮助我们 —— style-loader 和 css-loader

这两个loader首先通过npm install 安装在项目里同时在项目里新建一个webpack.config.js文件做好如下配置就可以让webpack知道该如何打包.css文件了是不是很简单

其中键 test对应的是一个正则也就是是什么后缀的文件键 use对应的数组就是使用哪一些loader

loader之间的关系

关于这些loader的关系其实首先css-loader帮助我们梳理各个css之间的关系然后 style-css帮助我们将css文件挂载到index.html文件的头部

postcss-loader

这个loader其实就是借助autoprefixer帮助我们自动添加厂商前缀使用这个loader的话还需要配置一个额外postcss.config.js文件

plugins

plugins 翻译过来就是插件 webpack也提供了非常多的插件来帮助我们在webpack打包的时候自动的做一些事情这里介绍两个插件

① clean-webpack-plugin 这个插件的作用在于可以在我们每次打包之前删除掉原先打包好的文件具体使用方法先通过npm install安装该插件然后在webpack配置文件里引入这个插件 const CleanWebpackPlugin = require('clean-webpack-plugin') 最后在wepback的plugins这个字段里新建一个实例plugins: [ new CleanWebpackPlugin({ cleanStaleWebpackAssets: true })

② HotModuleReplacementPlugin 看名字其实也就很简单粗暴了也就是热更新也就是当代码变化的时候你不需要手动刷新页面他可以自动帮你刷新页面是不是还挺方便具体配置的话其实基本和第一个插件大同小异先安装然后引入最后new一个实例就好了 new webpack.HotModuleReplacementPlugin()