Webpack3.X版本使用指南(二)

Webpack3.X版本使用教程(二)

我们接着上一篇博客《Webpack使用指南(一)》继续说。

上一篇博客我们说到：使用webpack可以简化我们的工作，可以把繁琐的命令写到配置文件里，简化我们的运行命令，让开发更加高效。

接着，我们在来想一个问题：如果我们的项目需要经常的修改颜色，那我们要怎么做？

1. 修改代码。2. 命令行输入webpack，回车。3.刷新页面。

但是我们一般都会写点代码就要看一下最新的效果，甚至于改代码的时候，写一行就要看效果，如果我们继续执行前面的方法，也能实现，但是太麻烦，太耗费时间。

---

接下来我们就来介绍一个简单的方法，来满足这个需求：

接下来的下载的一些东西，我会指定一下版本，这样的话能尽可能保证不因为版本问题导致出错。

webpack-dev-server

webpack-dev-server就是帮助我们实现前面需求的工具，安装配置完成后，他可以自动监听我们代码的改变，自动帮助我们打包我们的代码，这样就省去了很多麻烦，废话不多说，我们来看怎么玩。

• 首先，要本地安装webpack-dev-server，运行命令：npm i webpack-dev-server@2.9.3 -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 webpack@3.8.1 -D，在本地安装一下webpack依赖。

此时修改代码，把颜色改成蓝色，我们再去命令行运行命令：npm run dev,你会发现运行成功了。

但是事情远没有这么简单，去浏览器查看，你会发现，页面毫无效果。。。。。为什么？？？

原因：

​ 页面没有显示出应有的效果，不用想，肯定是样式出了问题！！

​ 但是样式好像也没有问题，因为页面展示着我们之前写的颜色的页面，只不过没有变成我们现在的颜色而已，并且控制台并没有报错。

​ 那原因就呼之欲出了，两种情况：

1. 要么我们的bundle.js并没有打包。
   2. 要么就是我们引入的路径出错了。

其实，我们的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自动帮我们打包了代码，自动帮我们适应了最新的样式。

但是对于一个严格的程序员来说，这依然不完美。

1. 如果我们的8080端口，不凑巧被其他的程序占用，怎么办？
2. 每次都需要手动打开浏览器，不能在我执行完npm run dev时，自动帮我们打开吗？
3. 打开了浏览器，不能直接帮我们找到src文件夹下的页面吗？
4. 每次都把包重新打包，不能我改了哪里，只打包那一部分代码吗？这样会更高效一点。

其实，这四个问题都不是问题，人家早就帮我们想好了，我们只需要这样：

"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 html-webpack-plugin@3.1.0 -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 = {}里，不要写错地方了。

这个插件的两个作用：

1. 自动在内存中根据指定页面生成一个内存页面。
2. 自动，把打包好的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 style-loader@0.20.1 css-loader@1.0.1 -D

下载完成之后，打开我们的webpack.config.js配置文件，我们去配置一下：

module: { //这个节点用于配置所有第三方模块加载器
    rules: [
        {test: /\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
    ]
}

注意：

1. 这个模块也是和前面的plugins插件节点也是平级的。
2. rules写的是一些匹配规则。
3. test后面是一个正则表达式，匹配的是什么后缀名的文件，现在匹配的是.css
4. 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即可。

---

本篇主要讲解了：

1. webpack中的webpack-dev-server
2. 插件的配置
3. 样式文件的配置。