本文是基於webpack 4.0以上的配置喲~~

mode報錯

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

# 問題原因
由於webpack在打包的時候需要區分環境，所以需要一個模式來標識。這個表示一般系統在未配置的時候會發出警告並設置默認值爲development。

# 解決方案
方案一：在package.json裏面的scripts字段添加里面 --mode=development
"build": "webpack --mode=development"

方案二：在webpack.config.js裏面添加一個mode字段
module.exports = {
	mode: 'development',
	entry: '***',
	output: {
		filename: '****'
	}
}

babel 報錯

- Maybe you meant to use
"plugins": [
  ["@babel/plugin-transform-runtime", {
  "corejs": 3
}]
]

# 問題原因
錯誤將corejs:3歸納爲plugins的子項目，其實應該是和@babel/plugin-transform-runtime同級

# Tips
使用babel的時候會用到一大堆依賴
@babel/core
@babel/plugin-transform-runtime
@babel/preset-env
@babel/runtime
@babel/runtime-corejs3

# babel完整配置
  module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        "presets": ["@babel/preset-env"],
                        "plugins": [
                            ["@babel/plugin-transform-runtime", {
                                "corejs": 3
                            }]
                        ]
                    }
                }
            }]
    }

# 推薦版本
在webpack.config.js裏面寫
 module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader"
                },
                 exclude: /node_modules/
            }]
    }
然後新建一個.babelrc目錄負責維護babel的配置
{
    "presets": ["@babel/preset-env"],
        "plugins": [
            ["@babel/plugin-transform-runtime", {
                "corejs": 3
            }]
        ]
}

html-webpack-plugin 使用

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html', // 獲取模板的位置
            filename: 'index.html' // 類似output裏面的filename
        })
    ]
}

# 進階config
`創建一個htmlConfig.js配置文件，然後再裏面寫入需要開啓的變量`
mudule.exports = {
    dev: {
        template: {
            title: 'hello',
            header: false,
            footer: false
        }
    },
    build: {
        template: {
            title: '大家好',
            header: true
        }
    }
}
`在webpack.config.js裏面引入htmlConfig.js`
const isDev = process.env.NODE_ENV === 'development';
const config = require('./htmlConfig.js')[isDev ? 'dev' : 'build'];
module.exports = {
     plugins: [
        new HtmlWebpackPlugin({
            template: './index.html', // 獲取模板的位置
            filename: 'index.html',   // 類似output裏面的filename
            config: config.template
        })
    ]
}
`在html模板裏面書寫語句`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= (htmlWebpackPlugin.options.config.title) %></title>
</head>
<body>
    <% if(htmlWebpackPlugin.options.config.header){ %>
    <header>我是頭部</header>
    <% } %>
    <div id="app"></div>
    <% if(htmlWebpackPlugin.options.config.footer){ %>
    <footer>我是footer</footer>
    <% } %>
</body>
</html>

cross-env報錯

# 傳遞NODE_ENV
 - 可以通過set方式進行變量的設置 build: "set NODE_ENV=development" 在window下可以
 - 也可以通過cross-env方式 build: "cross-env NODE_ENV=development" 兼容linux和window
 
 # cross-env 不是內部或外部命令問題處理
 - 全局install cross-env

webpack-dev-server

# 原來在webpack.config.js裏面的devServer是搭配webpack-dev-server來用的
一般在開發環境使用，所以，裏面一般會有那種是否自動打開瀏覽器的設置(oepn)
設置端口號，是否代理，host等等

處理css

style-loader: 動態創建style標籤，將css插入到head中
css-loader：負責處理@import等語句
postcss-loader和autoprefixer：自動生成瀏覽器兼容性前綴
less-loader：負責處理編譯.less文件，將其轉爲css

# 在webpack.config.js中的完整配置
module.exports = {
    module: {
        rules: [
              {
                test: /\.less$/,
                use: [
                    'style-loader', 'css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins () {
                                return [
                                    require('autoprefixer')({
                                        "overrideBrowserslist": [
                                            ">0.05%",
                                            "not dead"
                                        ]
                                    })
                                ]

                            }
                        }
                    },
                    'less-loader'
                ]
            }
        ]
    }
}
其中use字段的loader執行順序是從右往左的

# 將部分配置寫到package.json裏面去
  "browserslist": [
    ">0.25%",
    "not dead"]
然後只要在postcss-loader那個地方引入autoprefixer就行
use: [
    'style-loader', 'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            plugins: [require('autoprefixer')]
        }
    },
    'less-loader'
]

The engine “node” is incompatible with this module. Expected version “^8.12.0 || >=9.7.0”. Got “8.11.2”

# 執行CI/CD的時候，爆出了這個錯誤，原來是因爲依賴裏面有某個包的package.json裏面的engines字段控制了node的版本。一般而言，根據最大容錯法則，兼容最低版本的node。這裏有兩種解決方案
"engines": {
    "node": ">= 4.0.0"
}
- 在script裏面的build程序通過yarn config set ignore-engines true
- 第二種方法就是每次打包前都重新獲取一個新的node包，然後設置環境變量(新的包下面有教程)

# 升級環境前的node環境設置
CURRENT_PWD=`pwd`  // 保存當前的路徑
mkdir -p lib  //創建臨時文件夾，用於存放node安裝包
cd lib
weget url  // 獲取安裝包的位置，前提要部署好
tar package //解壓安裝包
cd ..
NODE_DIR=packageName // 設置node的名字，一般是解壓過後的名字
NEW="${CURRENT_PWD}/lib/${NODE_DIR}/bin/:${PATH}" // 設置環境變量
export PATH=${NEW}  // 暴露環境變量
chmod +x ./lib/${NODE_DIR}/bin/* // 給予權限
chmod +x ./lib/${NODE_DIR}/lib/node_modules/npm/bin/*  // 給予權限

webpack打包出現這樣的錯誤

報錯信息：A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

解決方案
valid：{ presets: [['presetName', {option: value}]] }
Invalid： { presets: [{option: value}] }
tips：webpack配置不熟悉的話可以上官網查看，然後一步一步來配置，謹記細心

報錯信息：ERROR in ./src/style/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/less-loader/dist/cjs.js!./src/style/index.less)

解決方案

根據報錯信息定位到postCss出了問題，首先考慮是不是根目錄下面是不是沒有postcss.config.js
然後再考慮配置文件webpack/vue.config.js的postCss配置項是否出了問題

報錯信息： Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin
解決方案 rm -rf node_modules && yarn install && yarn run build
tips：由於在同一個項目使用了不同的包管理器，npm | yarn | cnpm | npx，導致包都亂竄了。

報錯信息：mini-css-extract-plugin Conflicting order
解決方案：require.ensure([], component, 'chunk')出現了問題
tips：首先定位到是webpack不能有效提取出css。簡單的說，就是在js裏css的引入順序導致的問題，多個css的在js裏的引入順序不同，就會提示這個警告。例如，在1.js 裏，引入的順序是a.css, b.css;在2.js裏，引入順序是b.css,a.css,出現了這種引入順序不同，就導致了警告。在兩個js裏把引入順序調成一致，就沒問題了。在1.js和2.js裏的引入順序都調整成a.css, b.css就沒有那個警告了。
如果是在路由裏面出現這樣的問題話，是由於require.ensure([], component, 'chunk');
裏面的chunk出了問題，根chunk和子chunk產生了衝突,只要修改chunk名字或者保持一致即可


#### 解決favicon獲取不到的問題
```javascript
搭建好了項目，也寫好了代理，但是一直沒有把favicon代理過去，後臺一直報錯誤。
Proxy error: Could not proxy request /favicon.ico from **** tp ***
原來是因爲如果要代理一些靜態資源的話，後臺服務器是無法識別的。爲了
令後臺服務器識別這些靜態資源，就需要利用上copy-webpack-plugin這個插件。
在vue.config.js裏面寫進去這兩句話,且將favicon.ico放到static下面
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
	configureWebpack: {
	    plugins: [new CopyWebpackPlugin([{ from: 'static', to: 'static' }])]
	},
	proxy: {
		pathRewrite: {
	      '^/static': '/dist/static' // 這個是關鍵
	    }
	}
};

// index.html
 <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico"/>

啓蒙篇

Vue 環境的搭建

啓蒙篇

話不多說，直入話題

話不多說，直入話題

本文涉及Node.js 、 git、雲倉庫(這裏的雲倉庫指的是碼雲)、win10

首先講講Node.js的作用

我不會說node.js是基於V8引擎的JavaScript運行環境，也不會告訴你node.js使用事件驅動、什麼非阻塞I/O，什麼輕量級，高併發等等優點，我只會告訴你node裏面有一個東西叫做【npm】的包管理工具。
首先，你得會安裝Node.js
目前最新版本 10.10.0
穩定版本 8.12.0
你安裝完畢後在CMD裏面輸入node -v指令，如果彈出像下圖那樣類型的字符，恭喜你，node安裝成功

然後再輸入npm -v指令檢查npm -v是否有npm的這東東，如果顯示如下圖即可

Node.js 與 npm的關係

包含關係，nodejs中含有npm，比如說你安裝好nodejs，你打開cmd輸入npm -v會發現出現npm的版本號，說明npm已經安裝好。

其實npm是nodejs的包管理器（package manager）。我們在Node.js上開發時，會用到很多別人已經寫好的javascript代碼，如果每當我們需要別人的代碼時，都根據名字搜索一下，下載源碼，解壓，再使用，會非常麻煩。於是就出現了包管理器npm。大家把自己寫好的源碼上傳到npm官網上，如果要用某個或某些個，直接通過npm安裝就可以了，不用管那個源碼在哪裏。並且如果我們要使用模塊A，而模塊A又依賴模塊B，模塊B又依賴模塊C和D，此時npm會根據依賴關係，把所有依賴的包都下載下來並且管理起來。試想如果這些工作全靠我們自己去完成會多麼麻煩！

創建一個雲端倉庫

第二部就是去網上創建一個倉庫，用於存放你的項目，作者是用馬雲，噢打錯，是碼雲

創建賬號這種操作就不用多說了，當你創建好了一個賬號，你點擊下面的①項目，②然後選擇Private，第三點擊這個加號

點擊成功然後就開始創建一個私人的雲倉庫，具體如下圖

創建成功後一般有兩個文件，

其中
License 闡述項目採用何種開源協議
Readme.md是用於本地Git啓動項目的基本配置
把密鑰先複製好，接下來會用到

配置雲端倉庫的鑰匙

倉庫已經創建好了，不過是在雲端，現在我們需要把它拿到本地上來，這裏就涉及SSH公鑰的設置，主要的作用是用在雲端和本地上傳工具的識別

點擊右上角的管理，找到左側的部署公鑰管理，選擇添加公鑰

問題來了，公鑰怎麼生成？

因爲本地連接到雲端的倉庫是依賴git的，所以，公鑰的生成就要用到git界面
回到桌面，右鍵鼠標，打開Git Bash Here

輸入指令 ssh-keygen -t rsa -C "[email protected]"
例如：ssh-keygen -t rsa -C "[email protected]", 然後連續按三次回車
再輸入cat ~/.ssh/id_rsa.pub 即可查看生成的 publick key
把public key 的內容複製，粘貼到公鑰框裏面，點擊生成即可

打開Git Bash Here 輸入指令 git clone + ssh密鑰
然後就可以把雲倉庫裏面的文件down下來了，接下來繼續在Git Bash Here 裏面輸入
npm install --global vue-cli //安裝vue-cli
切換目錄，接下來要初始化文件，默認會把所有初始化文件存放在
當前文件夾裏面 ,然後輸入以下命令，記住，my-project表示的是你要存放的文件的名稱

vue init webpack my-project

然後按照提示選擇

    Target directory exists. Continue? (Y/n) y   --項目文件夾已經存在
    Project name (Alibaba/) Alibaba  --項目名稱
    Project description (A Vue.js project) –項目描述 這裏直接回車
    Author hikebao  --作者
    Vue build (Use arrow keys)   Runtime + Compiler: recommended for most users –回車選擇默認
    Install vue-router? (Y/n) Y  --構建vue路由
    Use ESLint to lint your code? (Y/n) n  --使用語法檢測
    Set up unit tests (Y/n) n  --設置單元測試
    Setup e2e tests with Nightwatch? (Y/n) n –設置端到端測試
    Should we run `npm install` for you after the project has been created?    (recommended) (Use arrow keys) Yes, use NPM –-使用npm的包管理工具

進入當前項目的文件夾
Cd + 文件夾路徑 ex: cd Alibaba
然後輸入
npm run start 啓動項目

到此已經把vue的項目搭建好了
最後一步就是把項目裏面的內容上傳到碼雲
按下Ctrl + c 暫停服務器
然後依次輸入
Git add . --把當前本地的文件緩衝到內存
Git commit --m ‘這裏是更新描述‘
Git push --把項目上傳到碼雲

下面是一些常用的git命令
刪除雲端數據，本地不受影響
Git rm –-cached --需要刪除的文件名 ex : git rm –-cached build
Git commit –m ‘操作描述’ --ex:git commit -m ‘Delete build file’
Git push --把修改更新到服務端

.
.
.
.
.

構建vue項目常見錯誤集錦 ---LTS

mode報錯

babel 報錯

html-webpack-plugin 使用

cross-env報錯

webpack-dev-server

處理css

The engine “node” is incompatible with this module. Expected version “^8.12.0 || >=9.7.0”. Got “8.11.2”

webpack打包出現這樣的錯誤

啓蒙篇

Vue 環境的搭建

話不多說，直入話題

首先講講Node.js的作用

Node.js 與 npm的關係

創建一個雲端倉庫

配置雲端倉庫的鑰匙

終END

構建vue項目常見錯誤集錦 ---LTS

Node---Buffer

node實踐記錄

window下的小技巧提高你的開發效率

node---模塊

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結