Webpack使用指南(二)
Webpack使用指南(二)
我们接着上一篇博客《Webpack使用指南(一)》继续说。
上一篇博客我们说到:使用webpack可以简化我们的工作,可以把繁琐的命令写到配置文件里,简化我们的运行命令,让开发更加高效。
接着,我们在来想一个问题:如果我们的项目需要经常的修改颜色,那我们要怎么做?
- 修改代码。2. 命令行输入webpack,回车。3.刷新页面。
但是我们一般都会写点代码就要看一下最新的效果,甚至于改代码的时候,写一行就要看效果,如果我们继续执行前面的方法,也能实现,但是太麻烦,太耗费时间。
接下来我们就来介绍一个简单的方法,来满足这个需求:
接下来的下载的一些东西,我会指定一下版本,这样的话能尽可能保证不因为版本问题导致出错。
webpack-dev-server
webpack-dev-server
就是帮助我们实现前面需求的工具,安装配置完成后,他可以自动监听我们代码的改变,自动帮助我们打包我们的代码,这样就省去了很多麻烦,废话不多说,我们来看怎么玩。
- 首先,要本地安装
webpack-dev-server
,运行命令:npm i [email protected] -D
。
安装成功后,如果我们直接在命令行里输入webpack-dev-server
是没有任何作用的,因为这不是一个全局命令。我们是本地安装的,上一篇博客我也说过了本地安装和全局安装的区别。
- 所以,如果我们要想用这个东西,我们需要在
package.json
文件中名字为scripts
的json里加上一行代码:
"dev": "webpack-dev-server"
此时,我们在命令输入的就不能在是webpack-dev-server
了,而是npm run dev
,就好像给它指定了一个名字一样,不过需要npm来执行。
不过,这还不够,如果你尝试了npm run dev
你会发现还是不行,因为我们缺少了一个webpack依赖。当然这个webpack也是需要本地安装的。
- 所以,我们需要运行命令:
npm i [email protected] -D
,在本地安装一下webpack依赖。
此时修改代码,把颜色改成蓝色,我们再去命令行运行命令:npm run dev
,你会发现运行成功了。
但是事情远没有这么简单,去浏览器查看,你会发现,页面毫无效果。。。。。为什么???
原因:
页面没有显示出应有的效果,不用想,肯定是样式出了问题!!
但是样式好像也没有问题,因为页面展示着我们之前写的颜色的页面,只不过没有变成我们现在的颜色而已,并且控制台并没有报错。
那原因就呼之欲出了,两种情况:
- 要么我们的bundle.js并没有打包。
- 要么就是我们引入的路径出错了。
其实,我们的bundle.js确实是打包了,并且打包成功了,是我们的路径出错了。接下来,我们看点东西:
这是一部分我们运行了npm run dev
的运行截图,我们可以尝试着去在浏览器打开http://localhost:8080/
,当然必须在webpack-dev-server正在运行的情况下。
我们会进入到我们的 文件目录,点击src,就会自动进入我们的首页。
- 这时,我们做一个操作,把
localhost:8080/src/
替换成localhost:8080/bundle.js
你会惊喜的发现,我们打开了bundle.js,虽然里面的代码你有可能根本看不懂。
然后我们把我们dist文件夹下的bundle.js删除【不用担心,只需要运行一次webpack命令,文件就会自动回来。】,删除后,刷新浏览器,你会发现,bundle.js依然在。
这就证明了我们的第二种情况,我们引入的地址出错了。
我们现在在浏览器打开的bundle.js是直接在根目录下打开的,而我们引入的却是dist文件夹下的。
其实webpack-dev-server,把我们的代码托管到了内存中。而我们引入的是只是物理路径下的bundle.js。
这样,我们只需要改动我们index.html文件的引入路径就好了:
<script src="/bundle.js"></script>
我们重新打开webpack-dev-server。
插一句话:
关闭webpack-dev-server,只需要点击键盘的
ctrl+c
,然后输入Y即可。重新运行,就是在输入一遍
npm run dev
这样你就会发现,页面的颜色改变了,我们在main.js里去改另外一种颜色,打开浏览器,你会发现甚至不需要我们去刷新浏览器了,自动就把最新的样式引用了进来。
这么看起来,似乎已经很完美了webpack-dev-server自动帮我们打包了代码,自动帮我们适应了最新的样式。
但是对于一个严格的程序员来说,这依然不完美。
- 如果我们的8080端口,不凑巧被其他的程序占用,怎么办?
- 每次都需要手动打开浏览器,不能在我执行完
npm run dev
时,自动帮我们打开吗? - 打开了浏览器,不能直接帮我们找到src文件夹下的页面吗?
- 每次都把包重新打包,不能我改了哪里,只打包那一部分代码吗?这样会更高效一点。
其实,这四个问题都不是问题,人家早就帮我们想好了,我们只需要这样:
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
- ·
--open
:自动打开浏览器。 -
--port 3000
:应用3000端口号。 -
--contentBase src
:打开src路径下的页面。 -
--hot
:进行热更新。【局部更新】
我们再来看一个点:
- 我们的页面是属于我们的物理磁盘的吧,但是我们的bundle.js却是在我们的内存里。
- 那我们有没有办法,把我们的页面也托管到我们的内存里呢?
答案是什么,我就不说了,肯定是有的。
不过我们需要借助一个插件:html-webpack-plugin
。借着这个,我们也来说一下:
插件配置
第一步:本地安装这个插件
运行命令:npm i [email protected] -D
第二步:配置插件
打开我们的webpack.config.js
配置文件:
//导入在内存中生成html页面的插件
const htmlWebpackPlugin = require('html-webpack-plugin');
//只要是插件,都一定要放到plugin节点中去
plugins:[
new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件
template:path.join(__dirname,'./src/index.html'),//指定模板页面,将来根据指定的页面路径,去生成内存中的页面
filename:'index.html'//指定生成的页面的名称
})
})
]
注意:
plugins
节点是和entry
和output
平级的节点,都在module.export = {}
里,不要写错地方了。
这个插件的两个作用:
- 自动在内存中根据指定页面生成一个内存页面。
- 自动,把打包好的bundle.js追加到页面中去。
所以,我们现在可以直接把我们页面中引入的bundle.js注释掉。
启动webpack-dev-server,你会发现,页面一样是显示的,看网页源码:
可以发现,html-webpack-plugin插件确实是帮我们在最后引入了bundle.js。
然后我们在来看另一个东西,怎么打包我们的.css
或.less
或.scss
文件呢?
样式文件配置
我们先写一点样式:
/*css文件里的样式*/
li{
list-style: none;
}
/*scss文件里的样式*/
html,body{
margin: 0;
padding: 0;
li{
font-size: 12px;
line-height: 30px;
}
}
一个是去掉列表的圆点,一个是去掉html和body的边距以及调整li的字体大小和行高。
好,进入正题:
如果我们把这些样式引入html文件里,显然又违背了我上一篇博客说过的,我们依然是把这些样式文件,也写到我们的main.js入口文件里去:
先做css文件的:
//引入css文件
import './css/index.css'
运行我们的webpack-dev-server。你会发现,还是不行,因为webpack是不认识我们的样式文件的,怎么办呢?
我们需要一个模块加载器,需要一个loader来帮助我们。
- 下载这两个loader,运行命令:
npm i [email protected] [email protected] -D
下载完成之后,打开我们的webpack.config.js配置文件,我们去配置一下:
module: { //这个节点用于配置所有第三方模块加载器
rules: [
{test: /\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
]
}
注意:
- 这个模块也是和前面的plugins插件节点也是平级的。
- rules写的是一些匹配规则。
- test后面是一个正则表达式,匹配的是什么后缀名的文件,现在匹配的是.css
- use表示,匹配到后,怎么处理。【用我们下载的loader处理】
此时,我们再去启动我们的webpack-dev-loader,就可以成功把样式加载进来。
那怎么引入scss文件呢?
我们也是需要一个loader,一个专属于处理scss文件的loader。
注意:
scss文件的loader有自己的依赖项node-sass,虽然不需要我们显式的去定义,但是是必不可少的,所以我们也需要本地安装一下。
- 运行命令:
cnpm i sass-loader -D
- 虽然我们的后缀名是
scss
,但是下载包时要注意,依然是sass
。
然后在main.js里引入:
import './css/index.scss'
接着,我们需要在配置文件里,配置我们的sass规则:
rules: [
{test: /\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
{test: /\.scss$/,use:['style-loader','css-loader','sass-loader']},//这是配置处理.scss文件的第三方loader规则
]
如果此时我们直接运行webpack-dev-server,你会发现报错,报的错就是告诉我们,我们少了依赖项。
- 下载node-sass依赖,运行命令:
cnpm i node-sass -D
注意:
- 一般,我们用npm去装node-sass是装不下来的,除非极个别情况下。
- 但是cnpm可以,所以这里选择用cnpm安装。
安装成功后,我们再次运行webpack-dev-server,你就会发现,sass样式也可以加载了。
对于less样式文件也是一样的,同样需要less-loader,同时需要依赖项less
在main.js里引入,在配置文件里配置规则,和scss的基本一致,把scss换成less即可。
本篇主要讲解了:
- webpack中的webpack-dev-server
- 插件的配置
- 样式文件的配置。