作者：小生方勤
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/bl5nHiRz7rGc5TbVbk-4rQ
前言
由于是工具，很可能你看到的時候有些工具包已經(jīng)升級了，會有一些報錯；這個你就需要自己探索了。
工具的版本
- node: v10.16.0
- npm: v6.9.0
- babel: 7.5.5
- webpack: 4.38.0
入題
提醒：在我們開始之前，你先檢查下你相關(guān)工具的包是不是和我的一樣，以免報一些版本的錯誤。
首先我們先大致了解下一個完整的腳手架幫我們做了哪些工作：
- ES6+ 語法轉(zhuǎn)換成 ES5 語法
- .vue 轉(zhuǎn)換成 js 文件
- 代碼熱更新
- 加載各種靜態(tài)資源
- 本地提供靜態(tài)服務(wù) ……
你可以理解成腳手架幫我們完成了業(yè)務(wù)邏輯之外的大部分繁瑣的工程配置，讓我們能快速的進(jìn)入項目的開發(fā)。不過這似乎不利于個人的發(fā)展，我們作為有格局的前端，這些有工程配置的工作我們也是需要了解的，要不然你又只能回家繼承幾十億的家產(chǎn)啦。
下面正式開始：
搭建 webpack 環(huán)境
webpack 簡單來說就是前端模塊化管理工具，這里不講究具體的用處，如果不懂 webpack 的話建議先學(xué)習(xí)官方文檔：https://www.webpackjs.com。
先確保你的項目中有 package.json 文件，如果沒有可以使用 npm init 來創(chuàng)建。
我們先安裝 webpack webpack-cli,安裝在 devDependencies。
npm install webpack webpack-cli --save-dev
三點解釋
--save 和 --save-dev 的區(qū)別
- --save：將包安裝到 dependencies ，簡寫是 -S；
- --save-dev：將包安裝到 devDependencies 簡寫是 -D。
dependencies 和 devDependencies 的區(qū)別
- dependencies：運行時的依賴，即這個模塊在生產(chǎn)環(huán)境下還需要使用；
- devDependencies：開發(fā)時的依賴。即這個模塊只是在開發(fā)時使用。
webpack-cli 是什么
webpack4.0 后將 webpack-cli 從 webpack 中分離了出來，所以我們現(xiàn)在需要單獨安裝。
webpack-cli 為提供了一組靈活的命令，用于在設(shè)置自定義 webpack 項目時提高速度。也就是說你沒有安裝 webpack-cli，你是無法使用 webpack 命令的。
webpack 環(huán)境搭建成功了嗎？
現(xiàn)在看看 webpack 的環(huán)境是否搭建好了。
我們先新建一個文件 src/main.js：
// main.js 文件代碼
const name = '小生方勤';
let hello = `hello ${name}`;
我們運行以下命令后：
webpack ./src/main.js --mode development
發(fā)現(xiàn)項目中多了個 dist/main.js 文件，說明 webpack 環(huán)境算是安裝好了。
不過我們發(fā)現(xiàn)代碼還是使用的模板字面量語法（ES6 語法），這在部分瀏覽器是會報錯的。所以這個時候我們就需要 Babel 來幫助我們將 ES6+ 的語法轉(zhuǎn)換成瀏覽器可以識別的語法。
接下來我們就講講 Babel 的配置。
為項目配置 Babel
如果你想了解下 Babel，你可以看看之前寫的文章 關(guān)于 Babel 你必須知道的。
我們先安裝相關(guān)依賴包：
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",
]};
我們再打包試試，你會發(fā)現(xiàn)已經(jīng)轉(zhuǎn)成 ES5 的語法了：
不過當(dāng)你使用一些瀏覽器不能識別的語法的時候打包的時候就會報錯，比如我們代碼中使用了 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
我們先安裝相關(guān)的包：
npm install vue -S
npm install vue-loader vue-template-compiler -D
現(xiàn)在項目目錄大概是這樣的：
然后我們將 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 也需要做相關(guān)的配置，即在 webpack.config.js 做如下配置；
...
module: {
rules: [
{ test: /.vue$/, loader: 'vue-loader'
} ]},...
注意：vue-loader 在 15.* 之后的版本使用 vue-loader 都是需要依賴 VueLoaderPlugin 的，具體配置見源碼。
做到這里是不是想看看這段代碼在瀏覽器的運行結(jié)果呢？OK 我們繼續(xù)配置。
配置 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 文件:
我們發(fā)現(xiàn)打包后的文件自動插入了 index.html 模板，并生成了一個新的 index.html 文件，細(xì)心的朋友應(yīng)該看到了所有的文件都合并在 main.js 了，等下我就說說該如何把這個文件分開；在之前我們先看看如何實現(xiàn)開發(fā)環(huán)境熱更新。
配置 devServer
先安裝包:
npm install webpack-dev-server -D
還是在 webpack.config.js 添加配置：
devServer: {
host: 'localhost',
port: 8080,
hot: true, // 熱更新},plugins: [
// 剩略了部分代碼，詳細(xì)的請看源碼
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
]
然后我們在 package.json 加上一條命令：
"dev": "webpack-dev-server --config ./build/webpack.config.js"
接著我們就可以運行 npm run dev,我們直接看效果：
到這里我們的項目基本配置都有了，項目已經(jīng)可以跑起來啦。
作者：小生方勤
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/bl5nHiRz7rGc5TbVbk-4rQ
