Gemeinsame Nutzung der Grundkonfiguration von Vue+Webpack

Ich lerne kürzlich Webpack und habe den Kurs zum Erstellen einer Single-Page-Anwendung besucht. Ich werde ihn hier aufzeichnen. In diesem Teil geht es hauptsächlich um die Konfiguration der Webpack-Umgebung und die Konfiguration des Webpack-Entwicklers. Die Aufzeichnung ist grob und wird später aktualisiert. Dieser Artikel stellt Ihnen hauptsächlich das grundlegende Konfigurations-Tutorial des Vue + Webpack-Projekts vor. Freunde, die es benötigen, können darauf zurückgreifen.

1. Entwicklungsumgebung: vscode, node.js, vue.js, webpack

Wenn Sie node.js selbst installieren möchten, können Sie sich an den Anfänger wenden Tutorial

Die verwendete IDE ist VScode

2. Projektinitialisierung

Tastenkombination Strg+` Öffnen Sie die vscode-Konsole

vscode-Schnittstelle

2.1 Webpack vue vue-loader installieren

npm init
npm i webpack vue vue-loader

npm warnt Sie, dass Sie Abhängigkeiten benötigen, Befolgen Sie die Anweisungen zur Installation 🎜>2.2 Konfigurieren Sie das Webpack. Laden Sie die Datei app.vue

Erstellen Sie zunächst den Ordner src und erstellen Sie darunter app.vue als Hauptcodedatei und index.js als Eintragsdatei.

Basisdatei

Der Inhalt der app.vue-Datei ist wie folgt:

npm i css-loader vue-template-compiler

Erstellen Sie die Datei webpack.config.js im Verzeichnis derselben Ebene wie src

, konfigurieren Sie den Eintrag und geben Sie die Ausgabe aus

Erstellen Sie die package.json-Datei und die webpack.config.js-Datei

<template>
 <p id="text">{{text}}</p>
</template>
<script>
 export default{
 data(){
  return {
  text: &#39;abc&#39;
  }
 }
 }
</script>
<style>
 #test{
 color: red;
 }
</style>

index.js-Datei als Eintrag

Konfiguration Fügen Sie zum Befehl „scripts“ in der Datei „package.json“ den Befehl „npm run build“ hinzu auf der Konsole zum Verpacken, wie in der Abbildung gezeigt

Nach Abschluss der Webpack-Verpackung

//webpack.config.js
const path = require('path')
module.exports = {
 entry: path.join(__dirname,'src/index.js'), //调用Index.js作为入口文件
 output: { //打包完的js文件会在bundle.js中，这个文件待会会自动生成的
 filename: 'bundle.js', 
 path: path.join(__dirname,'dist') //用来存放bundle.js文件的地址，自己定义
 },
 module: {
 rules: [{
  test: /.vue$/,
  loader: 'vue-loader'
 }]
 }
}

2.3 Webpack zum Laden von Nicht-Js-Dateien konfigurieren

Die spezifische Konfiguration der Datei webpack.config.js

Fügen Sie im Webpack Regeln hinzu:[] zum Modul: {}-Modul in .config.js, um die Dateitypen festzulegen, die das Webpack benötigt Erkennen Der Vue-Dateityp wurde bereits festgelegt, daher müssen Sie CSS/Bilder hinzufügen.

//index.js
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('p')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

Führen Sie den Befehl auf der Konsole aus und installieren Sie den entsprechenden Loader

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "build": "webpack --config webpack.config.js"
 },

Testen Sie nicht- js-Typen Dateiverpackungseffekt

Ziel: Importieren Sie den Inhalt dieser Nicht-js-Typdateien in js-Code

Erstellen Sie die Testdatei test.css im src-Unterverzeichnis. Und fügen Sie stattdessen JPG-Bilder in Bilder ein (eins ist genug, emmm, ich habe zu viele eingefügt, damit ich sie noch nicht lösche)

Dateistruktur unter src

Importieren Sie diese Nicht-JS-Dateien in Index.js.

//webpack.config.js 
module: {
 rules: [
 {
 test: /.vue$/,
 loader: 'vue-loader'
 },
 {
 test: /.css$/,
 use:[
 'style-loader',
 'css-loader'
 ]
 },
 {
 test: /\.(gif|jpg|png|svg)$/,
 use: [{
  loader: 'url-loader',
  options: {
  limit: 1024,
  name:'[name].[ext]'
  }
 }]
 }
] 
}

Führen Sie abschließend

auf der Konsole aus, um die Ergebnisse zu testen.

npm i style-loader css-loader url-loader file-loader

Das Bild einer erfolgreichen Verpackung ähnelt dem oben.

2.4 Über den CSS-Präprozessor. Konfiguration und Test des Stifts

Stylus ist ein Präprozessor für CSS und der Dateityp ist .styl. Wir konfigurieren ihn hier

Legen Sie zunächst die Regeln in der Datei webpack.config.js fest: [] Das Modul ist das gleiche wie oben. Fügen Sie den folgenden Code hinzu, damit es die .styl-Datei

erkennen kann, und installieren Sie dann die für den Stift erforderliche Loader-Datei in der Konsole

//index.js
import Vue from 'vue'
import App from './app.vue'
import './assets/styles/test.css' //import css文件
import './assets/images/0.jpg' //import 图片
const root = document.createElement('p')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

npm run build Führen Sie abschließend

auf der Konsole aus, um die Ergebnisse zu testen.

2.5 Konfigurieren Sie den Webpack-Dev-Server: Wird speziell für die Verpackung in der Entwicklungsumgebung verwendet

Da sich die formale Umgebung von unserer Entwicklungsumgebung unterscheidet, muss dev zur Unterscheidung konfiguriert werden

Installieren Sie zunächst webpack-dev-server

//webpack.config.js
  {
  test:/.styl$/,
  use: [
   'style-loader',
   'css-loader',
   'stylus-loader'
  ]
  }

Ändern Sie dann die Datei package.json und fügen Sie unter Build die Entwicklungskonfiguration hinzu

npm i style-loader stylus-loader

package.json-Dateikonfiguration

npm run build Ändern Sie dann webpack.config.js

und fügen Sie target:'web' global hinzu

config.js

Da diese Datei sowohl in der Entwicklungsumgebung als auch in der formalen Umgebung verwendet wird, muss eine Umgebungsbeurteilung hinzugefügt und Variablen zur Identifizierung hinzugefügt werden Verschiedene Umgebungen beim Ausführen von npm.

npm i webpack-dev-server

因为在windows和mac环境下的命令会不同，这里安装cross-env 包，使得在不同开发环境下命令相同。

npm i cross-env

再次修改package.json文件,在“build:”和“dev:"行添加dev命令

cross-env NODE_ENV=development 后面不变

package.json文件build

然后，在webpack.config.js文件中进行判断。

首先，配置config.devServer

webpack2之后就可以直接用config.devServer进行配置了。

更改文件头部几行代码

在文件的最后加上如下代码

config.devServer

注意：
host:'0.0.0.0'不要直接写localhost，这样别人的电脑就访问不了了；port不要被占用，不然会打不开

最后.安装html-webpack-plugin插件使得html可以作为入口，自动包含JS

npm i html-webpack-plugin

修改webpack.config.js文件

config.js

config.js

至此，dev配置基本完成

控制台执行 npm run dev

npm run dev

打包成功的话就可以在浏览器中查看效果了，

如果出现错误，根据提示修改，注意端口是否占用。我的8000端口占用了，后来用了8080端口就好了

浏览器访问：localhost:8080,可以查看渲染效果。恩，背景图0.jpg是我爱豆23333。笔芯。注意左上角有红色的abc。

浏览器效果

2.6最后还有一些东西要加在config.js中

最后还要加一些东西

1） historyFallback:{}

因为我们做的是单页应用，所以要加一下地址映射到入口index.html，这个先忽略

2） 热加载功能。

hot功能，可以实现局部渲染：比如你改了一个组件的代码，页面只重新渲染这个组件而不是整个页面进行渲染，不需要进行刷新操作。

3） 一些插件

webpack.HotModuleReplacementPlugin()启动hot功能

webpack.NoEmitOnErrorsPlugin()去除一些不必要的信息

4） 浏览器调试代码功能的工具

在浏览器中调试的时候，代码不会转码。

config.devtool = “#cheap-module-evel-source-map”

最后配置完成后，重新npm run dev一次

npm run dev

成功之后，可以在浏览器中测试热加载效果，修改app.vue文件中的text的内容，就可以看到左上角那个红色的字在变了emmmm

//app.vue
<template>
 <p id="text">{{text}}</p>
</template>
<script>
 export default{
 data(){
  return {
  text: &#39;abc&#39; //打开浏览器，然后直接改这里就可以实时看到文字变化效果了。
  }
 }
 }
</script>
<style>
 #test{
 color: red;
 }
</style>

相关推荐：

实例详解vue-cli中的webpack配置

webpack配置方法小结

实例详解vue-cli优化的webpack配置

Das obige ist der detaillierte Inhalt vonGemeinsame Nutzung der Grundkonfiguration von Vue+Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!