Heim > Web-Frontend > js-Tutorial > Detaillierte Einführung in Webpack

Detaillierte Einführung in Webpack

零下一度
Freigeben: 2017-06-26 09:08:26
Original
1874 Leute haben es durchsucht

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
Nach dem Login kopieren
$ npm -v3.10.10
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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"
  },
Nach dem Login kopieren
  • 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
Nach dem Login kopieren

2. Konfiguration

Neue webpack.config.js

Eintrag:{
module.exports = {
Nach dem Login kopieren
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",
Nach dem Login kopieren

HtmlWebpackPlugin

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

npm install --save-dev html-webpack-plugin
Nach dem Login kopieren

    plugins:[new htmlWebpackPlugin({
            filename:&#39;index.html&#39;,
            template:&#39;index.html&#39;,
            inject:&#39;body&#39;,
            title:&#39;首页&#39;,
        }),
    ]
Nach dem Login kopieren

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/>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
unter webpack.config.js konfiguriert werden. Die Konfigurationsoptionen von Loadern umfassen die folgenden Aspekte:

modules

<br/>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • : 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/>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
  • 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
Nach dem Login kopieren

CSS, CSS-Präprozessor

Installieren Sie zuerst den Postcss-Loader und den Autoprefixer (Plug-in, das automatisch Präfixe hinzufügt)
{
                test: /\.js$/,
                loader: &#39;babel-loader&#39;,
                include: path.resolve(__dirname,&#39;src&#39;),
                exclude: path.resolve(__dirname,&#39;node_modules&#39;),
                query:{
                    presets:["es2015"]
                }
             }
Nach dem Login kopieren

npm install --save-dev style-loader css-loader
Nach dem Login kopieren
{
                 test:/\.css$/,
                 loader: [                  &#39;style-loader&#39;,
                  { loader: &#39;css-loader&#39;, options: { importLoaders: 1 } },                  &#39;postcss-loader&#39;]
             }
Nach dem Login kopieren

在完成一系列的操作后

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": ""}
Nach dem Login kopieren
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: &#39;babel-loader&#39;,
                include: path.resolve(__dirname,&#39;src&#39;),
                exclude: path.resolve(__dirname,&#39;node_modules&#39;),
                query:{
                    presets:["es2015"]
                }
             },{
                 test:/\.html/,
                 loader:'html-loader' },
             {
                 test:/\.css$/,
                 loader: [                  &#39;style-loader&#39;,
                  { loader: &#39;css-loader&#39;, options: { importLoaders: 1 } },                  &#39;postcss-loader&#39;]
             },{
                 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:&#39;index.html&#39;,
            template:&#39;index.html&#39;,
            inject:&#39;body&#39;,
            title:&#39;首页&#39;,
        }),
    ]
}
Nach dem Login kopieren
View Code

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

module.exports = {
  plugins: {&#39;autoprefixer&#39;: {},
  }
}
Nach dem Login kopieren
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>
Nach dem Login kopieren
View Code

app.js

import &#39;./css/common.css&#39;;
import Layer from &#39;./components/layer/layer.js&#39;;


const App = function(){var dom = document.getElementById(&#39;app&#39;);var lay = new Layer();
    dom.innerHTML=lay.tpl;
}new App();
Nach dem Login kopieren
View Code

layer.js

import &#39;./layer.less&#39;import tpl from &#39;./layer.html&#39;function layer(){return {
        name:&#39;layer&#39;,
        tpl: tpl
    }
}

export default layer;
Nach dem Login kopieren
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:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage