webpack进阶,webpack配置参数以及如何配置以及图片处理

上篇文章我们讲了webpack的基础知识,以及入门教程,从安装到打包的详细过程。建议先学完上篇教程再看此篇教程,这样你将看的更顺畅。这篇是webpack的进阶文章,会详细讲解webpack配置参数以及如何进行配置。

5.配置文件:入口和出口

webpack.config.js就是Webpack的配置文件,这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置,是webpack.config.js的基本结构,这是一个没有内容的标准webpack配置模版。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require('path');
module.exports={
//入口文件的配置项
entry:{
entry:'./src/entry.js',
//这里我们又引入了一个入口文件
entry2:'./src/entry2.js'
},
//出口文件的配置项
output:{
//输出的路径,用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'[name].js'
},
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
//[name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件。

6.配置文件: 服务和热更新

要执行webpack-dev-server是要先用npm install webpack-dev-server –save-dev 来进行下载的。下载好后,需要配置一下devServer。最简单的devServer配置项只有四个。先看一下代码,然后我再作解释。

/webpack.config.js

1
2
3
4
5
6
7
8
9
10
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,'dist'),
//服务器的IP地址,可以使用IP也可以使用localhost
host:'localhost',
//服务端压缩是否开启
compress:true,
//配置服务端口号
port:1717
}
  • contentBase:配置服务器基本运行路径,用于找到程序打包地址。
  • host:服务运行地址,建议使用本机IP,这里为了讲解方便,所以用localhost。
  • compress:服务器端压缩选型,一般设置为开启,如果你对服务器压缩感兴趣,可以自行学习。
  • port:服务运行端口,建议不使用80,很容易被占用,随便定义一个就好.
    注意:这里需要使用npm 来进行安装webpack-dev-server了, 命令如下:
1
npm install webpack-dev-server --save-dev

配置/package.json

1
2
3
"scripts": {
"server":"webpack-dev-server"
},

配置好保存后,在终端里输入 npm run server 打开服务器。然后在浏览器地址栏输入http://localhost:4200就可以看到结果了。

7.模块:CSS文件打包

Webpack在生产环境中有一个重要的作用就是减少http的请求数,就是把多个文件打包到一个js里,这样请求数就可以减少好多。

在学习CSS打包之前,需要先对webpack.config.js里的Loaders配置项进行了解。

Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理。

简单的举几个Loaders使用例子:

  • 可以把SASS文件的写法转换成CSS,而不在使用其他转换工具。

  • 可以把ES6或者ES7的代码,转换成大多浏览器兼容的JS代码。

  • 可以把React中的JSX转换成JavaScript代码。
    注意:所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置。下面我们对Loaders的配置型简单梳理一下。

  • test:用于匹配处理文件的扩展名的表达式,这个选项是必须进行配置的;

  • use:loader名称,就是你要使用模块的名称,这个选项也必须进行配置,否则报错;

  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);

  • query:为loaders提供额外的设置选项(可选)。
    打包CSS文件:

建立index.css文件

要打包CSS你必须先要有个CSS文件,在/src目录下,我们建立一个css文件夹,在文件夹里建立index.css文件。代码内容如下。

./src/css/index.css

1
2
3
4
body{
background-color: red;
color: white;
}

CSS和引入做好后,我们就需要使用loader来解析CSS文件了,这里我们需要两个解析用的loader,分别是style-loader和css-loader。

style-loader:

它是用来处理css文件中的url()等,npm中的网址:https://www.npmjs.com/package/style-loader

用npm install 进行项目安装:

1
npm install style-loader --save-dev

css-loader:
它是用来将css插入到页面的style标签。npm中的网址:https://www.npmjs.com/package/css-loader

用npm install 进行项目安装:

1
npm install --save-dev css-loader

两个loader都下载安装好后,我们就可以配置我们loaders了。
loaders配置:

修改webpack.config.js中module属性中的配置代码如下:

webpack.config.js

1
2
3
4
5
6
7
8
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},

loader的三种写法:

1.直接用use

2.把use换成loader

3.使用use+loader结合

8.插件配置:配置JS压缩

压缩JS代码:

现在你写的JS代码,在上线之前,都是需要进行压缩的,在没有webpack和gulp这些工具前,你可能需要找一个压缩软件或者在线进行压缩,在Webpack中可以很轻松的实现JS代码的压缩,它是通过插件的方式实现的,这里我们就先来引入一个uglifyjs-webpack-plugin(JS压缩插件,简称uglify)。

注意:虽然uglifyjs是插件,但是webpack版本里默认已经集成,不需要再次安装。

引入:

我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件

1
const uglify = require('uglifyjs-webpack-plugin');

引入后在plugins配置里new一个 uglify对象就可以了,代码如下。

1
2
3
plugins:[
new uglify()
],

9.插件配置:HTML文件的发布

在实际开发中,webpack配置文件是分开的,开发环境一个文件,生产环境一个文件。

打包HTML文件

我们先把dist中的html文件剪切到src目录中,并去掉我们的JS引入代码(webpack会自动为我们引入JS),因为这才是我们真实工作的目录文件结构。

然后我们配置webpack.config.js文件,先引入我们的html-webpack-plugin插件。

1
const htmlPlugin= require('html-webpack-plugin');

引入后使用npm进行安装包。

1
npm install --save-dev html-webpack-plugin

最后在webpack.config.js里的plugins里进行插件配置,配置代码如下。

1
2
3
4
5
6
7
8
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'

})
  • minify:是对html文件进行压缩,removeAttrubuteQuotes是却掉属性的双引号。
  • hash:为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
  • template:是要打包的html模版路径和文件名称。

    10.图片迈坑:CSS中的图片处理

在学习Webapck过程中可能遇到的第一个坑就是CSS中的图片处理。很多webpack新手都在图片的坑中无法自拔(有的小伙伴在开发环境中是可以找到图片的,但是一打包后就找不到图片了,有的小伙伴是不知道如何正确引入html或者css中的图片,导致程序出错),接下来我们可以具体学习看看。

找到图片后在src目录下新建一个images文件夹,把图片放入images文件夹。

在index.html文件中增加一个放置div的标签(需要注意的是这里修改的是src下的index.html文件,不是dist下的,这点新手很容易弄混,要格外注意),代码如下。

1
<div id="tupian"></div>

编写css文件,把你用的图片作为背景显示。

1
2
3
4
5
#tupian{
background-image: url(../images/manhua.png);
width:466px;
height:453px;
}

编写完成后,我们可以试着用webpack去打包一下。你会发现终端中是报错的。
file-loader、url-loader

上面的错误是由于缺少loader的解析,对loader其实我们并不陌生,因为前边已经学习了CSS打包的loader。我们先安装两个解析图片用的loader。

安装file-loader和url-loader

1
npm install --save-dev file-loader url-loader

安装好后我们需要对两个loader进行基本的了解,学习尽量做到知其然知其所以然。
file-loader:解决引用路径的问题,拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。

url-loader:如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。

配置url-loader

我们安装好后,就可以使用这个loader了,记得在loader使用时不需要用require引入,在plugins才需要使用require引入。

webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//模块:例如解读CSS,图片如何转换,压缩
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000
}
}]
}
]
},
  • test:/.(png|jpg|gif)/是匹配图片文件后缀名称。
  • use:是指定使用的loader和loader的配置参数。
  • limit:是把小于500000B的文件打成Base64的格式,写入JS。
    为什么只使用了url-loader

url-loader和file-loader是什么关系呢?简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。通过上面的介绍,我们可以看到,url-loader工作分两种情况:

1.文件大小小于limit参数,url-loader将会把文件转为DataURL(Base64格式);

2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。

也就是说,其实我们只安装一个url-loader就可以了。但是为了以后的操作方便,我们这里就顺便安装上file-loader。

11.图片迈坑:CSS分离与图片路径处理

两个知识:第一个是把CSS从JavasScript代码中分离出来,第二个是如何处理分离出来后CSS中的图片路径不对问题。

CSS分离:extract-text-webpack-plugin

有些简单的交互页面中,你的JavasScript页面代码会非常少,而大部分代码都在CSS中,这时候项目组长会要求把CSS单独提取出来,方便以后更改。遇到这个需求你不要惊慌,已经有大神为我们准备好了对象的插件(plugin)。

extract-text-webpack-plugin

这个插件就可以完美的解决我们提取CSS的需求,但是webpack官方其实并不建议这样作,他们认为CSS就应该打包到JavasScript当中以减少http的请求数。但现实中的需求往往不是我们前端能控制的,有些需求是我们不能控制的,分离CSS就是这样一个集合理由不合理的需求。

安装:录制课程时的版本是3.0.0版本,直接使用npm install 就可以安装。

1
npm install --save-dev extract-text-webpack-plugin

引入:安装完成后,需要先用require引入。

1
const extractTextPlugin = require("extract-text-webpack-plugin");

设置Plugins:引入成功后需要在plugins属性中进行配置。这里只要new一下这个对象就可以了。

1
new extractTextPlugin("css/index.css")

这里的/css/index.css是分离后的路径位置。这部配置完成后,包装代码:还要修改原来我们的style-loader和css-loader。
修改代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module:{
rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000
}
}]
}
]
},

图片路径问题:
利用extract-text-webpack-plugin插件很轻松的就把CSS文件分离了出来,但是CSS路径并不正确,很多小伙伴就在这里搞个几天还是没有头绪,网上也给出了很多的解决方案,我觉的最好的解决方案是使用publicPath解决,我也一直在用。

publicPath:是在webpack.config.js文件的output选项中,主要作用就是处理静态文件路径的。

在处理前,我们在webpack.config.js 上方声明一个对象,叫website。

1
2
3
var website ={
publicPath:"http://localhost:1717/"
}

注意,这里的IP和端口,是你本机的ip或者是你devServer配置的IP和端口。
然后在output选项中引用这个对象的publicPath属性

1
2
3
4
5
6
7
8
//出口文件的配置项
output:{
//输出的路径,用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'[name].js',
publicPath:website.publicPath
},

配置完成后,你再使用webpack命令进行打包,你会发现原来的相对路径改为了绝对路径,这样来讲速度更快。
总结:这节课我们实现了CSS的分离,并在分离后处理了图片路径不对的问题。处理路径的方法一定要充分理解,因为这在工作中经常用到。

12.图片迈坑:处理HTML中的图片

在webpack中是不喜欢你使用标签来引入图片的,但是我们作前端的人特别热衷于这种写法,国人也为此开发了一个:html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题。

只有项目安装webpack,如何打包?

并没有全局安装webpack,而是使用了项目安装。首先我要说的是,这种做法是webpack推崇的,webpack并不鼓励全局安装webpack。但是小伙伴看我视频中直接在终端用webpack进行打包项目,他使用时会出现不是内部命令或者外部命令。

这时候需要配置package.json里的scripts选项,我们以前的课程已经学习了配置 webpack-dev-server命令,在这个命令下面我们再加一个build命令进行打包项目使用。

1
2
3
4
"scripts": {
"server": "webpack-dev-server --open",
"build":"webpack"
},

配置好后,直接在控制台输入npm run build 进行打包。

如何把图片放到指定的文件夹下

你会发现打包后的图并没有在images文件夹里面,要想放images文件夹下,需要我们配置url-loader这个选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module:{
rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:5000,
outputPath:'images/',
}
}]
}
]
},

html-withimg-loader

html-withimg-loader这个插件很好用。解决的问题就是在hmtl文件中引入标签的问题。

安装:

1
npm install html-withimg-loader --save

配置loader
webpack.config.js

1
2
3
4
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}

然后在终端中可以进行打包了。你会发现images被很好的打包了。并且路径也完全正确。
总结:这节课讲了webpack图片中的坑,这些坑让我最开始的时候很头疼,通过这些过程我们将会发现这些若是提前学习了其实也没那么让人头疼。