1、
（1）創建***文件夾，並 npm init -y 初始化項目
（2）創建目錄結構如下：
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>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
main.js內容：
import Vue from 'vue'
import App from './App.vue'
import './styles/index.css'
new Vue({
el:'#app',
render: h=> h(App)
})
（3）安裝vue：
npm install vue
（4）webpack安裝：
最新版本安裝 npm install --save-dev webpack
指定版本安裝 npm install --save-dev webpack@v4.35.2
（5）如果安裝的是v4+版本，還需要安裝cli才能使用webpack命令：
npm install --save-dev webpack-cli@v3.3.6
（6）安裝打包css依賴：
npm install --save-dev style-loader css-loader
（7）安裝打包images依賴：
npm install --save-dev file-loader、
npm install --save-dev html-webpack-plugin
（8）安裝實時重加載依賴：
npm install --save-dev webpack-dev-server@v3.7.2
（9）安裝瀏覽器兼容性依賴：
npm install -D babel-loader @babel/core @babel/preset-env
（10）安裝打包單文件vue依賴:
npm install -D vue-loader vue-template-compiler
2、
配置webpack.config.js,包括以上依賴的配置及其熱更新等配置，
// 引入node中的path模塊，處理文件路徑 的小工具
const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 1. 引入 vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 1. 導入webapck, 熱模塊加載
const webpack = require('webpack')
// 導出一個webpack具有特殊屬性配置的對象
module.exports = {
mode: 'none', // 指定模式配置："development" | "production" | "none"
// 入口
entry: './src/main.js', // 入口模塊文件路徑
// 出口
output: {
// path: './dist/', 錯誤的，要指定絕對路徑
path: path.join(__dirname, './dist/'), //打包的結果文件生成的目錄要是絕對路徑
filename: 'bundle.js'
},
// 配置插件
plugins: [
new HtmlWebpackPlugin({
// 指定要打包的模板頁面
// 就會將 index.html 打包到與 bundle.js 所在同一目錄下面，
// 同時在 index.html 中會自動的使用script 標簽引入bundle.js
template: './index.html'
}),
// 3. 請確保引入這個插件！
new VueLoaderPlugin(),
// 3. 配置熱模塊加載對象
new webpack.HotModuleReplacementPlugin()
],
// 實時重新加載
devServer: {
// 目標路徑
contentBase: './dist',
// 2. 開啟熱模塊加載,
hot: true
},
module: {
rules: [ //配置轉換規則
{
test: /\.css$/, // 注意，不要有單引號，正則表達 式，匹配 .css 文件資源
use: [
// 根據外國人的習慣來的順序，而且順序不要寫錯
'style-loader', // js識別css
'css-loader' // css 轉換為 js
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
// 解決兼容性問題
{
test: /\.m?js$/,
exclude: /(node_modules)/, // 排除的目錄
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // babel中內容的轉換規則工具
}
}
},
// 2. 處理 .vue 單文件組件
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
}
3、
安裝后直接執行webpack命令會報錯，要在項目文件夾下的package.json文件中scripts配置命令映射
"scripts":{
"build":"webpack",
"watch": "webpack --watch",
"dev": "webpack-dev-server --open"
}
4、其他依賴擇需安裝
5、npm run dev 啟動項目，實時預覽
npm run build 打包項目，點index.html預覽項目