使用Webpack+Vue从无到有构建前端项目-纯基础入门篇(下)

上篇主要梳理了Webpack基础配置和Vue文件打包，本篇将介绍CSS和图片文件打包、常用插件，以及ES6语法解析，并对上下篇进行总结。

6. CSS文件打包

我在App.vue中改变文字的颜色为黄色，打包查看效果，但在打包的时候报错了：

从报错可以看出来想要打包css样式也需要对应的loader，所以我们需要安装配置style-loader与css-loader。

1). 安装

在上面安装vue-loader的时候已经安装过css-loader，此处只需要安装style-loader。

终端执行

npm i style-loader -D

2). 配置

webpack.config.js配置：

3). 测试

打包后在浏览器打开index.html。字已经变成黄色啦，并且在bundle.js文件中可以看到打包后的代码。

除了处理局部内联CSS，通过引入css文件修改样式同样需要通过这两个loader进行打包。

在src目录下新建assets目录用来存放静态资源。在此目录下新建styles文件夹并新建一个test.css文件，编写下面的内容，目的是想要设置紫色的背景色。

将test.css引入到App.vue，打包测试查看效果，紫色背景正常显示，且在bundle.js文件中可以看到背景色打包的痕迹。

4). 小结

所以不管打包用什么形式写入的CSS样式，style-loader与css-loader都是缺一不可的。

7. 图片文件打包

解决了样式问题，还有图片问题。正经页面肯定少不了各种各样的配图。从上面的经验可以看出来，Webpack肯定也不会打图片文件包，还是需要安装配置loader，那么需要用到的就是file-loader与url-loader。

1). file-loader配置

i. 安装

终端执行:

npm i file-loader -D

ii. 配置

在webpack.config.js中新加一条rule：

iii. 测试

在assets目录新建images文件夹，放入一张图片。并在App.vue中添加背景图片样式：

可以发现图片成功打包到了dist文件夹，但却没有正确显示。通过查看元素看到图片的引用路径好像有问题，对于打包后的图片引用路径是相对于index.html的上一级路径也就是根目录的，而实际上打包后的图片在dist文件夹中，所以当然引用失败。

这个问题我找到了一个暂时的解决办法，就是在配置file-loader的时候指定publicPath为dist：

这样背景图片就正确显示了。

2). url-loader配置

url-loader的功能与file-loader相似，不同在于它可以指定一个文件大小，当文件大小低于这个限制的时候会直接返回一个dataURL，这样一个图片如果比较小，就会直接以base64的形式打包在js文件中，好处在于能够减少http请求的发送，优化页面性能。

i. 安装

终端执行:

npm i url-loader -D

ii. 配置

配置webpack.config.js:

iii. 引入一张很小的图片测试 在images文件夹放入一张小于2KB的图片，并在App.vue中引入，打包测试：

可以看出dist文件夹中并没有新的图片打包生成，在bundle.js文件中可以看到已经图片的base64编码。

3). 打包到指定文件夹并保留图片原名

现在打包后的图片会直接放在dist文件夹下，我们的习惯肯定是希望有专门的images文件夹可以存放打包后的图片。除此之外发现打包后的图片的命名是乱的，不打开看就不知道这个图是啥，所以我们还希望图片命名能保留。需要如下配置：

打包后发现出现了images文件夹，并且打包后的图片保持了原名。

但dist看起来有些奇怪，我们之前打包后名字混乱的图片也依然在文件夹中，但实际上这些图我们已经用不到了。手动删除？万一误删了怎么办，能不能每次打包的时候旧的东西能自动变没呢。

那么现在就是插件的趴了。

8. 用了会变美好的插件

1. clean-webpack-plugin插件

使用clean-webpack-plugin插件就可以在每次打包前清理输出目录，这样目录里只会生成要用到的文件。

i. 安装

终端执行

npm i clean-webpack-plugin -D

ii. 配置

配置webpack.config.js：

clean-webpack-plugin需要用到ES6结构的方法来提取出CleanWebpackPlugin的构造函数。

与配置loader不同，插件的配置一般是需要先在文件开头进行引入，然后在plugins里new一下。

iii. 测试

打包测试，发现历史遗留的乱码命名图片文件已经不见啦，问题解决。

2. html-webpack-plugin插件

回想一下上面的步骤，我们曾经自己在根目录里新建了一个主页面文件index.html，并且手动把bundle.js引入到这个index.html里。听起来就很麻烦，工具不就是用来解放双手的嘛，如果啥都手动引还要工具干啥。

所以html-webpack-plugin插件就是用来解决这个解放双手的问题的。

i. 安装

终端执行：

npm i html-webpack-plugin -D

ii. 配置

配置webpack.config.js:

iii. 测试

打包测试，发现在dist目录下生成了index.html，并且自动引入了打包后的bundle.js文件。

这时候打开浏览器访问index.html，发现报了一个错误：

Cannot find element: #app. -> 找不到#app的元素

发现自动生成的html里没有id为app的<div>。这可咋办？

iv. 指定html模板

我们可以指定一个index.html模板。首先写好一个主页文件，这里就用之前写在根目录的index.html删掉引入bundle.js的部分，然后在webpack.config.js进行配置，指明我们想让打包后的html文件内容是什么。

可以看出新的自动生成的index.html已经有app了。

这个时候我们需要注意的是，由于此时我们查看效果的index.html文件的上级目录是dist，而且我们已经在前面将打包后的图片放到dist/images文件夹，所以此时url-loader的publicPath应该改为images，这样图片才能正常显示。

3. CSS3属性自动添加前缀

为了兼容不同浏览器，CSS3属性需要加前缀。但是每次都要查哪些属性需要加前缀太麻烦了。所以我们需要autoprefixer插件来帮我们做这件事。

i. 安装

autoprefixer插件是postcss-loader提供的，所以要同时安装它们俩。

npm i postcss-loader autoprefixer -D

ii. 配置

首先配置webpack.config.js。因为和style-loader与css-loader一样都是处理.css文件的，所以我们改变一下rules书写的方式。

其次我们需要在package.json文件中添加字段"browserslist"，告知插件我们需要兼容哪些浏览器。

iii. 测试

用CSS3属性transform进行测试，打开开发者工具可以看到已经自动添加了前缀。

9. 开发环境下的工具

开发环境下需要不断的修改代码内容并调试，所以我们需要能够使我们开发更容易的开发环境。

1. 实时重载

上面我们在每次对文件修改后都需要在终端打包并且手动在浏览器打开主页文件，如果我们每次修改完成后浏览器都能自动重新加载就好了。

Webpack的webpack-dev-server提供了一个简单的web服务器(dev server)，能够实时重新加载。

i. 安装

终端执行

npm i webpack-dev-server -D

ii. 配置

配置webpack.config.js：

在package.json添加执行脚本

iii. 测试

在终端执行npm run dev启动devServer。启动完成后主页文件会在浏览器自动打开，修改代码内容后页面会自动重新刷新修改，不需要每次都手动执行打包命令并且刷新页面了。

10. ES6语法解析

项目中有时会用到ES6语法，但版本较低的浏览器是不支持ES6的，就不能正常解析。所以我们常使用babel将下一代的ES编译成ES5的语法，保证我们想表达的内容在绝大多数浏览器上都可以展示。

1. 安装

安装前先说一下我踩过的坑，babel系列的安装对于版本对应的要求是非常严格的，如果不对应就会疯狂报错不能使用。所以我在这里安装的各个版本都是搭配起来能够正常使用的。具体的版本对应关系大家可以自己查一下资料。

终端执行：

npm i babel-loader@8.1.0 @babel/core@7.10.3 -D

2. 配置

配置webpack.config.js

3. 安装预设工具

npm i @babel/preset-env@7.10.3 -D

4. 配置.babelrc文件

在项目根目录新建.babelrc文件，编写下面的内容。

5. 测试

由于使用devServer的话它会把我们打包的所有内容放在电脑内存中，我们看不到打包后的文件。关闭服务，手动打包测试。

11. 总结

以上就是使用Webpack+Vue从无到有构建前端项目的基础流程，因为文章是从解决问题的角度出发梳理的流程，所以并不是最佳步骤。如果说正常开发中，流程我认为大概是这样：

项目初始化 -> Webpack基础配置(打包.js文件) -> 服务配置 -> 需要的插件 -> vue-loader配置(打包.vue文件) -> 打包css样式(style-loader与css-loader配置) -> 打包图片文件 -> 解析ES6语法配置

★,°:.☆(￣▽￣)/$: .°★ 。