第一步：新建項目文件夾，在項目文件夾下新建src文件夾：
image.png
vscode控制臺進(jìn)行操作：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
初始化后的文件是這個樣子，現(xiàn)在要進(jìn)行一些編輯
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-開發(fā)模式 production-生產(chǎn)模式
mode: 'development',
// mode: 'production',
entry: {
index: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 所有webpack 插件的配置節(jié)點(diǎn)
plugins: [
// 熱更新 第3步
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
// 2. 指定模板文件路徑 掛載一個 plugins 節(jié)點(diǎn)
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 開發(fā)服務(wù)功能
devServer: {
// 指定托管的根目錄
contentBase: './',
// 服務(wù)器的IP地址，可以使用IP也可以使用localhost
host: 'localhost',
// 使用WiFi的IP地址，方便手機(jī)可以連接進(jìn)行測試
// host: '172.20.10.2',
// 配置服務(wù)器端口號
port: 3000,
// 自動打開瀏覽器是否開啟
open: true,
// 服務(wù)器壓縮是否開啟
compress: true,
// 熱更新第1步 是否開啟
hot: true
// 僅僅熱更新，無自動刷新是否開啟
// hotOnly:true
}
};
這里不做解釋，自己看，一直以來都是用的這個配置，直接復(fù)制到webpack.config.js中去用就行了
第五步：配置的內(nèi)容都是需要安裝的
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 裝會出錯
加載圖標(biāo)字體
npm install --save-dev url-loader
2.安裝webpack-dev-server工具，一種簡單的web服務(wù)器
npm install --save-dev webpack-dev-server
3.安裝html-webpack-plugin
npm install --save-dev html-webpack-plugin
4.安裝clean-webpack-plugin 清除dist文件內(nèi)容
運(yùn)行除了問題，還在查找原因
