作者：小生方勤
轉發鏈接：https://mp.weixin.qq.com/s/bl5nHiRz7rGc5TbVbk-4rQ
前言
由于是工具，很可能你看到的時候有些工具包已經升級了，會有一些報錯；這個你就需要自己探索了。
工具的版本
- 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,我們直接看效果：
到這里我們的項目基本配置都有了，項目已經可以跑起來啦。
作者：小生方勤
轉發鏈接：https://mp.weixin.qq.com/s/bl5nHiRz7rGc5TbVbk-4rQ
