webpack-secondDay

最新推荐文章于 2024-10-02 15:47:16 发布

小夵

最新推荐文章于 2024-10-02 15:47:16 发布

阅读量110

点赞数

分类专栏： webpack 文章标签： webpack 前端

本文链接：https://blog.csdn.net/qq_41219789/article/details/100655216

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

secondDay（2019/7/26）

wabpack学习

一、webpackLoader学习

昨天学习加载了js文件，今天开始学习加载css文件、图片、scss文件、css与js抽取剥离和压缩。

加载css文件

1）第一步需要安装css和style模块解析的依赖 style-loader和css-loader；

2）添加css解析的loader，css-loader就是辅助解析js中的import ‘./style/index.css’ ；style-loader就是把js中的css内容注入到HTML标签中，并添加style标签。

3）并且在webpack.config.js 的module中添加匹配规则；

4)在入口文件js中引入添加的css文件，语句为：import ‘./style/index.css’

然后添加的css样式即可显示成功。

加载图片

我在刚刚的在css中，添加语句background: url(’…/static/1.jpeg’)，运行时就会报错，提示说需要我们安装合适的loader去处理这个文件类型，所以需要我们安装适合的loader去处理图片的引入

1）安装ulr-loader npm install url-loader

2）同样，在webpack.config.js中添加匹配规则；这样解析的时候，遇到图片就可以正确加载了。

相关代码配置及最后成果显示如下：

安装的相关loader
配置匹配规则
在入口js文件中引入
实现了一个简单的toDoList

加载sass文件

加载sass文件同样需要sass-loader来处理

1）安装sass-loader，npm i sass.js sassjs-loader。

2）同样，在webpack.config.js中添加匹配规则；

3）新建一个sass文件，写入样式，运行即可加载正确样式。

（注：我自己的工程里写的scss文件。）

css抽离

webpack开始使用mini-css-extract-plugin，如果抽取了样式，就不能再用style-loader注入到html中了。

1)首先安装插件：npm install --save-dev mini-css-extract-plugin

2）配置webpack.config.js给.css文件添加匹配规则。

按理说，完成上面两步的时候，配置好应该就可以用了，但是出现了许多问题，首先是css样式加载失败，然后在配置规则的时候，在use中，添加了一个css-lorder，然后，样式首先是加载出来了。但是执行打包以后还是会报错。代码和错误如下：

3）上网查了一下这个插件，据说是这个插件使用会导致HMRS(即模块热替换（hot module replacement）的简称，它可以在应用运行的时候，不需要刷新页面，就可以直接替换、增删模块。),而且一般都是在生产者环境中，所以把mode也换成production，试了一下还是不行，感觉不是这块的原因。

配置代码：
执行打包以后，错误提示：
修改代码：
成功输出：

css压缩

webpack5好像内置css压缩，但是我们使用的是webpack4，所以需要我们自己去安装一个插件即可。

1）安装css压缩插件：npm i -D optimize-css-assets-webpack-plugin

2）在webpack.config.js 文件中的optimization下添加这个插件

配置如下图：

js压缩

压缩js需要一个插件：uglifyjs-webpack-plugin。

1）安装插件：npm i -D uglifyjs-webpack-plugin

2）配置webpack.config.js。

3）打包项目，可以看见压缩后的js文件

配置文件如下：

在这里插入图片描述
7. js代码抽离

在很多事时候，会共用到一个js库，这个时候就需要把公共的部分抽离出来，打包成一个公共文件，这个时候就需要用到一个优化项，在webpack.config.js的optimization中添加一个splitChunks，使用这个就可以将代码抽取出来。代码如下：

三、遇到问题

1、css剥离插件的问题比较多，刚开始是样式加载不出来，后面发现我的样式是.scss文件，需要一个处理scss的插件先处理这个文件，才能进行抽离，后面样式出来了，但是输出的文件一直找不到，而且会一直报错，我也尝试使用file-loader去处理，官网上可以使用，但是最后还是尝试使用mini-css-extract-plugin，然后修改配置以后就可以加载出来。

2、js提取公共文件的时候，splitChunks开始看见这个的时候，也以为要安装一下loader，但是安装的时候就说找不到这个插件，后面百度了一下，这个可以直接使用，不用做配置就可以直接使用。

3、splitChunks中chunks的三个参数，all：所有文件，按照自己的方式去处理，定义异步处理就异步处理，同步处理就同步处理，initial：自己定义文件按什么方式去处理，async ：异步处理。