Erstellen Sie die Projektverzeichnisdatei webpackProject
Klicken Sie mit der rechten Maustaste auf den Desktop, um einen neuen webpackProject-Ordner zu erstellen
Die Verzeichnisgenerierung des Initialisierungsprojekts --pagege.json ist der einzelne Datensatz mit Abhängigkeiten, Startbefehl, Versionsinformationen und Paketmanager
Befehl npm init -y
Installieren Sie die Webpack-CLI
Verwenden Sie npm install --save-dev webpack-cli
Webpaket installieren
Befehl npm i webpack -D
Ergänzung zu -g -S -D
npm i xx -g: Abkürzung für npm install xx --global, um Module global zu installieren.
Die sogenannte globale Installation bezieht sich auf die Installation des Moduls auf dem Betriebssystem und die globale bezieht sich auf das Betriebssystem.Nach Abschluss der globalen Installation wird es in der Regel im Verzeichnis AppDataAppData\Roaming\npm installiert.
Beispielsweise bedeutet npm install webpack -g, webpack global zu installieren, und die von webpack bereitgestellten Anweisungen können in jedem Verzeichnis des Betriebssystems verwendet werden.npm i xx -D: Abkürzung für npm install xx --save-dev, installiert das Modul lokal und schreibt das Modul in das devDependencies-Objekt.
Lokal bedeutet nur für das aktuelle Projekt, und Module werden im Allgemeinen im Ordner node_modules unter dem Projektordner installiert.
Das devDependencies-Objekt besteht aus einigen Paketen, die wir während der Entwicklung verwenden müssen. Es wird nur in der Entwicklungsphase verwendet. Diese Pakete werden nicht benötigt, wenn das Paket tatsächlich gestartet wird,
da diese Tools nur von Ihnen verwendet werden, um den Code zu packen. Sie werden verwendet Wird verwendet, um bestimmte Dateien und Codes zu identifizieren, die uns bei der Erstellung der endgültigen Datei helfen. Beispielsweise soll npm i vue-loader
vue-template-complier -D das Parsing-Plugin für vue-Template-Dateien im Vue-Projekt installieren Nach der Konfiguration kann das vue-Template im Projekt geparst werden.npm i xx -S: Abkürzung für npm install xx --save, das gleiche wie oben ist auch eine Teilinstallation des Moduls, der Unterschied ist, dass das Modul in das Abhängigkeitsobjekt geschrieben wird.
Die Module werden wie oben im Ordner node_modules unter dem Projektordner installiert.
Das Abhängigkeitsobjekt, das sich von devDependencies unterscheidet, muss für die Produktionsumgebung freigegeben werden. Wenn Sie beispielsweise ein vue-basiertes Projekt ausführen möchten,
benötigen Sie vue.js, um es zu unterstützen, und die Datei vue.js muss dies tun Verfolgen Sie das Projekt bis zur endgültigen Produktionsumgebung. npm i vue -S kann das Vue-Modul in die Abhängigkeiten des Projekts installieren
und es zusammen in der Produktionsumgebung veröffentlichen.
Erstellen Sie eine webpack.config.js-Datei im Stammverzeichnis
// 导入核心模块 path
const path = require('path')
// 导入自动生成html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入自动清除 dist 目录的插件
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin')
// 配置文件
module.exports = {
// 配置入口
entry: './src/main.js',
// webpack.config.js 文件 配置出口
output: {
filename: 'main[hash:8].js', // 出口文件的名称 'main[hash:8].js' 清除缓存
path: path.join(__dirname, '/dist') // 出口文件生成的路径
},
// 配置 mode, development 开发环境 production 生产环境
mode: 'production',
// 配置解析
resolve: {
alias: {
// key: value
'@': path.join(__dirname, 'src')
},
// 配置可省略的后缀
extensions: ['.js', '.css', '.less', '.vue']
},
// 配置源码映射
// devtool: 'source-map',
// 配置 loader
module: {
// 配置规则
rules: []
},
// 配置 plugin
plugins: [
// 自动生成html文件的插件
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, './public/index.html')
}),
// 自动清除 dist 目录插件
new CleanWebpackPlugin(),
// 配置 vue loader 插件
],
// 配置开启服务器的信息
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 80,
},
performance: {
hints: false
}
}
Erstellen Sie die entsprechende Datei gemäß der obigen Konfiguration.Wenn keine Datei vorhanden ist, wird ein Fehler gemeldet.
Installieren Sie das Plugin html-webpack-plugin clean-webpack-plugin
Weil es in webpack.config.js nützlich ist
npm i -D html-webpack-plugin sauberes-webpack-plugin
Konfigurieren Sie unsere Eingabedatei
Erstellen Sie einen neuen src-Ordner im Stammverzeichnis, erstellen Sie darin eine neue main.js-Datei, schreiben Sie den js-Code und packen Sie dann und reduzieren Sie die Anzahl der Benutzer
打包前
function fn() {
console.log('孙志豪')
}
fn()
打包后 会多一个 dist 文件 把 function 去掉了
console.log('孙志豪')
Erstellen Sie im Stammverzeichnis einen neuen öffentlichen Ordner
Geben Sie eine neue index.html ein ! Geben Sie sie ein, um sie zu initialisieren.
Schreiben Sie ein div als id="#app"
Suchen Sie die Datei „package.json“, um den Paketierungsbefehl zu konfigurieren
"scripts": {
"build": "webpack --config webpack.config.js"
},
Führen Sie dann den gepackten Befehl aus
npm-Run-Build
Es wird einen zusätzlichen Ordner namens dist geben
Startserver server einstellen
Installieren Sie den von Server gestarteten Server
npm i webpack-dev-server -D
Suchen Sie die Datei „package.json“, um den Startdienst zu konfigurieren
"scripts": {
"build": "webpack --config webpack.config.js",
"serve": "webpack serve"
},
Konfigurieren Sie die Informationen zum Starten des Servers in webpack.config.js
devServer: {
static: {
directory: path.join(__dirname, 'dist'), // 出口写什么这里就写什么
},
port: 8080, // 配置端口号
open: true, // 自动打开浏览器
hot:true, // 开启模块的热更新
},
Dienst ausführen
npm laufen dienen
Lader installieren
webpack css style führt Fehler und scss-Syntaxfehler ein
Vor diesen Operationen müssen Sie den Befehl „style-loader“, „css-loader“, „sass-loader“
npm i css-loader style-loader sass sass-loader -D installieren
1、在src，目录下新建一个你的css文件
2、 安装完成 在 webpack.config.js 找到 rules 配置 css loader
// 配置规则
rules: [
// * 解析css loader
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
// * 解析Scss样式 注意： 配置的顺序是反着来的 从大到小 从右到左
{
test: /\.s[ca]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
]
Schriftbilder oder andere Ressourcen URL-Loader File-Loader URL-Loader hängt vom File-Loader ab
命令 npm i url-loader file-loader -D
安装完成 在 webpack.config.js 找到 rules 配置
rules: [
// * 解析图片 的 loader
{
test: /\.(png|jpg|gif|svg|webp|jpeg)$/,
use: "url-loader"
},
]
Installieren Sie babel-loader, damit es6-Code von Browsern erkannt wird
命令 npm install -D babel-loader @babel/core @babel/preset-env
rules: [
// * 解析es6语法 转换 es5
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
]
Offizielle Website: https://www.webpackjs.com/loaders/babel-loader/
Diese Installation von vue-loader ist die Version vue3.0
Offizielle Website https://vue-loader.vuejs.org/zh/
Befehl npm i vue
Befehl npm install -D vue-loader vue-template-compiler
Einführung des vue-Plugins
// webpack.config.js 文件
const {
VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
// * vue配置loader
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
Schreiben Sie nach der Konfiguration den Konfigurationsmount in main.js
import {
createApp
} from 'vue'
import App from './App.vue'// 创建app.vue 入口组件
createApp(App).mount('#app')
Installieren Sie die vue-Versionskonfiguration von vue 2.0 und die Lösung für den Fehler
vue-loader darf nicht 16 oder höher sein
vue-version ist 2.6.1 muss mit vue-template-compiler 2.6.1 konsistent sein
Befehl npm i [email protected] [email protected] -D
Befehl npm i [email protected]
Einführung des vue-Plugins
// webpack.config.js 文件
const {
VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
// * vue配置loader
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
Suchen Sie die min.js-Dateikonfiguration
import Vue from "vue";
import App from "./App.vue";
new Vue({
render: (h) => h(App),
}).$mount("#app");
App.vue-Datei erstellen und Code schreiben, Junge