重构之路：配置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是同级的存在。这个配置表明当前使用的是什么模式，咱们暂时先设置为开发模式，后面咱们会再修改的。

结尾

如今一些比较杂的配置已经差很少了，咱们下面的一些章节的配置就比较关键了。