新手級使用webpack4 x構建vue的開發環境

首先呢，我們在這章節呢，我將手把手帶著大家使用webpack4.x搭建乙個vue的開發環境，這裡有的同學可能就會問了？

「有現成的類似於vue-cli的webpack腳手架工具，為什麼我們還要自己在造輪子呢？」在這裡呢，我將對這個問題做出回答：

我們需要建立我們的專案開發目錄

md webpack-vue && cd webpack-vue

安裝webpack到我們的專案中

cnpm install -d webpack webpack-cli

引入我們需要的第三方的package.json依賴包和loader

# 安裝 vue ，這個沒啥疑議吧 ^_^ cnpm install -s vue # vue-loader是必須的，vue-template-compiler是vue-loader必須的依賴 cnpm install -d vue-loader vue-template-compiler # 安裝 babel ，將es6 -> es5 npminstall -d @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader # css載入器css-loader style-loader轉換器, style-loader會把css轉成js的，小朋友們 ~ cnpm install -d css-loader style-loader # 等資源載入器 cnpm install -d file-loader url-loader # 安裝css預處理器這裡以 less為案例 cnpm install -d less-loader less

安裝好相關的我們需要的模組之後呢，我們就需要在webpack.config.js中把這些模組按照一定的方式配置好，然後才能正常的啟動專案

const path =
require
('path'
)const vueloaderplugin =
require
('vue-loader/lib/plugin');
module.exports =
,    module:,,
//...... 太長了 省略一部分,}
}]},
resolve:
,    plugins:
[new
vueloaderplugin()
]}

配置好我們的webpack.config.js檔案後，我們接下來就可以來梳理專案目錄結構了，目錄結構如下：

新手級使用webpack4 x構建vue的開發環境

webpack4 x的使用歷程

webpack 4 x安裝命令

webpack 4 X 基礎編譯

新手級使用webpack4 x構建vue的開發環境

webpack4 x的使用歷程

webpack 4 x安裝命令

webpack 4 X 基礎編譯

相關推薦