重构之路：配置css/less，img等loader和dev-server

开始

这章我们先把一些css和img给配置了，还有热加载的一些插件。

首先我们先配置控制台的命令，我们每次打包的时候都需要执行webpack这条命令，然后在打包后的文件夹里打开index.html进行预览，我们能不能直接在修改的时候直接在网页上预览呢？当然可以，下面开始配置。

配置devServer

先在控制台执行：

yarn add webpack-dev-server -D

然后去webpack.config.js里配置，注意这里的devServer和module是同级的：

devServer: {
        port:8080,//端口号
        open:true,//自动打开浏览器
        compress: true,//开启gzip压缩
        overlay:true,//控制台错误显示在浏览器上
        contentBase: path.join(__dirname, "dist"),//指定资源目录
    },

然后去package.json里配置，这里的scripts和的devDependencies是同级的：

"scripts": {
    "dev":"webpack-dev-server",
    "build":"webpack"
  },

这样配置完后我们就可以去控制台执行：

yarn run dev

发现浏览器自动弹出窗口，并且浏览器控制台有输出内容了，我们在index.js写一个alert(1)；并保存。发现浏览器自动刷新，并弹出1.这样我们就成功配置了devServer。

配置css

我们去src下新建一个index.css，写个background：lightblue，在index.js的顶部引入这个css，

import "./index.css"

然后去控制台执行发现控制台报错：

提示我们需要一个合适的loader来处理css文件。

去控制台执行：

yarn add css-loader style-loader -D

然后在webpack.config.js里配置：

{
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader"
                ]
            }

再去控制台执行yarn run dev，发现浏览器背景颜色已经变成蓝色了，那就成功了。但是还有，我们在写css3的时候，有时候需要写很多的前缀兼容语法，写多了就烦了啊，这时候我们就需要用到postcss-loader，这个插件可以帮助我们自动加上css的兼容语法。

我们先去index.css里写上：

html,body{
    height:100%;
    background:linear-gradient(lightsalmon,lightblue,lightcoral);
}

在控制台执行：

yarn add postcss-loader autoprefixer -D

在去webqpck.config.js里配置：

	{
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader",
                    {
                        loader:'postcss-loader',
                        options:{
                            plugins:[
                                require('autoprefixer')({
                                    browsers:['last 5 versions','>0.01%']
                                })
                            ]
                        }
                    }
                ]
            }

然后打开浏览器，我们可以发现，样式的地方变成了这样，已经帮我们加上了前缀（爽）：

配置less

配置less的方法和css差不多，先在控制台执行：

yarn add less less-loader -D

再去webpack.config.js里把css的配置复制一份，修改成下面这样：

{
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    {
                        loader:'postcss-loader',
                        options:{
                            plugins:[
                                require('autoprefixer')({
                                    browsers:['last 5 versions','>0.01%']
                                })
                            ]
                        }
                    },
                    "less-loader"
                ]
            },

去src下新建一个index.less文件，在index.js里引入，再写一点less的语法

html,body{
  background:lightblue;
  #root{
    width: 100px;
    height:100px;
    background: #000;
  }
}

在浏览器里进行预览，变成下面这样就成功了。

配置img

再来配置img，我们去index.css里将背景修改成图片：

background:url("./地球.jpg") no-repeat;

打开控制台执行，又发现报错，需要一个合适的loader来处理，执行：

yarn add url-loader file-loader -D

在webapck.config.js里配置：

{
                test:/\.(jpg|jpeg|png|gif|svg)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:3*1024,//小于3kb使用base64编码
                        outputPath:'img/',
                    }
                }
            }

这里我多配置了一个limit和ouputPath，limit是当图片小于自定义的值时，会转化成base64编码，这样可以减少http的请求来达到优化的目的，ouputPath是将打包后的图片放到img文件夹里。

再打开浏览器，发现图片已经变成背景了。

配置模块热更新

我们前面已经发现，当我们修改了js或者css的内容的时候，浏览器已经可以自动刷新了，那什么是模块热更新呢，就是js或css更改的时候，浏览器不会自动刷新，只会在修改的地方进行更新，这样可以大大提升我们的开发效率。

我们去webpack.config.js里配置：

//在顶部写上
const webpack = require('webpack');

//在plugins里写上
new webpack.HotModuleReplacementPlugin()

//在devServer里加一个
hot:true//加上这个配置

再去index.js里写上：

if (module.hot) {
    module.hot.accept()
}

这个时候再打开浏览器，我们可以在js或者css里修改任何东西，保存之后查看浏览器，浏览器不会自动刷新就执行代码了。、

这个时候有的人会发现自己保存之后，浏览器很慢才响应，我们可以去webpack.config.js里写：

mode:'development'

这一行加在entry这个配置的上面，和entry是同级的存在。这个配置代表当前使用的是什么模式，我们暂时先设置为开发模式，后面我们会再修改的。

结尾

现在一些比较杂的配置已经差不多了，我们下面的一些章节的配置就比较关键了。