其實vue的腳手架是真的多，vue的nuxt腳手架的，vue的webpack腳手架的，還有各種gitHub上的后臺管理系統模板的。。。。。

而vue-cli2的webpack模板，這個相信是大多數人最為熟悉的模板了。現在再去安裝官網上模板的話，已經基于vue-cli3安裝的了。

為了鞏固webpack配置的知識，自己決定再手動擼一遍vue-cli2腳手架的配置。

01

新建一個空文件夾，命名demo，用vscode打開

02新建src文件夾，在下面新建App.vue

*.vue 文件，是一個自定義的文件類型，用類似HTML的語法描述一個Vue組件。每個.vue文件包含三種類型的頂級語言塊 template , script 和 style。這三個部分分別代表了 html,js,css。

但是瀏覽器本身并不認識.vue文件，所以必須對.vue文件進行加載解析，此時需要vue-loader。還需要css-loader,vue-template-compiler

<template>
????<div>
????????<h3>this?is?a?login?componenth3>
????div>
template>
<script>export?default?{
}script>
<style?lang="css">h3{color:skyblue;
????}style>
03在項目根目錄新建main.js,將App.vue掛載到vue實例上import?Vue?from?'vue'
import?App?from?'./src/App.vue'
import?'./src/assest/css/global.css'
const?div1=document.createElement('div')
document.body.appendChild(div1)
new?Vue({
????//el:'#app',
????render:?h?=>?h(App)
}).$mount(div1)
//一直報錯can?not?find?element?'#app',畢竟創建了div根節點而已
04在項目根目錄下新建webpack.config.js，作為webpack打包的配置

webpakc官網入口有個基礎入口出口配置，傳送門https://www.webpackjs.com/

簡單來說，webpack就是一個模塊加載器，所有資源都可以作為模塊來加載，最后打包輸出,其核心配置文件就是webpack.config.js

const?path=require('path')//node的
const?VueLoaderPlugin?=?require('vue-loader/lib/plugin');
module.exports={
????target:'web',//
????entry:path.resolve(__dirname,'main.js'),//打包指定文件為main.js
????output:{
????????path:path.resolve(__dirname,'dist'),//打包輸出路徑為根目錄的dist文件夾
????????filename:"[name].js"//name是chunk的通配符，可以理解為就是入口文件名。本例打包出來的文件為：main.js
????},
????module:{
????????//webpack只認識.js，對于其他文件需要配置響應的loader來解析
????????rules:[
???????????{
????????????????test:/\.vue$/,
????????????????loader:'vue-loader'
????????????},
????????????{
????????????????test:/\.css$/,
????????????????loader:'css-loader'
????????????},
????????????{
????????????????test:?/\.(png|jpe?g|gif|svg)(\?.*)?$/,
????????????????loader:?'url-loader',
????????????????options:?{
??????????????????limit:?1024,
??????????????????name:?'[name].[hash:7].[ext]'
????????????????}
??????????????},
??????????????{
????????????????test:?/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
????????????????loader:?'url-loader',
????????????????options:?{
??????????????????limit:?10000,
??????????????????name:'fonts/[name].[hash:7].[ext]'
????????????????}
????????????}
????????]
????},
????plugins:?[
????????//?vue-loader?was?used?without?the?corresponding?plugin.?Make?sure?to?include?VueLoaderPlugin?in?your?webpack?config.
????????new?VueLoaderPlugin()
????],
}
05npm安裝所需loader

在終端輸入npm init -y

會看到根目錄下生成package.json,還有package-lock.json(用以記錄當前狀態下實際安裝的各個npm package的具體來源和版本號。)

npm?i?webpack?vue-loader?css-loader?vue-template-compiler?url-loader?file-loader?-D?

npm?i?vue?-S
06然后就行了？？no

打開package.json,增加自定義build命名

?"scripts":?{
????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
????"build":?"webpack?--config?webpack.config.js"
??}

最后在終端，輸入npm run build可以看到成功打包。

打開dist目錄下的main.js,可以看到打包后的內容：

07后續

為了能在瀏覽器顯示，我們來安裝webpack-dev-server來模擬一個服務器環境

npm?i?webpack-dev-server?cross-env
---------------------------------------------------
?"build":?"cross-env?NODE_ENV=production?webpack?--config?webpack.config.js",
?"dev":?"cross-env?NODE_ENV=development?webpack-dev-server?--config?webpack.config.js"

npm run dev,打開localhost:3000

結果如下，mian.js并不能展現網頁布局在瀏覽器上

這時候需要在配置文件中加上htmlwebpackplugin,該插件將為你生成一個 HTML5 文件:打包輸出文件夾dist/index.html

這時候需要在配置文件中加上htmlwebpackplugin,該插件將為你生成一個 HTML5 文件:打包輸出文件夾dist/index.html

npm?install?--save-dev?html-webpack-plugin
------------------------------------
plugins:?[new?HtmlWebpackPlugin()]

再次打開localhost:3000

注意css樣式沒有起作用，增加style-loader

style-loader:配合css-loader使用，以形式在html頁面中插入css代碼

????{
????????????????test:/\.css$/,
????????????????use:[
????????????????????'style-loader',
????????????????????'css-loader'
????????????????]
????????????},

大功告成！

在打包的時候有沒有發現npm run dev與npm run build的區別：

webpack-dev-server，生成文件的都是在內存里，而npm run build生成文件是顯示在硬盤目錄里的，畢竟build里面是webpack命令。

感謝閱讀！

總結

以上是生活随笔為你收集整理的vue 分模块打包 脚手架_手动撸一个webpack4脚手架(仿vuecli2)的全部內容，希望文章能夠幫你解決所遇到的問題。

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