第一步：新建项目文件夹，在项目文件夹下新建src文件夹：
image.png
vscode控制台进行操作：ctrl+`
第二步：初始化并安装webpack
本地安装
这里就不介绍全局安装了，推荐本地安装
npm init -y
npm install webpack webpack-cli --save-dev
image.png
第三步：编辑以上文件
1. 编辑index.html
vh
这里推荐使用 用户代码片段 来快速生成vue的html加载页面
image.png
image.png
image.png
- html.json就是html的用户代码片段，可以在里面生成各种快捷编码，这里我编辑了一个vh代码片段来快速生成vue的html加载
附上代码：
"vue-html快速生成": {
"prefix": "vh",
"body": [
"<!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>测试阶段</title></head>",
"<body><div id=\"app\"></div></html>"
],
"description": "vue de html jiazai wenjian"
}
此时再去index.html中输入vh，便可生成vue的加载html文件了
image.png
回车后就系介样子的咯：
image.png
2. 编辑package.json
初始化后的文件是这个样子，现在要进行一些编辑
image.png
在scripts对象下面添加“build”：打包操作；“dev”：浏览器自动刷新操作
image.png
附上代码直接替换掉script即可：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
第四步：新建webpack.config.js 配置管理文件
const path = require('path');
// 热更新 第2步
const webpack = require('webpack');
// 1. 挂载 htmlWebpackPlugin 插件 追加 bundle.js 到 index.html 中
const htmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// development-开发模式 production-生产模式
mode: 'development',
// mode: 'production',
entry: {
index: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 所有webpack 插件的配置节点
plugins: [
// 热更新 第3步
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
// 2. 指定模板文件路径 挂载一个 plugins 节点
new htmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html'
}),
],
module: {
rules: [
// 加载 .css
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 加载 .scss
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
// 加载 .jpg
{
test: /\.(png|jpg|gif)$/,
// use: 'url-loader?limit=8192&name=[hash:8]-[name].[ext]'
// use: 'url-loader?limit=8192&name=[name].[ext]'
use: [{
loader: 'file-loader',
options: {
name: '[hash:8]-[name].[ext]',
outputPath: './images'
}
}]
},
// 加载 .ttf
{
test: /\.(ttf|svg|eot|woff|woff2)$/,
use: ['url-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
},
// 加载 .vue
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
// 配置 webpack 开发服务功能
devServer: {
// 指定托管的根目录
contentBase: './',
// 服务器的IP地址，可以使用IP也可以使用localhost
host: 'localhost',
// 使用WiFi的IP地址，方便手机可以连接进行测试
// host: '172.20.10.2',
// 配置服务器端口号
port: 3000,
// 自动打开浏览器是否开启
open: true,
// 服务器压缩是否开启
compress: true,
// 热更新第1步 是否开启
hot: true
// 仅仅热更新，无自动刷新是否开启
// hotOnly:true
}
};
这里不做解释，自己看，一直以来都是用的这个配置，直接复制到webpack.config.js中去用就行了
第五步：配置的内容都是需要安装的
1.安装loader
加载css
npm install --save-dev style-loader css-loader
加载图片
npm install --save-dev file-loader
加载less
npm install --save-dev less-loader less
加载scss
cnpm install sass-loader node-sass webpack --save-dev
这里要说一下：安装scss 的时候，最好用cnpm来装，npm 装会出错
加载图标字体
npm install --save-dev url-loader
2.安装webpack-dev-server工具，一种简单的web服务器
npm install --save-dev webpack-dev-server
3.安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
4.安装clean-webpack-plugin 清除dist文件内容
运行除了问题，还在查找原因
