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预览项目