Detaillierte Einführung in Webpack

Webpack ist ein Front-End-Tool, mit dem jedes Modul geladen, vorverarbeitet und verpackt werden kann. Es verfügt über alle Grundfunktionen von Grunt oder Gulp.

Ich habe vorher gulp verwendet, um das CSS und das JS der Seite zu komprimieren, aber es ist zu trivial und mühsam, es zu importieren die Sass-Datei direkt in Sass. Fehler gemeldet (ich weiß nicht, was los ist)

Was mich am Webpack reizt: Modularität, On-Demand-Laden, CSS-Komprimierung, Inline-Stile, und unabhängige Stile. js komprimieren, Seite komprimieren

Referenzartikel: (Version 1.0)

Lernvideo: (Version 1.0)

Webpack-Version 2.0 selbst installieren (einige Dinge müssen beachtet werden)

1. Installation

Testknoten und npm installieren

1 $ node -v2 v6.11.0

$ npm -v3.10.10

Erstellen Sie einen neuen Ordner Webpack, geben Sie das Projektverzeichnis Webpack ein, installieren Sie es:

1, verwenden Sie npm init -y, um die Datei package.json zu generieren

npm init -y

2, Webpack installieren (es scheint, dass Webpack global installiert wird, Sie können Webpack zum Verpacken direkt in der Befehlszeile eingeben)

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

Die Test-Webpack-Version ist: $ webpack -v 2.6.1

Konfigurationsbefehl

Dies wird in der Datei package.json konfiguriert

"scripts": {"build": "webpack  --profile --progress --colors --display-error-details","dev": "webpack  --display-modules --profile --progress --colors --display-error-details","dev-hrm": "webpack-dev-server --config"
  },

• Farbausgabeergebnisse sind farbig, zum Beispiel: Längere Schritte werden in Rot angezeigt

• Profilausgabeleistungsdaten, Sie können den Zeitaufwand erkennen jedes Schritts

• progress gibt den aktuellen Kompilierungsfortschritt aus, dargestellt in Prozentform

• display-modules Standardmäßig die Module unter node_modules wird ausgeblendet. Durch Hinzufügen dieses Parameters können diese ausgeblendeten Module angezeigt werden

• display-error-details detaillierte Fehlerinformationen ausgeben

• webpack-dev-server aktiviert das Hot-Update

• Weitere Informationen finden Sie auf der offiziellen Website-Cli

// 开发模式npm run dev// 热更新模式npm run dev-hrm// 发布模式npm run build

2. Konfiguration

Neue webpack.config.js

Eintrag:{

module.exports = {

Haupt: "./src/app.js?1.1.11",

} ,<br/>//<br/>Die einzige Eintragsdatei, die es gab oft erwähnt

+ "/dist",filename: "js/[name].js?1.1.11",

HtmlWebpackPlugin

Hilft Ihnen, die endgültige HTML5-Datei basierend auf einer einfachen Vorlage zu generieren

npm install --save-dev html-webpack-plugin

    plugins:[new htmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            inject:'body',
            title:'首页',
        }),
    ]

Loader

Die berühmten Loader sind da!

Loader sind eine der aufregendsten Funktionen im Webpack. Durch die Verwendung verschiedener Loader kann Webpack Dateien in verschiedenen Formaten verarbeiten, indem es externe Skripte oder Tools aufruft, z. B. JSON-Dateien analysieren und in JavaScript-Dateien konvertieren oder JS-Dateien der nächsten Generation (ES6, ES7) in eine JS-Datei konvertieren, die moderne Browser verwenden erkennen kann. Mit anderen Worten: Für die React-Entwicklung können geeignete Loader die JSX-Dateien von React in JS-Dateien konvertieren.

Loader müssen separat installiert und unter dem Schlüsselwort

<br/>

unter webpack.config.js konfiguriert werden. Die Konfigurationsoptionen von Loadern umfassen die folgenden Aspekte:

modules

<br/>

• : Ein regulärer Ausdruck, der der Erweiterung der von Loadern verarbeiteten Datei entspricht (erforderlich)

  test

• : Der Name des Loaders (erforderlich)

  loader

• : Dateien (Ordner) manuell hinzufügen, die verarbeitet werden müssen, oder Dateien (Ordner) blockieren, die nicht verarbeitet werden müssen (optional);

  include/exclude: Zusätzliche Einstellungsmöglichkeiten für Loader bereitstellen (optional)

• Babelquery

  Babel ist eigentlich eine Plattform zum Kompilieren von JavaScript. Seine Leistung kann jetzt helfen Durch das Kompilieren erreichen Sie folgende Ziele:

JavaScript-Standards der nächsten Generation (ES6, ES7), die derzeit von aktuellen Browsern nicht vollständig unterstützt werden

<br/>

• Verwenden Sie Sprachen, die auf Basis von JavaScript erweitert werden, wie z. B. JSX von React

// npm一次性安装多个依赖模块，模块之间用空格隔开npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

CSS, CSS-Präprozessor

Installieren Sie zuerst den Postcss-Loader und den Autoprefixer (Plug-in, das automatisch Präfixe hinzufügt)

{
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname,'src'),
                exclude: path.resolve(__dirname,'node_modules'),
                query:{
                    presets:["es2015"]
                }
             }

npm install --save-dev style-loader css-loader

{
                 test:/\.css$/,
                 loader: [                  'style-loader',
                  { loader: 'css-loader', options: { importLoaders: 1 } },                  'postcss-loader']
             }

在完成一系列的操作后

package.json:

{  "name": "webpack",  "version": "1.0.0",  "main": "index.js?1.1.11",  "scripts": {"test": "echo \"Error: no test specified\" && exit 1","webpack": "webpack --config webpack.config.js --progress --display-module --colors"
  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {"autoprefixer": "^7.1.1","babel-core": "^6.25.0","babel-loader": "^7.0.0","babel-preset-es2015": "^6.24.1","babel-preset-latest": "^6.24.1","babel-preset-react": "^6.24.1","css-loader": "^0.28.4","file-loader": "^0.11.2","html-loader": "^0.4.5","html-minify-loader": "^1.1.0","html-webpack-plugin": "^2.28.0","image-webpack-loader": "^3.3.1","less": "^2.7.2","less-loader": "^4.0.4","postcss-loader": "^2.0.5","style-loader": "^0.18.2","url-loader": "^0.5.9","webpack": "^2.6.1"
  },  "dependencies": {"acorn": "^5.0.3","acorn-dynamic-import": "^2.0.2","ajv": "^4.11.8","anymatch": "^1.3.0","align-text": "^0.1.4","arr-diff": "^2.0.0","arr-flatten": "^1.0.3","array-unique": "^0.2.1","arrify": "^1.0.1","asn1.js?1.1.11": "^4.9.1","async": "^2.4.1","async-each": "^1.0.1","balanced-match": "^1.0.0","base64-js": "^1.2.0","binary-extensions": "^1.8.0","bn.js?1.1.11": "^4.11.6","brace-expansion": "^1.1.8","braces": "^1.8.5","brorand": "^1.1.0","browserify-aes": "^1.0.6","browserify-cipher": "^1.0.0","browserify-des": "^1.0.0","browserify-sign": "^4.0.4","browserify-zlib": "^0.1.4","buffer": "^4.9.1","buffer-xor": "^1.0.3","builtin-modules": "^1.1.1","builtin-status-codes": "^3.0.0","camelcase": "^3.0.0","center-align": "^0.1.3","chokidar": "^1.7.0","cipher-base": "^1.0.3","co": "^4.6.0","cliui": "^3.2.0","browserify-rsa": "^4.0.1","code-point-at": "^1.1.0","assert": "^1.4.1","concat-map": "^0.0.1","console-browserify": "^1.1.0","constants-browserify": "^1.0.0","create-hmac": "^1.1.6","create-ecdh": "^4.0.0","crypto-browserify": "^3.11.0","create-hash": "^1.1.3","date-now": "^0.1.4","decamelize": "^1.2.0","des.js?1.1.11": "^1.0.0","diffie-hellman": "^5.0.2","domain-browser": "^1.1.7","elliptic": "^6.4.0","enhanced-resolve": "^3.1.0","errno": "^0.1.4","events": "^1.1.1","error-ex": "^1.3.1","expand-brackets": "^0.1.5","expand-range": "^1.8.2","extglob": "^0.3.2","filename-regex": "^2.0.1","fill-range": "^2.2.3","find-up": "^1.1.2","for-own": "^0.1.5","evp_bytestokey": "^1.0.0","get-caller-file": "^1.0.2","fsevents": "^1.1.1","glob-base": "^0.3.0","for-in": "^1.0.2","glob-parent": "^2.0.0","graceful-fs": "^4.1.11","has-flag": "^1.0.0","hash.js?1.1.11": "^1.0.3","hash-base": "^2.0.2","hmac-drbg": "^1.0.1","hosted-git-info": "^2.4.2","html-webpack-plugin": "^2.28.0","https-browserify": "^0.0.1","ieee754": "^1.1.8","ajv-keywords": "^1.5.1","indexof": "^0.0.1","invert-kv": "^1.0.0","interpret": "^1.0.3","is-arrayish": "^0.2.1","is-binary-path": "^1.0.1","is-buffer": "^1.1.5","is-dotfile": "^1.0.3","is-builtin-module": "^1.0.0","is-equal-shallow": "^0.1.3","is-extendable": "^0.1.1","is-extglob": "^1.0.0","is-fullwidth-code-point": "^1.0.0","is-glob": "^2.0.1","is-number": "^3.0.0","is-posix-bracket": "^0.1.1","is-primitive": "^2.0.0","is-utf8": "^0.2.1","json-loader": "^0.5.4","json-stable-stringify": "^1.0.1","jsonify": "^0.0.0","kind-of": "^4.0.0","isobject": "^2.1.0","lazy-cache": "^1.0.4","lcid": "^1.0.0","load-json-file": "^1.1.0","loader-runner": "^2.3.0","longest": "^1.0.1","micromatch": "^2.3.11","memory-fs": "^0.4.1","minimalistic-assert": "^1.0.0","miller-rabin": "^4.0.0","minimalistic-crypto-utils": "^1.0.1","minimatch": "^3.0.4","mkdirp": "^0.5.1","minimist": "^0.0.8","node-libs-browser": "^2.0.0","normalize-path": "^2.1.1","object.omit": "^2.0.1","number-is-nan": "^1.0.1","os-browserify": "^0.2.1","os-locale": "^1.4.0","normalize-package-data": "^2.3.8","pako": "^0.2.9","parse-asn1": "^5.1.0","parse-glob": "^3.0.4","parse-json": "^2.2.0","path-browserify": "^0.0.0","path-exists": "^2.1.0","path-type": "^1.1.0","pbkdf2": "^3.0.12","pify": "^2.3.0","path-is-absolute": "^1.0.1","pinkie": "^2.0.4","pinkie-promise": "^2.0.1","preserve": "^0.2.0","process": "^0.11.10","process-nextick-args": "^1.0.7","prr": "^0.0.0","public-encrypt": "^4.0.0","punycode": "^1.4.1","querystring": "^0.2.0","querystring-es3": "^0.2.1","randomatic": "^1.1.7","randombytes": "^2.0.5","read-pkg": "^1.1.0","read-pkg-up": "^1.0.1","readdirp": "^2.1.0","regex-cache": "^0.4.3","repeat-element": "^1.1.2","repeat-string": "^1.6.1","require-directory": "^2.1.1","right-align": "^0.1.3","require-main-filename": "^1.0.1","remove-trailing-separator": "^1.0.2","safe-buffer": "^5.1.0","ripemd160": "^2.0.1","semver": "^5.3.0","set-immediate-shim": "^1.0.1","set-blocking": "^2.0.0","setimmediate": "^1.0.5","sha.js?1.1.11": "^2.4.8","source-list-map": "^1.1.2","spdx-correct": "^1.0.2","spdx-license-ids": "^1.2.2","stream-browserify": "^2.0.1","spdx-expression-parse": "^1.0.4","stream-http": "^2.7.1","string-width": "^1.0.2","strip-bom": "^2.0.0","supports-color": "^3.2.3","timers-browserify": "^2.0.2","tapable": "^0.2.6","to-arraybuffer": "^1.0.1","tty-browserify": "^0.0.0","uglify-to-browserify": "^1.0.2","util": "^0.10.3","url": "^0.11.0","validate-npm-package-license": "^3.0.1","util-deprecate": "^1.0.2","vm-browserify": "^0.0.4","watchpack": "^1.3.1","webpack-sources": "^0.2.3","webpack": "^2.6.1","which-module": "^1.0.0","window-size": "^0.1.0","wordwrap": "^0.0.2","wrap-ansi": "^2.1.0","xtend": "^4.0.1","y18n": "^3.2.1","yargs": "^6.6.0","yargs-parser": "^4.2.1"
  },  "description": ""}

View Code

webpack.config.js

var htmlWebpackPlugin =  require('html-webpack-plugin');var path = require('path');

module.exports = {
    entry:{
        main:"./src/app.js?1.1.11",
    } ,
    output:{
        path:__dirname+'/dist',
        filename:'js/[name].bundle.js',//publicPath:'http://hotdeals.com/'    },
    module:{
        loaders:[
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname,'src'),
                exclude: path.resolve(__dirname,'node_modules'),
                query:{
                    presets:["es2015"]
                }
             },{
                 test:/\.html/,
                 loader:'html-loader' },
             {
                 test:/\.css$/,
                 loader: [                  'style-loader',
                  { loader: 'css-loader', options: { importLoaders: 1 } },                  'postcss-loader']
             },{
                 test:/\.less$/,
                 loader:'style-loader!css-loader!postcss-loader!less-loader' },
             {
                 test:/\.(jpe?g|png|gif|svg)$/i,
                 loaders:[                     'file-loader?limit=200&name=assets/[name]-[hash:5].[ext]',
                     {
                        loader: 'image-webpack-loader',
                        query: {
                          progressive: true,
                          optimizationLevel: 7,
                          interlaced: false,
                          pngquant: {
                            quality: '65-90',
                            speed: 4  }
                        }
                    }
                 ],
             },
        ]

    },

    plugins:[new htmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            inject:'body',
            title:'首页',
        }),
    ]
}

View Code

postcss.config.js(webpack2.0使用css添加前缀，看官网更好)

module.exports = {
  plugins: {'autoprefixer': {},
  }
}

View Code

项目文件:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <img src="src/assets/songzhixiao.jpeg" alt="">
    <div id="app"></div>
    <!-- 我是一行注释 -->
</body>
</html>

View Code

app.js

import './css/common.css';
import Layer from './components/layer/layer.js';


const App = function(){var dom = document.getElementById('app');var lay = new Layer();
    dom.innerHTML=lay.tpl;
}new App();

View Code

layer.js

import './layer.less'import tpl from './layer.html'function layer(){return {
        name:'layer',
        tpl: tpl
    }
}

export default layer;

View Code

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

web webpack 学习 菜鸟

Quelle：php.cn

Vorheriger Artikel：Basierend auf es6: Idee der asynchronen Prozesssteuerung Nächster Artikel：Zusammenfassung der Einführung in Array-Objekte in JavaScript

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Beispiel-Tutorial zur Übergabe von Parametern mithilfe der NameValuePair-Methode
  1970-01-01 08:00:00
• Verwenden Sie dom4j, um ein Beispiel für ein XML-Dokument zu analysieren
  1970-01-01 08:00:00
• Katalogdienst – Analyse des Beispielcodes für die Microsoft-Microservice-Architektur
  1970-01-01 08:00:00
• Ausführliche Erläuterung der ersten Schritte mit Beispielen für .net Elasticsearch
  1970-01-01 08:00:00
• Detaillierte Einführung in Spring Boot mit Konfigurationsbeispielen für die JSP-Unterstützung
  1970-01-01 08:00:00
• Wie erkennt JS, ob das von window.open geöffnete Fenster geschlossen ist?
  1970-01-01 08:00:00
• Teilen Sie ein verstümmeltes Problem in sqlyog beim Herstellen einer Verbindung zur Datenbank und dessen Lösung
  1970-01-01 08:00:00
• Beispiele für die Verwendung von Parametern variabler Länge in Java
  1970-01-01 08:00:00
• Das neueste Beispiel-Tutorial für die Amap API WEB-Entwicklung
  1970-01-01 08:00:00
• Vor- und Nachteile von AJAX
  1970-01-01 08:00:00

Aktuelle Ausgaben

Beim Importieren des Javascript-Prototypkonstruktors in die Angular-Anwendung wird ein Fehler ausgegeben Ich habe eine Angular-Anwendung, in der ich versuche, eine JS-Datei zu importieren, die üb...

Aus 2024-04-04 11:36:15

0

1

288

verwandte Themen

Mehr>

• So beginnen Sie mit dem Kauf von Kryptowährungen
• Was ist ECharts?
• Darstellungsmethode der String-Konstante
• Verwendung von Oracle-Einsätzen
• Ist Java Front-End oder Back-End?
• Was sind die Unterschiede zwischen Weblogic und Tomcat?
• So öffnen Sie JAR-Dateien
• Linux-Switch-Benutzerbefehl