從零學習webpack4.0模塊打包工具

首先webpack是一個基於nodejs的打包工具，使用webpack，可使咱們的代碼耦合度下降。拆分紅模塊化開發。

1.webpack到底是什麼

之前咱們操做dom，須要把js代碼所有寫在一塊兒，可是這樣很不容易管理和維護，因此出現了webpack咱們能夠將文件按需導入和導出，用webpack會幫咱們根據他的語法生成對應的代碼。

相關語法可查看webpack官方文檔：中文文檔

2.webpack正確安裝方式

在須要使用webpack打包的項目目錄執行npm安裝

局部安裝 npm i webpack webpack-cli -S
全局安裝 npm i webpack webpack-cli -D
安裝指定版本 npm i webpack@4.3.5 webpack-cli -S
刪除 npm  uninstall  webpack  -g
查看當前webpack版本 npx webpack -v
使用webpack打包文件 npx webpack index.js
複製代碼

npx執行的當前項目目錄下node_moudels中的webpack。

注意：webpack安裝最好不要全局安裝，以防版本混亂致使報錯。

3.如何使用webpack

1.首先咱們須要使用npm命令初始化一個項目

按需生成   npm init
默認初始化 npm init -y
複製代碼

此時項目文件夾下會出現一個package.json文件，裏面包含了一些項目信息

{
    "name": "dome01",------------------------項目名稱
    "version": "1.0.0",----------------------版本號
    "description": "", 
    "main": "a.js",--------------------------項目入口文件，可刪除
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {},---------------------上線環境依賴包
    "devDependencies": {--------------------開發環境依賴包
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11"
    }
}
複製代碼

2.局部安裝webpack和webpack-cli

npm i webpack webpack-cli -S
複製代碼

此時文件夾下會出現node_moudles文件夾，裏面包含了一些webpack的依賴包。

3.接下來咱們就能夠在項目中按照webpack的api來書寫項目代碼啦。

寫完後經過

npm webpack 項目路徑 
複製代碼

來打包項目。

4.webpack打包原理

到目前爲止，咱們知道webpack打包直接執行npx webpack 項目路徑 就能夠生成dist目錄，完成打包工做，可是這是爲何呢？這是由於webpack自己就有一套默認的打包文件，他會默認按照他的意思去打包。

可是一般開發環境下，咱們須要本身配置打包需求。 當咱們執行 npx webpack 若是不指定打包文件，控制檯就會報錯，其實執行命令的時候webpack會自動去項目路徑下面尋找打包的配置文件，webpack.config.js文件，找到並去執行他它。

1.首先，咱們須要在項目路徑下面建立一個webpack.config.js文件

const path = require('path')---------------------------導入node讀文件api
module.exports = {
    entry: './abc.js',---------------------------------入口：須要打包的文件路徑
    output: {------------------------------------------出口：打包完成的文件配置
        filename: 'aaa.js',----------------------------打包完成後生成的js文件
        path: path.resolve(__dirname,'aaa')-----------打包完成後aaa.js放置的位置，
        __dirname,表示當前項目目錄下，aaa表示生成的文件夾名字，不設置的話，默認是dist文件夾。
    }
}
複製代碼

執行npx webpack 後可發現文件目錄多出了aaa文件夾。

5.npm工具爲咱們提供了方便偷懶的script模塊

在package.json文件目錄中有一個script對象,在這裏面咱們可使用定義咱們本身的命令，經過 npm run 來快速運行它

{
    "name": "dome01",
    "version": "1.0.0",
    "description": "",
    "main": "a.js",
    "scripts": {
      build : webpack 或 npx webpack ,-------由於script默認尋找webpack會去node_modlues中去找依賴，因此不加npx也不用擔憂會使用到全局的webpack。
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {},
    "devDependencies": {
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11"
    }
}
複製代碼

6.咱們能夠本身配置想要的webpack打包方式

1.通常狀況下，咱們會把須要打包的項目文件放到src目錄下

2.配置咱們本身的webpack.config.js文件

const path = require('path')
module.exports = {
    entry: './src/index.js',--------咱們也能夠直接寫 './src'，默認回去找src下的index.js文件
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    }
}
複製代碼

3.執行npm run build 能夠看到打包成功

7.使用Loader打包靜態資源文件 (圖片篇)

由於webpack默認只能打包.js文件，其餘像.css、.vue、.jpg|.png這樣的文件沒法打包，此時咱們須要引入他們對應的loader來完成打包工做。

1.首先咱們須要在webpack.config.js文件中配置module模塊

const path = require('path')
module.exports = {
    entry: './src',
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    },
    module: {--------------------------------------------此處配置loader
        rules: [{----------------------------------------loader規則，數組包含多個loader
            test: /\.(jpg|png)$/,--------------------正側匹配以.jpg .png結尾的文件進行打包
            use: {---------------------------------------打包的配置
                loader: 'file-loader',-------------------使用的打包loader
                options: {-------------------------------打包輸出時的配置
                    name: '[name].[ext]',----------------打包文件輸出名字，[name]表示原始名字，[]表示用原始文件後綴               
                    outputPath: './img/',----------------打包後的文件放在dist目錄下的img文件夾下
                }
            }
        }]
    }
}
複製代碼

2.使用前咱們須要安裝對應的loader

npm i file-loader -D
複製代碼

不懂查看官方文檔的filer-loader部分

3.執行npm run build完成打包，生成目錄結構以下

8.file-loader和url-loader的區別

在使用file-loader打包文件時,生成的文件老是會存在於dist目錄下，可是若是使用了url-loader來實現文件的打包，咱們能夠經過在options中配置limit屬性來限制文件輸出的地方。

1.首先webpak.config.js代碼配置以下

const path = require('path')
module.exports = {
    mode: 'development',------------爲了出去瀏覽器警告，寫上mode，能夠控制打包生成的文件時development環境（未壓縮），仍是production環境（會壓縮）
    entry: './src',
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    },
    module: {
        rules: [{
            test: /\.(jpg|png)$/,
            use: {
                loader: 'url-loader',--------------引入url-loader
                options: {
                    name: '[name].[ext]',
                    outputPath: './img/',
                    limit: 300000 //30萬字節=300kb-------限制圖片大小爲300kb，若圖片小於300kb則，將圖圖片打包進js代碼中（可減小發送http請求次數），若圖片大於300kb，則按照file-loader方式打包如dist文件目錄下
                }
            }
        }]
    }
}
複製代碼

url-loader能夠智能的根據圖片的大小來決定圖片打包的方式，若圖片小，能夠寫入js代碼中，從而來減小http求情次數。若圖片大，則寫入文件目錄，防止寫入js中，由於js過大而致使頁面白屏時間過長。

9.使用Loader打包靜態資源文件 (樣式-上篇)

若是想要實現對css樣式進行打包，則須要使用style-loader和css-loader

1.使用style-loader和css-loader解析樣式

1.首先一樣在webpack.config.js文件下配置rules

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src',
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    },
    module: {
        rules: [{
            test: /\.(jpg|png)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: './img/',
                    limit: 300000 //30萬字節=300kb
                }
            }
        }, {
            test: /\.css$/,---------------------識別以.css爲結尾的文件
            use: [{
                    loader: 'style-loader'------後執行style-loader將編譯的css樣式插入頁面head表籤中的style中
                },
                {
                    loader: 'css-loader'------先執行css-loader解析webpack方式引入的css中的代碼
                }
            ]
        }]
    }
}
複製代碼

2.安裝安裝style-loader和css-loader

2.使用sass預編譯器配置sass-loader

1.只需在package.json文件中加入sass-loader便可,注意順序，webpack解析自下而上

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src',
    output: {
        filename: 'aaa.js',
        path: path.resolve(__dirname, 'aaa')
    },
    module: {
        rules: [{
            test: /\.(jpg|png)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: './img/',
                    limit: 300000 //30萬字節=300kb
                }
            }
        }, {
            test: /\.scss$/,
            use: [{
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'sass-loader'
                }
            ]
        }]
    }
}
複製代碼

便可使用sass語法書寫css樣式

2.安裝 sass-loader和node-sass

npm install sass-loader node-sass webpack --save-dev
複製代碼

安裝 node-sass可能會報錯，是因爲GitHub資源太爛，此時使用淘寶鏡像地址安裝node-sass

npm i node-sass -D  --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
複製代碼

3.css文件，使用.scss後綴,不要使用.sass後綴，會報錯。

打包後文件目錄：

3.使用postcss-loader給css樣式增長瀏覽器前綴

1.首先，咱們須要在項目目錄下建立一個postcss.config.js文件

裏面寫入postcss-loader的依賴配置，當打包文件執行到postcss-loader的時候將會執行postcss.config.js文件。

2.咱們須要先安裝autoprefixer插件。

npm i autoprefixer -D
複製代碼

3.在postcss.config.js中使用它。

module.exports = {
    plugins: [
        require('autoprefixer')------------------------------引入autoprefixer插件
    ]
}
複製代碼

4.局部安裝postcss-loader

npm i postcss-loader -D
複製代碼

5.便可發現打包的css代碼中加入了瀏覽器前綴