webpack 入门实践(三)

目标:如何将 image 通过 webpack 部署到生产环境,以及将 html 文件部署到生产环境

基本:熟悉 js 的 web 前端工程师

工具:visual studio code, 已经了一段时间,小巧玲珑,功能强大,非常好用,最初为 javascript typescript 而生,也可以通过安装插件配置来支持很多语言,我用他写 js, python go 和 groovy。非常好用,强烈推荐给 web 前端开发人员,以后有机会给大家分享其玄机所在,他也是 js 写的 CS 应用。非常好用(重要的事情说三遍) 。

继续我们 webpack ,我现在 index.html 文件中添加一个 img 标签来显示一张图片。如下图

然后安装所需的依赖

html-loader :html 加载器

html-webpack-plugin:将生产环境的 css 和 js 自动引入到加载到生产环境的 html 文件。

file-loader : 文件加载器

clean-webpack-plugin:清除 webpack 文件

我们还需做些准备工作,在之前 index.html 存在项目根目录下,并不是和 js 和 css 一起放在 src 文件下,使用 webpack 对 src 中的 css 和 js 打包后, index.html 也并不在 dist 文件夹中,这不是我们想要的,我们希望开发时 html 也同 js 和 css 一样,放置到 src 文件夹下,webpack 打包后,html 也会出现在 dist 文件中,并且自动引入打包好的 js 和 css。

1. 去掉 html 之前的 css 和 js 的引用

将 index.html 也放置在 src 文件夹下

然后来加载图片文件,jpg|png 表示接受 jpg 和 png 文件,在选项中我们配置加载后的文件名称,outputPath 为将文件复制到的文件夹的位置,publicPath 表示图片相对于index.html 引用的路径。

我们引入 html-webpack-plugin 插件.

然后在 plugins 中直接实例化一个 html-webpack-plugin,配置要加载 html 的位置

运行 npm run build:prod 将项目打包到 dist 文件下,运行后没有错误提示,说明成功将项目部署到生产环境。文件夹机构如下图,我们发现 img 和 index.html 都在 dist 文件夹中。

并且在 index.html 自动地引用了 css 和 js 文件。

最后添加 cleanWebpackPlugin 插件,该插件将在每次打包前清除旧的文件。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180301G1EELU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券