重構之路：配置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是同級的存在。這個配置表明當前使用的是什麼模式，咱們暫時先設置爲開發模式，後面咱們會再修改的。

結尾

如今一些比較雜的配置已經差很少了，咱們下面的一些章節的配置就比較關鍵了。