毫无疑问，webpack已经成为一个前端打包器。网上有很多关于webpack的相关文章，官方网站也对webpack的具体配置做了明确的说明。本文主要根据自己的学习讲解webpack的简单例子，让初学者在实战中入门。文中的例子是基于webpack4的，所以请注意你当地的环境，不要因为环境问题浪费不必要的时间。如果文章有错误，请改正。

我的例子是渐进的，让我们从最简单的开始

创建一个新的演示文件夹，然后将命令行切换到当前目录，并执行以下命令

在NPM init-ynpm安装web pack-save-dev之后，我们可以看到添加了演示文件来生成package.json文件，这非常重要。一般来说，这个文件包含了当前项目需要的所有依赖项，你可以解释具体的功能。

然后我们在demo下创建一个新的文件夹src，在demo下创建一个新的文件webpack.config.js，在src文件夹下创建一个新的main.js，由index.html创建。

main.js

document . write(' hello world ')；index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title style body { background-color :黄色；}/style/head body script src=' http : list/bundle . js '/script/body/html webpack . config . js

const path=require(' path ')；module.exports={entry: '。/src/main.js '，output 3360 { path : path . resolve(_ dirname，' dist ')，filename3360' bundle.js'}}执行以下指令

成功执行webpack - mode开发命令后，您会发现演示文件下有一个额外的dist文件夹，dist文件夹中有一个额外的bundle.js文件

此时，在浏览器中打开index.html文件，您将看到以下内容

这样，我们就完成了一个最简单的webpack示例，我们将逐步展开它！

1.根据模板生成index.html

这需要使用html-webpck-plugin，webpack的插件

NPM install-save-dev html-WB pack-pluginwebpack . config . js

const path=require(' path ')；const HTMlWebPackLugin=require(' HTMl-web pack-plugin ')；module.exports={ entry: '。/src/main.js '，output : { path : path . resolve(_ dirname，' dist ')，filename:'bundle.js' }，plugins :[new html webpackplugin({ filename : })。/index.html '，template3360' index.html'})]}修改index.html并移除bundle.js的引用

index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title style body { background-color :黄色；}/style/head body/body/htmlexecute说明

经过网络包模式的开发，我们会看到index.html以demo/index.html为模板，在dist目录下生成

至于具体的html-webpack-plugin插件参数的解释，可以查看本文

2.加载CSS文件

要加载css文件，需要使用相应的加载器，这意味着需要配置相应的加载器。

我们先准备相应的文件。我们将在src下创建一个新的css文件夹，并创建一个新的文件样式

我们将index.html中的样式移动到style.css文件中，并做一点修改

style.css

车身{背景-颜色：黄色；color:red}然后在main.js文件中，我们介绍相应的样式

main.js

从“”导入样式。/CSS/style . CSS ' document . write(' hello world ')；加载Css文件需要CSS加载器和样式加载器，安装它们需要npm

npminstall-save-devcss-loader style-loader来配置webpack.config.js文件

const path=require(' path ')；const HTMlWebPackLugin=require(' HTMl-web pack-plugin ')；module.exports={ entry: '。/src/main.js '，output : { path : path . resolve(_ dirname，' dist ')，filename:'bundle.js' }，module : { rules 3360 [{ test :/。css$/，use:['style-loader '，' css-loader'] } ] }，Plugins :[new html webpackplugin({ filename : })。/index.html '，模板：' index.html'})]}最后，我们执行webpack模式的开发

此时，我们在浏览器中查看dist添加的index.html文件，结果如下

这时，如果你仔细看dist文件夹，你会发现里面没有css文件，但是在index.html，它的内容如下

！DOCTYPE html html lang=' en ' Head meta charset=' UTF-8 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/Head body script type=' text/JavaScript ' src=' http : bundle . js '/script/body/html那么问题来了，风格在哪里？实际上，样式已经打包到bundle.js脚本中了。你可以在这个文件中搜索“背景色”，你会发现一些东西。

3.加载图片

让我们改变风格，在风格中引入图片

我们首先在src目录中创建新的img文件夹，同时在文件夹中放入图片test.jpg，然后我们更改样式

style.css

车身{背景-颜色：黄色；color:red背景-image: url('./img/test . jpg ')；}如果此时直接打包，会报错。我们需要相应的加载器来加载图片，这里我们使用url加载器，我们还需要文件加载器来加载文件。

NPM install-save-dev URL-loader file-loaderwebpack . config . js

const path=require(' path ')；const HTMlWebPackLugin=require(' HTMl-web pack-plugin ')；module.exports={ entry: '。/src/main.js '，output : { path : path . resolve(_ dirname，' dist ')，filename:'bundle.js' }，module : { rules 3360 [{ test :/。css$/，use:['style-loader '，' css-loader'] }，{ test:/。(jpg|png|gif)$/，使用：[{ loader:'url-loader '，选项：{ outputPath: '。/images/'，limit:500 } }] } ] }，plugins :[new html webpackkplugin({ filename : })。/index.html '，template3360' index.html'})]}执行指令webpack - mode development，然后我们会发现dist文件夹下还有一个images文件夹可以浏览index.html，如下所示。

至此，我们已经完成了图片的加载。

4.单独的CSS文件

要分离样式文件，您需要使用webpack插件extract-text-webpack-plugin

NPM安装-保存-开发[电子邮件保护]注意：当我写这个演示时，最新版本的extract-text-webpck-plugin有问题，所以你需要安装下一个版本。如果您以后在打包时出错，请稍后确认此步骤。还有一点需要注意的是，样式中的图片路径是相对于样式文件所在的目录的。这时候我们单独拉出样式文件，图片原来的路径肯定是变了。此时，我们需要将公共路径配置为.url加载程序中的“/images”。

webpack.config.js

const path=require(' path ')；const HTMl WebPACKlugin=require(' HTMl-web pack-plugin ')；const ext plugin=require(' ext-text-web pack-plugin ')；module.exports={ entry: ' ./src/main.js '，输出： { path : path。resolve(_ dirname，' dist ')，filename:'bundle.js' }，模块： { rules 3360 [{ test :/ .css$/中，使用： extracteplugin。提取({ fallback : ' style-loader '，use:'css-loader' }) }，{ test:/ .(jpg|png|gif)$/，使用：[{ loader:'url-loader '，选项：{输出路径： ' ./images/'，limit:500，publicPath: './images' } }] } ] }，plugins:[新的html webpakplugin({ filename : })./index.html '，' template:'index.html' })，新的extplugin(' CSS/[name]).[hash:8].css') ] }之后，执行网络包模式开发，然后我们就会发现距离下多了一个钢性铸铁文件夹。

5.热更新和自动刷新

热更新和自动刷新需要使用网络包-开发-服务器，它是一个基于Node.js和工具的一个小型服务器，它有强大的自动刷新和热替换功能。在命令行使用网络包-开发-服务器依赖于webpack-cli，因此也需要安装webpack-cli

NPM安装-保存-开发网络包-开发-服务器网络包。配置。射流研究…

const path=require(' path ')；const HTMl WebPACKlugin=require(' HTMl-web pack-plugin ')；const ext plugin=require(' ext-text-web pack-plugin ')；const web pack=require(' web pack ')；module.exports={ entry: ' ./src/main.js '，输出： { path : path。resolve(_ dirname，' dist ')，filename: 'bundle.js' }，devServer: { inline: true，hot: true，host: '0.0.0 '，port: 9000，contentbase :路径。resolve(_ dirname '，/dist ')，compression : CSS $/，使用：提取文本插件。提取({ fallback : ' style-loader '，使用： 'css-loader' }) }，{ test: / .(jpg|png|gif)$/，使用： [{ loader: 'url-loader '，选项： {输出路径： ' ./images/'，limit: 500，publicPath: './images' } }] } ] }，plugins: [新的html webpakplugin({ filename : })./index.html '，' template: 'index.html' })，新的extplugin(' CSS/[name]).[hash:8].css ')，新的网络包.hotmoduleereplacementplugin()]}更改package.json文件

脚本： { ' test ' : ' echo '错误：未指定测试退出1 '，' dev ' : ' web pack-dev-server-mode development ' }，此时我们执行新公共管理运行开发，然后在浏览器打开localhost:9000，就可以看到我们的应用了。

而此时我们更改脚本，进行保存后，更改后的内容会实时展现在页面上。但是我们更改样式却会发现没有变化！

原因是我们的样式是通过提取-文本-网络包-插件进行分离到单独的钢性铸铁文件中，而hotmoduleereplacementplugin只会去监听射流研究…脚本的变化。为了实现更改样式时，实时看到效果，我们只要不使用提取-文本-网络包-插件加载钢性铸铁即可，官方建议也是不要在开发环境中使用提取-文本-网络包-插件。

6.配置映射

配置映射，添加devtool: "内联源代码映射"选项即可，开发工具的具体选项有很多

当然，关于工具的配置还是有很多的，我这里的列子应该是足够入门了，后面有时间的话我会再此基础上再讲一些其他工具相关配置。当然我本次列子中有很多是可以进行进一步的扩展的，但本文的目的重在入门引导，后面自己对工具的理解更加深入时，也会进行进一步的分享。

该项目的线上地址，欢迎大家下载。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。