從零開始搭建webpack4.X + Vue開發環境

爲了學習和理解webpack解決了前端的哪些痛點，還是有必要從零開始自己搭建一個簡單的開發環境，
此教程適合剛接觸webpack的新手學習。

首先webpack基於node環境運行，所以事先請自行安裝node，網上教程比較多，這裏不再累贅，安裝完可通過以下命令檢查是否已經正常安裝：

$ node -v
v12.13.1
$ npm -v
6.12.1

2. 初始化項目

新建一個項目根目錄，然後CD到根目錄下，通過以下命令快速初始化項目：

npm init

根據需要配置或者直接一路默認Enter下來即可：

Press ^C at any time to quit.
package name: (development)
version: (1.0.0)
description: Vue環境搭建
entry point: (webpack.config.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\wamp64\www\web\Vue\development\package.json:

{
  "name": "development",
  "version": "1.0.0",
  "description": "Vue環境搭建",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

這樣，就在項目根路徑下生成了一個package.json，用於管理項目信息及安裝的第三方依賴模塊。

3. 安裝webpack

這裏需要注意一點，webpack4需要安裝webpack cli，跟往常不一樣，大家安裝好webpack4以後並不能直接使用，會提示你安裝webpack cli。

如果想全局使用webpack的命令，可以使用npm install webpack-cli -g 安裝。
Tips：這裏建議在項目中安裝 webpack-cli 並且使用 --save-dev 或者 -D 的配置將 webpack-cli 放到開發依賴中。

npm install webpack webpack-cli -D

4. 創建webpack.config.js

對於初學者來說，建議手動創建webpack.config.js文件，然後自己一步步寫配置，以加深印象。
首先，在項目根目錄，新建webpack.config.js，可以先寫出大體結構：

module.exports = {
    // 開發模式，webpack會根據該模式使用相應的編譯配置
    mode: 'development',
    // 打包入口
    entry: '',
    // 打包後資源輸出路徑
    output: {},
    // 依賴模塊，通過設置對應loader去執行一些webpack理解不了的語法資源
    // 如jsx轉化爲js，less轉化爲css等，相當於翻譯官
    module: {},
    // 依賴插件，處理一些打包壓縮、資源優化等任務，比loader功能更強大
    plugins: []
}

根據項目結構，開始配置，如我的項目結構如下圖：

5. 配置webpack.config.js

5.1 配置項目打包入口和打包後資源輸出路徑

const { resolve } = require("path");
module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        filename: './bundle.js',
        path: resolve(__dirname, './build')
    },
    module: {},
    plugins: []
}

5.2 配置一些loader規則

5.2.1 配置 ES6/7/8 轉 ES5代碼
配置之前，先要安裝相關依賴

npm install babel-loader @babel/core @babel/preset-env

babel-loader是將ES6等高級語法轉換爲能讓瀏覽器能夠解析的低級語法
@babel/core是babel的核心模塊，編譯器。提供轉換的API
@babel/preset-env 可以根據配置的目標瀏覽器或者運行環境來自動將ES2015+的代碼轉換爲es5

修改webpack.config.js配置

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"]
                        }
                    }
                ]
            }
        ]
    }

修改package.json文件，在scripts屬性中添加一個build屬性，用於運行編譯命令

"scripts": {
    "build": "webpack --config ./webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

main.js和./src/index.js文件分別添加如下代碼：

//   ./src/index.js
let test = str => {
    return str.split('').reverse().join('')
}

module.exports = {
    test
}

//   main.js
import { test } from './js/index.js'
console.log(test)
console.log(test('Hello word!'))

然後測試打包

npm run build

新建的index.html靜態文件，將打包生成的bundle.js文件引入，瀏覽器打開index.html，在開發者控制檯查看輸出，即可看到 ES6代碼被轉成了ES5代碼了：

ƒ test(str) {
  return str.split('').reverse().join('');
}
!drow olleH

5.2.1.1 ES6/7/8 Api 轉ES5

注意：babel-loader只會將 ES6/7/8等高級語法轉換爲ES5語法，但是對新api並不會轉換。比如Promise、Iterator、Set、Proxy、Symbol等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。此時，我們必須使用babel-polyfill對一些不支持新語法的瀏覽器提供兼容性實現。

安裝：

npm install @babel/polyfill -S

使用，可以直接在打包入口文件main.js中引入：

import '@babel/polyfill'

打包測試，你會發現bundle.js文件體積增大了好多，原因就是@babel/polyfill爲了兼容，將所有兼容性代碼全部引入，這就導致體積很大，所以我們要按需加載，減少打包編譯後的體積。

5.2.1.2 按需引入polyfill
安裝相關依賴

npm install core-js -S

安裝完成需要修改webpack.config.js配置：

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env",
                                {
                                    //按需加載
                                    useBuiltIns: 'usage',
                                    //指定core-js版本
                                    corejs: {
                                        version: 3
                                    },
                                    //指定到最低瀏覽器版本的兼容性
                                    targets: {
                                        chrome: '60',
                                        firefox: '60',
                                        ie: '9',
                                        safari: '10',
                                        edge: '17'
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
        ]
    }

配置了按需引入 polyfill 後，babel會自動導入相關的polyfill，這樣能大大減少了打包編譯後的體積。

5.2.2 配置樣式預處理器轉成CSS
以下就以less預處理器用法爲例，其餘兩種類似：

npm install less less-loader css-loader style-loader -D
   
css-loader主要的作用是解析css文件, 像@import等動態語法
style-loader主要的作用是解析的css文件渲染到html的style標籤內
stylus、less、sass是CSS的常見預處理器，可根據需要安裝一種或多種
stylus-loader、less-loader、sass-loader主要是將其對應的語法轉換成css語法，可根據需要安裝一種或多種

安裝完成，修改webpack.config.js配置：

注意：使用loader順序是要從下到上（以下是從右到左）
1、首先使用less-loader處理.less文件轉化爲webpack認識的CSS樣式；
2、然後通過css-loader解析main.js文件中的import語法，分析出各個css文件之間的關係，把各個css文件合併成一段css；
3、最後經過style-loader的作用，將css-loader生成的css代碼掛載到頁面的head部分。

module: {
        rules: [
            {...},
            {	//處理less資源
		         test: /\.less/,
		         use: ['style-loader', 'css-loader', 'less-loader']
		    }
        ]
    }

在項目src目錄中的index.less文件添加以下樣式，並在打包入口main.js文件中引入

@color: red;

.box {
    width: 200px;
    height: 200px;
    color: @color
}

執行打包編譯，在瀏覽器中刷新index.html文件，可以看到上面的樣式已添加到head標籤中，說明編譯轉化成功。

對於CSS3 的許多特性來說，需要添加各種瀏覽器兼容前綴，開發過程中自己手動加太過麻煩，postcss 幫你自動添加各種瀏覽器前綴

npm install postcss-loader autoprefixer -D

postcss-loader autoprefixer 處理瀏覽器兼容,自動爲CSS3的某些屬性添加前綴

修改webpack.config.js配置

module: {
        rules: [
            {...},
            {
                test: /\.less/,
                use: [
                	{
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    //必須設置支持的瀏覽器纔會自動添加添加瀏覽器兼容
                                    overrideBrowserslist: [
                                        "last 2 versions",
                                        "> 1%"
                                    ]
                                })
                            ]
                        }
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            }
        ]
    }

5.2.3 解析字體font、圖片(jpg、png、gif…)等靜態資源
安裝依賴

npm install file-loader url-loader -D
    
file-loader可以用來幫助webpack打包處理一系列的圖片文件；比如：.png 、 .jpg 、.jepg等格式的圖片。
打包的圖片會給每張圖片都生成一個隨機的hash值作爲圖片的名字
url-loader封裝了file-loader，它的工作原理：
1、文件大小小於limit參數，url-loader將會把文件轉爲Base64；
2、文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。

修改webpack.config.js配置

module: {
       rules: [
       		{...},
            {...},
            {
                test: /\.(jpg|jepg|png|gif|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 當圖片大於8k時，交給file-loader處理，否則url-loader會把圖片src轉成base64編碼
                        limit: 1024 * 8,
                        name: '[name].[hash:10].[ext]',
                        outputPath: 'images',
                        // 新版file-loader使用了ES Module模塊化方式，將esModule配置爲false就可以解決html頁面中圖片解析地址不正確問題
                        esModule: false
                    }
                }]
            }
        ]
    }

5.2.4 解析html靜態文件中圖片資源
5.2.3中只能解析樣式文件中的字體、圖片資源，但是對html靜態文件中圖片資源無效，所以需要安裝html-withimg-loader：

npm install html-withimg-loader -D
    
html中直接使用img標籤src加載圖片的話，因爲沒有被依賴，圖片將不會被打包。
這個loader解決這個問題，圖片會被打包，而且路徑也處理妥當。

修改webpack.config.js配置

module: {
       rules: [
       		{...},
            {...},
            {...},
            {
                test: /\.(html|htm)$/,
                use: [{
                    loader: 'html-withimg-loader',
                    options: {
                        outputPath: 'images'
                    }
                }]
            },
        ]
    }

5.2.5 解析字體資源
修改webpack.config.js配置

module: {
       rules: [
       		{...},
            {...},
            {...},
            {...},
            {
            	test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            }
        ]
    }

5.2.6 webpack識別.vue文件

目前絕大多數的vue項目裏核心業務代碼都是.vue文件結尾的，但瀏覽器不支持對.vue文件的解析，故需webpack將.vue文件轉換爲瀏覽器能識別的js文件。

安裝相關依賴

npm install vue-loader vue-template-compiler cache-loader thread-loader -D
npm install vue -S
    
vue-loader 作用解析.vue文件
vue-template-compiler 作用編譯模板
cache-loader 作用緩存loader編譯的結果
thread-loader 作用使用 worker 池來運行loader，每個 worker 都是一個 node.js 進程
vue 一個用於構建用戶界面漸進式的MVVM框架

修改webpack.config.js配置

const { resolve } = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {...},
    module: {
       rules: [
       		{...},
            {...},
            {...},
            {...},
            {...},
            {
                test: /\.vue$/,
                use: [{
                        loader: 'cache-loader' // 緩存loader編譯的結果
                    },
                    {
                        loader: 'thread-loader' // 作用使用 worker 池來運行loader，每個 worker 都是一個 node.js 進程
                    },
                    {
                        loader: 'vue-loader', // 解析.vue文件
                        options: {
                            compilerOptions: { // 編譯模板
                                preserveWhitespace: false
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
    	new HtmlWebpackPlugin({
		     template: resolve(__dirname, './src/index.html')
		}),
		new VueLoaderPlugin()
    ]
}

5.3 配置html文件自動引入打包後的js文件
可通過html-webpack-plugin插件來創建html文件。
安裝相關依賴

npm install html-webpack-plugin -D
    
html-webpack-plugin主要有兩個作用: 
1、爲html文件中引入的外部資源如script、link動態添加每次compile後的hash，防止引用緩存的外部文件問題；
2、以輸入模板爲基礎，生成創建自動引入打包後資源鏈接的html入口文件。

修改webpack.config.js配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {...},
    module: {...},
    plugins: [
    	new HtmlWebpackPlugin({
		     template: resolve(__dirname, './src/index.html')
		})
    ]
}

5.4 配置重新打包後刪除上次打包的文件
安裝相關依賴

npm install clean-webpack-plugin -D
    
clean-webpack-plugin是刪除webpack打包後的文件夾以及文件。

修改webpack.config.js配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {...},
    module: {...},
    plugins: [
    	new HtmlWebpackPlugin({
		     template: resolve(__dirname, './src/index.html')
		}),
		new CleanWebpackPlugin()
    ]
}

5.5 配置 devServer 熱更新功能
每次修改完要手動運行打包編譯很麻煩，這就需要啓用熱更新功能，修改完自動打包編譯，我們可以實現不刷新頁面的情況下，更新我們的頁面。
安裝依賴

npm install webpack-dev-server -D

修改webpack.config.js配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {...},
    module: {...},
    plugins: [...],
    devServer: {
        contentBase: resolve(__dirname, './build'),	// 指定服務器資源的根目錄
        compress: true,	// 啓用壓縮
        open: true,	// 自動打開瀏覽器
        hot: true,	// 啓用熱更新功能
        port: 8000	// 自定義端口號
    }
}

修改package.json文件，在scripts屬性中添加一個start屬性，用於開啓devServer：

"scripts": {
    "build": "webpack --config ./webpack.config.js",
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

運行 npm start 即可開啓devServer服務器。

6. 完整項目開發環境配置

手寫不易，希望能幫助到你，覺得可以的話，給個star唄~

從零開始搭建webpack4.X + Vue開發環境

1. 安裝node依賴環境

2. 初始化項目

3. 安裝webpack

4. 創建webpack.config.js

5. 配置webpack.config.js

6. 完整項目開發環境配置

1. 安裝node依賴環境

2. 初始化項目

3. 安裝webpack

4. 創建webpack.config.js

5. 配置webpack.config.js

6. 完整項目開發環境配置

請轉到github

Vue-router的使用和一些技巧

Vue .sync 語法糖

Nuxt項目支持import寫法的三種解決方案

PHP常用SQLite數據庫操作類

JS事件級別

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

linux以太網驅動總結