使用webpack4手動(dòng)擼一個(gè)vue工程，不使用vue-cli
項(xiàng)目地址：https://github.com/Roc-zhou/vue-webpack-demo.git
博客地址：https://www.zhouhaipeng.com/article/0/info/12
初始化項(xiàng)目
npm init -y
安裝webpack webpack-cli
webpack 官方安裝文檔
npm install --save-dev webpack webpack-cli // 使用的是webpack4.x
新建 webpack.config.js webpack配制文件
touch webpack.config.js
在根目錄新建 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用webpack4手動(dòng)擼一個(gè)vue工程，不使用vue-cli</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
搭建項(xiàng)目框架 創(chuàng)建目錄 主入口文件等
src 目錄下
|-- App.vue
|-- assets
| `-- public
| |-- Script
| |-- css
| `-- images
|-- components
| `-- HelloWorld.vue
|-- main.js
`-- router
`-- index.js
App.vue 文件內(nèi)容
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
main.js 文件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount("#app")
HelloWorld.vue 文件
<template>
<div class='helloworld'>
你好 VUE
</div>
</template>
<script>
export default {
beforeRouteEnter(to, from, next) {
return next(vm => {});
},
name: 'helloworld',
data() {
return {};
},
}
</script>
<style scoped>
</style>
./router/index.js 文件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: () => import('../components/HelloWorld.vue'),
}
],
})
export default router
安裝 vue vue-router
npm install --save vue vue-router
到這我們就把項(xiàng)目的框架搭建完畢，接下來我們配制開發(fā)環(huán)境，使我們搭建的項(xiàng)目可以在瀏覽器端像vue-cli一樣 執(zhí)行 npm run dev 命令跑起來?。?/p>
安裝幾個(gè)webpack 必須插件
// 安裝本地服務(wù)器插件
npm install -D webpack-dev-server
// html插件自動(dòng)添加js文件
npm install -D html-webpack-plugin
// vue 單文件組件
npm i vue-loader vue-template-compiler -D
// 安裝css
npm i css-loader style-loader -D
修改 webpack.config.js 文件
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development', // production Or development 環(huán)境
entry: "./src/main.js", // 入口文件
output: {
path: path.resolve(__dirname, "dist"), // 必須是絕對(duì)路徑
filename: "js/[name].[hash].js", // 「入口分塊(entry chunk)」的文件名模板（出口分塊？）
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true, // 壓縮
port: 8080,
hot: true, // 熱加載
open: false, //自定打開默認(rèn)瀏覽器
},
plugins: [ // 插件
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
minify: true, //壓縮
hash: false, //添加hash清除緩存
}),
new VueLoaderPlugin()
],
module: {
rules: [
// 它會(huì)應(yīng)用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 塊
{
test: /\.css$/,
use: [
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: path.resolve(__dirname, 'node_modules') // 排除文件
}
]
},
}
修改package.json文件
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --info=true --progress --color"
}
執(zhí)行 npm run dev 啟動(dòng)后 瀏覽器地址欄輸入 localhost:8080 就會(huì)看到 你好 VUE?。?/p>
到這我們使用webpack4 簡單配制 vue項(xiàng)目算是初步完成！
接下來我們?cè)?進(jìn)行更優(yōu)化的配制...
