跟著慕課網(wǎng)的Jokcy老師做了一個(gè)todo項(xiàng)目，其實(shí)詳細(xì)描述了webpack+vue的環(huán)境搭建。大概由于版本問題，遇到了一些課程中沒顯示出的error，通過上網(wǎng)搜索查出了解決方式。用這篇文章完整記錄下自己的配置過程，以便后續(xù)參考。
視頻開頭推薦下載這些插件，便于vscode的編程。打算之后出一篇文章查詢記錄一下這些插件的功能。（我先都安裝了）
接下來是正式配置流程：
（1）初始化項(xiàng)目：
操作：使用ctrl+‘·’打開命令行，輸入npm init，選項(xiàng)皆默認(rèn)
結(jié)果：初始化成一個(gè)npm項(xiàng)目，形成package.json文件
（2）安裝需要的包：
操作：npm i webpack vue vue-loader（使用vue，需要安裝vue-loader）
結(jié)果：
解決操作：npm i css-loader
（3）新建文件夾‘src’，作為源碼放置的目錄；在src下新建文件‘a(chǎn)pp.vue’；在app.vue組件中輸入以下內(nèi)容
（4）要想辦法，讓app.vue組件在瀏覽器中運(yùn)行、顯示：
操作：新建文件‘webpack.config.js’
（webpack的作用：打包前端資源；要以js文件為入口，此處申明入口）
操作：在src文件夾下新建‘index.js’，作為入口文件。vue組件通過js入口文件，掛載到html頁面中；
在index.js中實(shí)現(xiàn)掛載操作：
在webpack.config.js中配置入口、出口，打包vue組件與入口js文件的內(nèi)容，形成bundle.js文件：
在package.json里面寫一句腳本：
（指定config文件：--config webpack.config.js）
只有在此處用webpack，才會(huì)用項(xiàng)目中配置的webpack，而不是用全局的webpack（如果直接在命令行里面輸入，則會(huì)調(diào)用全局的webpack。全局的webpack可能與我們使用的webpack版本不一樣）
配置好了以后，在命令行中輸入npm run build（進(jìn)行打包）。會(huì)提示安裝webpack-cli，安裝后繼續(xù)運(yùn)行，有warning：
錯(cuò)誤原因：webpack4里面需要聲明mode來判斷是生產(chǎn)環(huán)境還是開發(fā)環(huán)境
解決辦法：修改build：
"build": "webpack --mode=production --config webpack.config.js"依舊有錯(cuò)誤：
報(bào)錯(cuò)原因：原生webpack只支持js文件類型，在使用超出其理解范圍的語法時(shí)，要配置必要的loader
配置必要的loader：
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
依然有錯(cuò)誤：
聲明VueLoaderPlugin：
const VueLoaderPlugin = require('vue-loader/lib/plugin')然后在輸出里面配置plugins：
plugins: [
new VueLoaderPlugin()
]
同時(shí)npm i vue-template-compiler
依然有錯(cuò)誤：
npm i style-loader再次npm run build，未報(bào)錯(cuò)，搞定！
看結(jié)果：生成了一個(gè)dist文件夾，下面有bundle.js文件，里面是經(jīng)由webpack壓縮的頁面信息。
（5）webpack配置項(xiàng)目加載各種靜態(tài)資源及css預(yù)處理器
前面都是用webpack來加載.vue文件，現(xiàn)在是用webpack打包各種靜態(tài)資源還有圖片、樣式之類的。
樣式代碼的loader之前已經(jīng)配置好了（style-loader、css-loader）
還需要配置圖片：
{
// 圖片有各種格式，會(huì)用到的都要列出來
test: /\.(gif|jpg|jpeg|png|svg)$/,
use:
{
// use中，loader可以配置選項(xiàng)。方法：使用對象去聲明
loader: 'url-loader',
//使用options去聲明，將其中的對象傳給loader
options: {
// 限制開始轉(zhuǎn)譯的大小，小的圖片則不用轉(zhuǎn)譯，減少HTTP請求
limit: 1024,
// 自定義轉(zhuǎn)譯的文件名稱
// ext表示文件的擴(kuò)展名
name: '[name]-moira.[ext]'
}
}
}
安裝相應(yīng)的loader：
npm i url-loader file-loader（url-loader依賴于file-loader）
配置、安裝完畢loader時(shí)，就可以在js代碼中直接import這些非js內(nèi)容：
在樣式文件中寫點(diǎn)東西：
body{
color: red;
background-image: url('../images/back.jpg')
}
在入口文件（index.js）中import進(jìn)去：
import './assets/styles/test.css'
import './assets/images/back.jpg'
運(yùn)行：
接下來配置css與處理器：（stylus 可以使用模塊化的方式去寫css代碼）
在webpack.config.js中配置loader：
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
// 用stylus處理完的，是css內(nèi)容。要處理css內(nèi)容，必須返回上一級，到HTML頁面中找樣式
// 所以需要以上兩個(gè)loader
// webpack的內(nèi)容就是一層一層往上扔的，所以可以多種loader進(jìn)行搭配
'stylus-loader'
]
}
配置好以后安裝所需loader：
npm i stylus stylus-loader
接下來就可以用styl文件寫樣式了：
在styles文件夾中創(chuàng)建test-stylus.styl文件，寫一些樣式（這里之前安裝的stylus插件就有用了）：
body
font-size: 20px
可以看出，比css文件少了很多格式，更加方便了
寫完之后，在入口文件中引入：
import './assets/styles/test-stylus.styl'
打包一下：npm run build 顯示成功
（6）webpack-dev-server的配置和使用
webpack-dev-server專門用在開發(fā)環(huán)境（mode=development）
ps：生產(chǎn)環(huán)境（mode=production）
npm i webpack-dev-server
配置腳本："dev": "webpack-dev-server --mode=development --config webpack.config.js"
修改webpack的配置，來適應(yīng)webpack-dev-server的開發(fā)模式：
//在全局加入編譯目標(biāo)：web平臺(tái)（網(wǎng)站，跑在瀏覽器中）
target: 'web',
配置文件同時(shí)用在生產(chǎn)、開發(fā)環(huán)境，配置中需要進(jìn)行判斷。判斷方法：在腳本中設(shè)置環(huán)境變量，進(jìn)行標(biāo)識。
npm i cross-env 作用：在不同平臺(tái)，設(shè)置環(huán)境變量的方式不一樣（如mac與windows）。使用cross-env，則可在不同平臺(tái)執(zhí)行同個(gè)語句來設(shè)置環(huán)境變量。
配置腳本：
"build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js"
判斷環(huán)境變量：
// 判斷process.env.NODE_ENV是否等于development，以此判斷isDev是否為true
// 在啟動(dòng)腳本的時(shí)候設(shè)置的環(huán)境變量全部存于process.env這個(gè)對象里面
const isDev = process.env.NODE_ENV === 'development'
把module.exports改為const config，然后再加上：
module.exports = config
原因：要使用判斷，需要用const
if (isDev) {
// 在config上加一個(gè)devServer配置
config.devServer= {
// 啟動(dòng)的服務(wù)端口
port: 8000,
// 通過localhost或IP進(jìn)行訪問
host: '0.0.0.0',
// 若編譯過程中有錯(cuò)誤，顯示到網(wǎng)頁上,便于定位錯(cuò)誤
overlay: {
errors: true,
},
//熱加載
hot: true
}
}
接下來，我們需要在編譯結(jié)果的文件夾中加一個(gè)HTML文件來容納js文件。
安裝所需插件（使用webpack形成html文件）：
npm i html-webpack-plugin
引入：
// 引入webpack的形成html插件
const HTMLPlugin = require('html-webpack-plugin')
使用（在webpack全局中配置）：
plugins: [
// 使用vue框架時(shí)，一定要用以下這個(gè)webpack的plugin
// 在里面定義一個(gè)變量
// 作用：可以在全局調(diào)用變量來判斷環(huán)境，變量為：process.env.NODE_ENV 返回結(jié)果為"development" or "production"(雙引號不可省略)
// 這里調(diào)用了webpack插件，所以需要引入一下
new webpack.DefinePlugin({
'process.env': {
// 判斷是否isDev，若是，則為development；若不是，則為production
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new VueLoaderPlugin(),
new HTMLPlugin()
]
// 引入webpack
const webpack = require('webpack')
配置完畢，使用npm run dev運(yùn)行，進(jìn)入頁面，成功顯示vue組件的內(nèi)容。
說明webpack-dev-server已經(jīng)成功啟用了頁面。
下面介紹一些webpack-dev-server的其他功能：
if (isDev) {
// 在config上加一個(gè)devServer配置
config.devSever = {
// 啟動(dòng)的服務(wù)端口
port: 8000,
// 通過localhost或IP進(jìn)行訪問
host: '0.0.0.0',
// 若編譯過程中有錯(cuò)誤，顯示到網(wǎng)頁上,便于定位錯(cuò)誤
overlay: {
errors: true,
},
//熱加載，功能：只渲染所改組件的頁面效果，不會(huì)全部刷新，其他頁面數(shù)據(jù)依然會(huì)存在
hot: true,
// 運(yùn)行時(shí)自動(dòng)打開頁面，但修改時(shí)會(huì)總是打開，不太好，所以看具體業(yè)務(wù)需要
// open: true
// 單頁應(yīng)用會(huì)做很多前端路由，請求進(jìn)來的地址不一定是index.html。
// historyFallback能將所有沒有做映射的地址都映射到一個(gè)入口：index.html中去。
// 課程中只是提到這個(gè)功能，沒有講詳細(xì)配置
// historyFallback: {
// }
},
// 加插件，push一個(gè)新的webpack plugin
//下面是不刷新更新內(nèi)容
config.plugins.push(
// 啟動(dòng)熱更新功能插件
new webpack.HotModuleReplacementPlugin(),
// 幫助減少不需要的信息展示
new webpack.NoEmitOnErrorsPlugin()
)
}
在webpack-dev-server上增加配置：
// 在config上加一個(gè)devtool配置
// 作用：在頁面上調(diào)試代碼，使用source-map映射編譯代碼
config.devtool = '#cheap-module-eval-source-map'
重啟：npm run dev
成功展示頁面，附帶熱更新功能：
整個(gè)配置過程中參考的大佬地址：
- 慕課網(wǎng)Jokcy老師的vue+webpack打造todo應(yīng)用課程；
- webpack4配置vue環(huán)境和一些小坑 ：https://blog.csdn.net/weixin_40814356/article/details/80625747
