前言

由于是工具，很可能你看到的時候有些工具包已經升級了，會有一些報錯；這個你就需要自己探索了。

工具的版本

node: v10.16.0

npm: v6.9.0

babel: 7.5.5

webpack: 4.38.0

入題

提醒：在我們開始之前，你先檢查下你相關工具的包是不是和我的一樣，以免報一些版本的錯誤。

首先我們先大致了解下一個完整的腳手架幫我們做了哪些工作：

ES6+ 語法轉換成 ES5 語法

.vue 轉換成 js 文件

代碼熱更新

加載各種靜態資源

本地提供靜態服務 ……

你可以理解成腳手架幫我們完成了業務邏輯之外的大部分繁瑣的工程配置，讓我們能快速的進入項目的開發。不過這似乎不利于個人的發展，我們作為有格局的前端，這些優工程配置的工作我們也是需要了解的，要不然你又只能回家繼承幾十億的家產啦。

下面正式開始：

搭建 webpack 環境

webpack 簡單來說就是前端模塊化管理工具，這里不講就具體的用處，如果不懂 webpack 的話建議先學習官方文檔：https://www.webpackjs.com。

先確保你的項目中有 package.json 文件，如果沒有可以使用 npm init 來創建。

我們先安裝 webpack webpack-cli,安裝在 devDependencies。

npm?install?webpack?webpack-cli?--save-dev

三點解釋

--save 和 --save-dev 的區別

--save：將包安裝到 dependencies ，簡寫是 -S；

--save-dev：將包安裝到 devDependencies 簡寫是 -D。

dependencies 和 devDependencies 的區別

dependencies：運行時的依賴，即這個模塊在生產環境下還需要使用；

devDependencies：開發時的依賴。即這個模塊只是在開發時使用。

webpack-cli 是什么

webpack4.0 后將 webpack-cli 從 webpack 中分離了出來，所以我們現在需要單獨安裝。

webpack-cli 為提供了一組靈活的命令，用于在設置自定義 webpack 項目時提高速度。也就是說你沒有安裝 webpack-cli，你是無法使用 webpack 命令的。

webpack 環境搭建成功了嗎？

現在看看 webpack 的環境是否搭建好了。

我們先新建一個文件 src/main.js：

//?main.js?文件代碼
const?name?=?'小生方勤';
let?hello?=?`hello?${name}`;

我們運行以下命令后：

webpack?./src/main.js?--mode?development

發現項目中多了個 dist/main.js 文件，說明 webpack 環境算是安裝好了。

不過我們發現代碼還是使用的模板字面量語法(ES6 語法)，這在部分瀏覽器是會報錯的。所以這個時候我們就需要 Babel 來幫助我們將 ES6+ 的語法轉換成瀏覽器可以識別的語法。

接下來我們就講講 Babel 的配置。

為項目配置 Babel

如果你想了解下 Babel，你可以看看之前寫的文章 關于 Babel 你必須知道的。

我們先安裝相關依賴包：

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

我們新建一個 build/webpack.config.js 文件并做出如下配置( 配置 babel-loader )：

const?path?=?require('path')

module.exports?=?{
????mode:?'development',
????entry:?{
????????//?入口文件
????????main:?path.resolve(__dirname,"../src/main.js")
????},
????output:?{
????????//?打包后文件輸出的目錄
????????path:?path.resolve(__dirname,'../dist'),
????????filename:?'js/[name].[hash:8].js'
????},
????module:?{
????????rules:?[
????????????{
????????????????test:?/\.js$/,
????????????????exclude:?/node_modules/,?//?加快處理速度
????????????????use:?[
????????????????????{
????????????????????????loader:?'babel-loader'
????????????????????}
????????????????]
????????????}
????????]
????}
}

然后我們在根目錄新建一個文件 babel.config.js 并做出如下配置：

module.exports?=?{???
????presets:?[
????????"@babel/env",
????]
};

我們再打包試試，你會發現已經轉成 ES5 的語法了：

不過當你使用一些瀏覽器不能識別的語法的時候打包的時候就會報錯，比如我們代碼中使用了 Set():

下面我們就配置 @babel/polyfill。

按需引入 @babel/polyfill

先安裝：

npm?install?@babel/polyfill?-S

然后我們在根目錄新建一個文件 babel.config.js 并做出如下配置：

module.exports?=?{???
????presets:?[
????????[
????????????"@babel/env",
????????????{
????????????????useBuiltIns:?"usage",??//?按需加載?@babel/polyfill
????????????},
????????],
????]
};

這樣配置后，打包出來的文件就只是僅僅打包了 polyfill 代碼中需要使用的那部分，打包后的體積也大大減少了。

按需加載后文件體積小了 360KB 左右。

小提示: 打包生成的文件是不會自動刪除的，需要我們配置 clean-webpack-plugin 插件。

接下來我們開始引入 Vue。

引入 Vue

我們先安裝相關的包：

npm?install?vue?-S
npm?install?vue-loader?vue-template-compiler?-D

現在項目目錄大概是這樣的：

然后我們將 main.js 代碼改成：

import?Vue?from?'vue'
import?App?from?'./App.vue'

const?root?=?document.createElement('div')
document.body.appendChild(root)

new?Vue({
????render:?h?=>?h(App)
}).$mount(root)

因為要支持 .vue 文件，所以為我們在 webpack 也需要做相關的配置，即在 webpack.config.js 做如下配置；

...
module:?{
????rules:?[
????????{
????????????test:?/\.vue$/,
????????????loader:?'vue-loader'
????????}
????]
},
...

注意：vue-loader 在 15.* 之后的版本使用 vue-loader 都是需要依賴 VueLoaderPlugin 的，具體配置見源碼。

做到這里是不是想看看這段代碼在瀏覽器的運行結果呢？OK 我們繼續配置。

配置 html-webpack-plugin 和 devServer

配置 html-webpack-plugin

npm?install?html-webpack-plugin?-D

我們在根目錄新建一個 index.html 文件，然后還是配置 webpack.config.js 文件；

plugins:?[
????new?CleanWebpackPlugin(),???//?清除?dist?的文件
????new?VueLoaderPlugin(),
????new?HtmlWebpackPlugin({
????????filename:?'index.html',
????????template:?'index.html',
????????inject:?true
????}),
]

打包后 dist 就會多一個 index.html 文件:

我們發現打包后的文件自動插入了 index.html 模板，并生成了一個新的 index.html 文件，細心的朋友應該看到了所有的文件都合并在 main.js 了，等下我就說說該如何把這個文件分開；在之前我們先看看如何實現開發環境熱更新。

配置 devServer

先安裝包:

npm?install?webpack-dev-server?-D

還是在 webpack.config.js 添加配置：

devServer:?{
????host:?'localhost',
????port:?8080,
????hot:?true,?//?熱更新
},
plugins:?[
????//?剩略了部分代碼，詳細的請看源碼
????new?webpack.HotModuleReplacementPlugin(),
????new?webpack.NamedModulesPlugin()
]

然后我們在 package.json 加上一條命令：

"dev":?"webpack-dev-server?--config?./build/webpack.config.js"

接著我們就可以運行 npm run dev,我們直接看效果：

到這里我們的項目基本配置都有了，項目已經可以跑起來啦。

再聲明下：實際項目中還是使用腳手架為好，這樣可以避免很多繁瑣的配置。不過項目到底是如何搭建的，我們還是需要了解的；這個過程其實沒有什么太多的難點。

參考：

webpack 官方文檔：https://www.webpackjs.com

node 官方文檔：https://nodejs.org/zh-cn/docs/

babel 官方文檔：https://www.babeljs.cn/

◆?◆?◆ ?◆?◆

長按關注小生

你的在看我當成喜歡

總結

以上是生活随笔為你收集整理的vue 分模块打包 脚手架_一步步从头搭建 Vue 开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。