webpack 图片打包-Webpack前端项目打包配置

配置

其中

outputPath 负责输出目录, 即打包后的写在磁盘的位置.

publicPath 则是对页面引入资源的补充,比如 img 标签引入或者 css 引入等.

按上面路径配置时, 打包后文件都在 build/img

开发环境 下可以正确引入文件,引入路径为 localhost:8080/img

生产环境 下引入路径为 f:///img 导致找不到图片

output : 指定将放置目标文件的

文件系统

路径. 这跟我们遇到的文件没多大关系.那问题就是在 publicPath

publicPath : 指定目标文件的 自定义公共 路径,它是定义公共路径,所以我们在开发模式下能正确引入文件,因为都在同一个路径下,即 localhost:8080 .

别忘了我们引进图片有两种方式, img 标签或者 css 引入.

当我将 file-loader 路径配置修改为

因为打包后目录结构是

结果通过 css 引入的图片打包后还可以正确引入,路径是 ../img

但是通过 img 标签引入的图片则报错,引入路径是 项目根目录/img ,正确的应该是 项目根目录/build/img

我们看看打包后的 js 中的引入路径

看起来好像是正确的,但是有一点, CSS 和 JS 引入图片的机制是不一样,详细可以看 css和js引用图片的路径问题

我们已经找到问题所在了, 那么该如何解决呢?

不设置 file-loader 的 outputPath 和 publicPath ,默认跟随 webpack 的打包目录, 这还不够,我们还得将 css 文件也打包到跟图片文件同级.

打包后目录为

这样不管是 生产环境 还是 开发环境下 都能正确引入图片.

但是当图片多了之后 build 目录下会有很多的文件,我们还是希望图片文件打包后在 img

文件夹

.让我们再来看看这该怎么解决.

我们已经知道了设置了 file-loader 下的 publicPath 就是 css 文件与 js 文件引入图片的路径,因为 css 和 js 引入的机制不同,我们只需要将 css 文件打包之后与 html 同级即可.

修改 webpack 配置

修改前

修改后

打包后目录结构

完美解决.

修改 extract-text-webpack-plugin 的options以及 file-loader 的 publicPath

打包后的目录

根据两个文件夹的位置关系, 我们设置 extract-text-webpack-plugin

移除 file-loader 的干扰

1、安装依赖包

初始化项目为nodejs项目

另一种是在html中通过img标签的src引入,因为webpack对html支持不友好,所以需要借助插件html-webpack-plugin

第三种是借用拷贝插件,直接强行拷贝所有图片,因为本项目图片是在xslt中引用,所以采用第三种和第一种结合的方式处理图片,在plugin参数中添加

如果css是与其余的css一起打包,那么其中对fonts资源的引用路径也会自动发生变化,一定注意,是个大坑!!

1、现在本地创建项目目录

2、然后在中写入html的结构

3、想要先安装jquery,先npm init -y一下, npm install jquery -S 【项目目录安装,必须是小写的jquery,否则会报错】,在引入

4、在中写入内容如下:

使用webpack处理一下,转换成浏览器可以识别的文件

:

a:

先全局安装一下webpack=> npm install webpack@3.5.5 -g

b:

在终端中执行: webpack ./src/【要处理的文件的目录】 ./dist/【要输出的文件的目录以及文件名】 ,会在dist中生成一个文件,然后在

中引入的文件改成

这样的话每次打包时候都需要执行 webpack ./src/ ./dist/

c:

为了不手动指定入口和出口文件,在项目根目录中新建一个(基于node的,所以** **的命令都可以识别)

这样的话,就可以在终端中直接执行命令:webpack就可以直接打包了,但是还有个小问题。就是它不 会自动更新,需要手动刷新一下。下面我们就来解决这个问题。来配置webpack-dev-server

4、使用webpack-dev-server实现自动打包编译

直接安装webpack最高版本的时候,可能会遇到报错的情况,如果对于版本没有要求的话,可以降低版本:

npm install webpack@3.5.5 -D 如果还会有报错出现的话,可以试试使用cnpm安装

需要先在终端中安装webpack-dev-server:具体操作如下:

4.1

npm/cnpm install webpack-dev-server -D 出现下面的提示:【其实此步骤容易出现报错,所以呢,把webpack-dev-server版本修改为@2.9.1=>webpack-dev-server@2.9.1时,就不会报错】

4.2

npm/cnpm install webpack -D 【此步骤也是容易出错的,所以安装的时候要和上边的版本保持一致,webpack@3.5.5版本】

4.3

需要在中配置dev

最后直接执行:npm run dev运行成功,但是需要注意的是此时打包成的文件不是磁盘中存在文件,而是一个与src dist node_module同级的看不见的文件,在引入的路径也要修改以下=》<script src="/"></script>

此时,正常打包,但是不自动打开浏览器

发布出来,方便自己查看,有什么不对的地方,希望留言纠正修改。(程序员菜鸟一枚)