自行配置前端開發環境(一)

開頭

最近跟幾個小夥伴聊到了如何不使用vue-cli的狀況下，本身配置一個使用vue的開發環境。因此就有了寫這篇文章的念頭，用來總結與記錄本身對配置一個開發環境的經驗吧

工具與框架的安裝

因爲我的習慣使用vue，而模塊管理工具用的多的是webpack，因此，這裏咱們就使用webpack來管理與打包開發與生產環境下的包，使用vue來構建頁面。

安裝

咱們新建一個文件夾,並進入該文件夾

mkdir jon-cli
cd jon-cli

npm 初始話

npm init

而後一路yes便可（或者可使用 npm init -y,能夠直接所有yes）

接下倆安裝咱們的包管理工具webpack

npm install -save-dev webpack webpack-cli

注意：這裏的-save-dev 是將webpack安裝爲開發環境下的，而咱們還安裝了webpack-cli是由於webpack4.0版本後將webpack與webpack-cli拆分開了。
而後這裏還有一個要注意的⚠️：網上有些教程說須要你全局安裝webpack-cli，實際上是不須要的，並且我這裏也建議別那樣去作，由於你全局安裝了webpack-cli以後可能會許久不更新它，而後你的項目開發版本可能會有所改變，這樣的話就會形成版本不兼容的問題。

配置項目文件結構

咱們在安裝完webpack以後的 jon-cli 目錄下已經有了package.json與package-lock.json文件了，如今咱們在新建一個src目錄與config來存放咱們的項目資源與webpack配置文件

mkdir src config

而後咱們在config目錄下新建三個文件用來才拆分webpack的公共配置、開發環境配置與生產環境配置。

touch webpack.common.js webpack.dev.js webpck.prod.js

在src目錄下新建一個main.js文件用來充當webpack的入口打包文件，如今咱們的目錄是這樣的：

執行簡單的打包

如今咱們來寫入webpack的基本配置
打開webpack.common.js寫入下面內容

const path = require("path");

let config = {
    mode: process.env.NODE_ENV === "development" ? "development" : "production",
    entry: path.resolve(__dirname, "../src/main.js"),
    output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.js",
    },
};

module.exports = config;

咱們來解釋一下上面的配置：
首先webpack是運行在node端的，因此咱們是可使用node自帶的包的，咱們引入path來處理文件路徑；定義一個config對象；

mode：支持兩種模式，分別是development開發模式，production生產模式（默認是這個模式），咱們也能夠不在webpack配置文件中配置mode，能夠在npm scripts命令中配置mode模式

webpack --mode=production

entry: 打包入口文件路徑
用法：entry: string|Array<string>|{[entryChunkName: string]: string|Array<string>}
在這裏咱們配置的是一個單頁面應用，因此咱們先不討論如何配置多頁面應用與entry的具體用發，咱們這裏的entry的值是一個字符串，表示的是你須要打包的入口文件路徑

output: 輸出打包後的文件
用法：

output: {
    path: "",        //輸出文件路徑
    filename: "output[hash][name].js",    
//輸出文件名稱,可以使用[hash]將輸出的文件帶有哈希值，這樣在使用html生成插件時能夠插入帶有哈希值
的js文件，可在避免出現文件緩存狀況；[name]用法是將entry中的key值（對象用法）插入到出口文件中。
}

接下里在webpack.dev.js文件中引入公共配置並將開發環境配置與公共環境配置合併並將其導出

const common = require("./webpack.common");
const merge = require("webpack-merge");


module.exports = merge(common,{

});

這裏咱們使用的是webpack-merge來合併配置，可使用 npm install -save-dev webpack-merge安裝它

而後咱們在mian.js文件中寫入一些代碼

function test() {
    console.log("this is test function!");
}

在package.json文件中編輯咱們的npm scripts命令

"scripts": {
    "start": "NODE_ENV=development webpack --config ./config/webpack.dev.js",
},

如今就能使用npm run start命令在控制檯中對文件進行打包了；另外，npm在5.2版本後添加了npx命令，npx是用來調用項目內部安裝的模塊的，因此咱們也可使用npx webpack直接打包文件。可是咱們這裏用的是script，其中攜帶了參數，如寫入當前環境是開發環境的NODE_ENV參數和--config的webpack配置文件參數等。

在等打包結束後咱們能夠看到jon-cli目錄下多了一個dist目錄，這個就是咱們打包後生成的目錄，裏面有一個js文件，如今咱們的目錄結構是這樣的：

這個js文件的文件名是由咱們配置的output選項中的filename屬性決定的，那一連串的數字就是咱們配置時的[hash]，而[name]爲何沒有顯示呢，那是由於咱們如今的entry使用的是字符串形式，這裏的name對應的是entry中的key，對象形式中的key值，因此咱們這裏是沒有的，這裏就不細說entry與output了，等下篇如何配置多頁面應用時候咱們在來細聊。

如今咱們能夠打開dist下的js文件，在文件中咱們能夠查找到咱們在main.js文件中寫的代碼（這裏就不貼圖了）。如今咱們就配置完成一個最基本的打包了😊。。。