Vue框架之webpack

◆ webpack：

webpack是一個流行的前端項目構建工具，可以解決目前web開發的困境。
webpack提供了模塊化支持，代碼壓縮混淆，解決js兼容問題，性能優化等特性，提高了開發效率和項目的可維護性。

◆ webpack的基本使用：

1、創建項目目錄並初始化

創建項目，並打開項目所在目錄的終端，輸入命令：

npm init -y

2、創建首頁及js文件：

在項目目錄中創建index.html頁面，並初始化頁面結構：在頁面中擺放一個ul，ul裏面放置幾個li

在項目目錄中創建js文件夾，並在文件夾中創建index.js文件

3、安裝jQuery

打開項目目錄終端，輸入命令:

npm install jQuery -S

4、導入jQuery

打開index.js文件，編寫代碼導入jQuery並實現功能：

import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

注：此時項目運行會有錯誤，因爲import $ from “jquery”;這句代碼屬於ES6的新語法代碼，在瀏覽器中可能會存在兼容性問題

5、安裝webpack

打開項目目錄終端，輸入命令:

npm install webpack webpack-cli -D

然後在項目根目錄中，創建一個 webpack.config.js 的配置文件用來配置webpack。在 webpack.config.js 文件中編寫代碼進行webpack配置，如下：

module.exports = {
    mode:"development"//可以設置爲development(開發模式)，production(發佈模式)
}

mode設置的是項目的編譯模式：

如果設置爲development則表示項目處於開發階段，不會進行壓縮和混淆，打包速度會快一些
如果設置爲production則表示項目處於上線發佈階段，會進行壓縮和混淆，打包速度會慢一些

修改項目中的package.json文件添加運行腳本dev，如下：

"scripts":{
    "dev":"webpack"
}

scripts節點下的腳本，可以通過 npm run 運行，如運行如下終端命令，將會啓動webpack進行項目打包：

npm run dev

運行dev命令進行項目打包，並在頁面中引入項目打包生成的js文件

打開項目目錄終端，輸入命令:

npm run dev

等待webpack打包完畢之後，找到默認的dist路徑中生成的main.js文件，將其引入到html頁面中，瀏覽頁面查看效果。

◆ 設置webpack的打包入口/出口：

在webpack 4.x中，默認會將src/index.js 作爲默認的打包入口js文件。默認會將dist/main.js 作爲默認的打包輸出js文件。

如果不想使用默認的入口/出口js文件，我們可以通過改變 webpack.config.js 來設置入口/出口的js文件，如下：

const path = require("path");
module.exports = {
    mode:"development",
    //設置入口文件路徑
    entry: path.join(__dirname,"./src/xx.js"),
    //設置出口文件
    output:{
        //設置路徑
        path:path.join(__dirname,"./dist"),
        //設置文件名
        filename:"res.js"
    }
}

◆ 設置webpack的自動打包：

默認情況下，我們更改入口js文件的代碼，需要重新運行命令打包webpack，才能生成出口的js文件。那麼每次都要重新執行命令打包，這是一個非常繁瑣的事情，那麼，自動打包可以解決這樣繁瑣的操作。

實現自動打包功能的步驟如下：

A.安裝自動打包功能的包webpack-dev-server

npm install webpack-dev-server -D

B.修改package.json中的dev指令如下：

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

C.將引入的js文件路徑更改爲：

<script src="/bundle.js"></script>

D.運行npm run dev，進行打包

E.打開網址查看效果：http://localhost:8080

注：webpack-dev-server自動打包的輸出文件，默認放到了服務器的根目錄中.

在自動打包完畢之後，默認打開服務器網頁，實現方式就是打開package.json文件，修改dev命令：

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

◆ 配置html-webpack-plugin：

使用html-webpack-plugin 可以生成一個預覽頁面。因爲當我們訪問默認的 http://localhost:8080/的時候，看到的是一些文件和文件夾，想要查看我們的頁面，還需要點擊文件夾點擊文件才能查看，那麼我們希望默認就能看到一個頁面，而不是看到文件夾或者目錄。

實現默認預覽頁面功能的步驟如下：

A.安裝默認預覽功能的包:html-webpack-plugin

npm install html-webpack-plugin -D

B.修改webpack.config.js文件，如下：

//導入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//創建對象
const htmlPlugin = new HtmlWebpackPlugin({
    //設置生成預覽頁面的模板文件
    template:"./src/index.html",
    //設置生成的預覽頁面名稱
    filename:"index.html"
})

C.繼續修改webpack.config.js文件，添加plugins信息：

module.exports = {
    ......
    plugins:[ htmlPlugin ]
}

◆ webpack中的加載器：

通過loader打包非js模塊：默認情況下，webpack只能打包js文件，如果想要打包非js文件，需要調用loader加載器才能打包
loader加載器包含：

less-loader
sass-loader
url-loader:打包處理css中與url路徑有關的文件
babel-loader:處理高級js語法的加載器
postcss-loader
css-loader,style-loader

注意：指定多個loader時的順序是固定的，而調用loader的順序是從後向前進行調用

A.安裝style-loader,css-loader來處理樣式文件
    1).安裝包
        npm install style-loader css-loader -D
    2).配置規則：更改webpack.config.js的module中的rules數組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test設置需要匹配的文件類型，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }
    }
B.安裝less,less-loader處理less文件
    1).安裝包
        npm install less-loader less -D
    2).配置規則：更改webpack.config.js的module中的rules數組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test設置需要匹配的文件類型，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
    }
C.安裝sass-loader,node-sass處理less文件
    1).安裝包
        npm install sass-loader node-sass -D
    2).配置規則：更改webpack.config.js的module中的rules數組
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test設置需要匹配的文件類型，支持正則
                    test:/\.css$/,
                    //use表示該文件類型需要調用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }

    補充：安裝sass-loader失敗時，大部分情況是因爲網絡原因，詳情參考：
    https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

D.安裝post-css自動添加css的兼容性前綴（-ie-,-webkit-）
1).安裝包
    npm install postcss-loader autoprefixer -D
2).在項目根目錄創建並配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}
3).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設置需要匹配的文件類型，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調用的loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

E.打包樣式表中的圖片以及字體文件
在樣式表css中有時候會設置背景圖片和設置字體文件，一樣需要loader進行處理
使用url-loader和file-loader來處理打包圖片文件以及字體文件
1).安裝包
    npm install url-loader file-loader -D
2).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設置需要匹配的文件類型，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用來設置字節數，只有小於limit值的圖片，纔會轉換
                //爲base64圖片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

F.打包js文件中的高級語法：在編寫js的時候，有時候我們會使用高版本的js語法
有可能這些高版本的語法不被兼容，我們需要將之打包爲兼容性的js代碼
我們需要安裝babel系列的包
A.安裝babel轉換器
    npm install babel-loader @babel/core @babel/runtime -D
B.安裝babel語法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在項目根目錄創建並配置babel.config.js文件
    
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test設置需要匹配的文件類型，支持正則
                test:/\.css$/,
                //use表示該文件類型需要調用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用來設置字節數，只有小於limit值的圖片，纔會轉換
                //爲base64圖片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude爲排除項，意思是不要處理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

Vue框架之webpack

◆ webpack：

◆ webpack的基本使用：

◆ 設置webpack的打包入口/出口：

◆ 設置webpack的自動打包：

◆ 配置html-webpack-plugin：

◆ webpack中的加載器：

Ajax資料之同源政策

Ajax資料之基礎概念和運行原理

Vue框架之Vue組件之間傳值

Nodejs資料之Gulp模塊

JavaScript資料之FormData對象

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結