webpack構建vue專案深入

- [css](#css)

- [reset.css](#resetcss)

- [js](#js)

- [home](#home)

- [router](#router)

- [main.js](#mainjs)

- [view](#view)

- [index.html](#indexhtml)

- [package.json](#packagejson)

配置webpack.config.js

const path = require('path')

module.exports = ,
module: ,,,
}},]},
plugins: ,
output: 
}

npm i -d webpack vue-loader html-loader style-loader css-loader url-loader file-loader sass-loader

devserver: ,

增加命令列指令碼：

"build": "webpack --mode=production --config webpack.config.js",

"dev": "webpack-dev-server --mode=production --config webpack.config.js"

cannot find module 'webpack-cli/bin/config-yargs'

這時候你會發現服務可以啟動了，但是頁面顯示：cannot get /。

這是什麼原因呢？

配置router：

import vue from

'vue'
import router from
'vue-router'
import home from
'../home/index.vue'
vue.use(router)
export default new router(
]})

import vue from

'vue'
import router from
'./router/index'
vue.config.productiontip = false
new vue(,
})

router-view>
div>
template>
export default 
script>
scoped>
style>

charset="utf-8">
name="viewport"
content="width=device-width,initial-scale=1.0">
testtitle>
head>
div>
body>
html>

cannot find module 『vue-template-compiler』

解決辦法：

npm i vue-template

-compiler

vue-loader was used without the corresponding plugin. make sure to include vueloaderplugin in your webpack config.

解決辦法：

const vueloaderplugin = require('vue-loader/lib/plugin')

plugins: [

new vueloaderplugin()
],

can』t resolve 『vue』

can』t resolve 『vue-router』

npm i vue  vue-loader

npm i vue-router

failed to

load resource: the server responded with
a status of
404 (not found)

const htmlwebpackplugin = require('html-webpack-plugin');

const cleanwebpackplugin = require('clean-webpack-plugin');

plugins: [

new vueloaderplugin(),
new cleanwebpackplugin(['dist']),
new htmlwebpackplugin()
],

css下面：

}

}

}

, 

}, }

webpack 構建簡單的vue專案

恢復內容開始 webpack主要執行流程 入口 loader處理 出口 webpack.config.js 檔案 const path require path 引入path模組 module.exports module resolve devserver 多檔案入口const htmlwebpa...

提高 webpack 構建 Vue 專案的速度

最近有人給我的 vue2 後台管理系統解決方案 提了 issue 說執行 npm run build 構建專案的時候極其慢，然後就引起我的注意了。在專案中，引入了比較多的第三方庫，導致專案大，而每次修改，都不會去修改到這些庫，構建卻都要再打包這些庫，浪費了不少時間。所以，把這些不常變動的第三方庫都提...

使用VUE2 0構建webpack專案

1 vue構建webpack專案需要依賴於node 和npm 需要先安裝。輸入node v回車 會出現node版本號 輸入npm v回車 會出現npm版本號 2 安裝vue npm install g vue cli g表示全域性安裝，vue cli是模組 或者使用 映象 npm install r...