Introduction détaillée au webpack

Webpack est un outil frontal qui permet de charger, prétraiter et empaqueter chaque module. Il possède toutes les fonctions de base de Grunt ou de Gulp.

J'ai déjà utilisé gulp pour empaqueter et compresser les css et js de la page. La configuration est simple, mais elle est trop triviale et gênante. Lors de l'utilisation de sass, il est facile d'importer. le fichier sass directement dans sass. Erreur signalée (je ne sais pas ce qui se passe)

Ce qui m'attire dans webpack : modularité, chargement à la demande, compression css, styles en ligne, et styles indépendants. Compresser js, compresser la page

Article de référence : (version 1.0)

Vidéo d'apprentissage : (version 1.0)

Installez vous-même la version 2.0 du webpack (certaines choses nécessitent une attention particulière)

1 Installation

Installez le nœud de test et npm

1 $ node -v2 v6.11.0

$ npm -v3.10.10

Créez un nouveau dossier webpack, entrez dans le répertoire du projet webpack, installez-le :

1, utilisez npm init -y pour générer le fichier package.json

npm init -y

2, installez webpack (il semble installer webpack globalement, vous pouvez directement saisir webpack sur la ligne de commande pour l'empaquetage)

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

La version de test du webpack est : $ webpack -v 2.6.1

Commande de configuration

Ceci est configuré dans le fichier package.json

"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"
  },

• les résultats de sortie en couleur sont colorés, par exemple : les étapes plus longues seront affichées en rouge

• données de performances de sortie du profil, vous pouvez voir le temps de chacune step

• progress affiche la progression actuelle de la compilation, présentée sous forme de pourcentage

• display-modules Par défaut, les modules sous node_modules seront caché. L'ajout de ce paramètre peut afficher ces modules cachés

• display-error-details affiche des informations d'erreur détaillées

• webpack-dev-server activera. mise à jour chaude

• Pour plus d'informations, veuillez vous référer au site officiel cli

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

2. Configuration

Nouveau webpack.config.js

module.exports = {

entrée :{

Principal : "./src/app.js?1.1.11",<br/> } ,<br/>//Le seul fichier d'entrée qui a été mentionné à plusieurs reprises fois

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

HtmlWebpackPlugin

Vous aide à générer le fichier Html5 final basé sur un modèle simple

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

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

Loaders

Les fameux Loaders sont là !

Les chargeurs sont l'une des fonctionnalités les plus intéressantes de Webpack. En utilisant différents chargeurs, Webpack peut traiter des fichiers dans différents formats en appelant des scripts ou des outils externes, tels que l'analyse de fichiers JSON et leur conversion en fichiers JavaScript, ou la conversion de fichiers JS de nouvelle génération (ES6, ES7) en un fichier JS compatible avec les navigateurs modernes. peut reconnaître. En d'autres termes, pour le développement de React, les chargeurs appropriés peuvent convertir les fichiers JSX de React en fichiers JS.

<br/>

Les chargeurs doivent être installés séparément et configurés sous le mot-clé

sous webpack.config.js. Les options de configuration des chargeurs incluent les aspects suivants : modules

<br/>

<. 🎜>

• : Une expression régulière correspondant à l'extension du fichier traité par les chargeurs (obligatoire)

  test

• : Le nom du chargeur (obligatoire)

  loader

•  : Ajoutez manuellement des fichiers (dossiers) qui doivent être traités ou bloquez des fichiers (dossiers) qui n'ont pas besoin d'être traités (facultatif) ;

  include/exclude : Fournir des options de configuration supplémentaires pour les chargeurs (facultatif)

• Babelquery

  Babel est en fait une plateforme de compilation de JavaScript. Sa puissance et ses performances peuvent désormais aider. vous atteignez les objectifs suivants en compilant :

Les normes JavaScript de nouvelle génération (ES6, ES7), qui ne sont actuellement pas entièrement implémentées par le support des navigateurs actuels

<🎜 ; >

<br/>

Utilisez des langages étendus basés sur JavaScript, tels que JSX de React

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

CSS, préprocesseur CSS

Installez d'abord postcss-loader et autoprefixer (plug-in qui ajoute automatiquement des préfixes)

{
                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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

web webpack 学习 菜鸟

source：php.cn

Article précédent：Basé sur es6 : idée de contrôle de processus asynchrone Article suivant：Résumé de l'introduction aux objets tableau en JavaScript

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

• Exemple de didacticiel sur la transmission de paramètres à l'aide de la méthode NameValuePair
  1970-01-01 08:00:00
• Utilisez dom4j pour analyser un exemple de document XML
  1970-01-01 08:00:00
• Service de catalogue - Analyse de l'exemple de code de l'architecture de microservice Microsoft
  1970-01-01 08:00:00
• Explication détaillée pour démarrer avec les exemples .net Elasticsearch
  1970-01-01 08:00:00
• Introduction détaillée à Spring Boot en ajoutant des exemples de configuration de support jsp
  1970-01-01 08:00:00
• Comment JS détecte-t-il si la fenêtre ouverte par window.open est fermée ?
  1970-01-01 08:00:00
• Partager un problème tronqué dans SQLyog se connectant à la base de données et sa solution
  1970-01-01 08:00:00
• Exemples d'utilisation de paramètres de longueur variable en Java
  1970-01-01 08:00:00
• Le dernier tutoriel d'exemple de développement WEB de l'API Amap
  1970-01-01 08:00:00
• Avantages et inconvénients d'AJAX
  1970-01-01 08:00:00

Derniers numéros

Une erreur est générée lors de l'importation du constructeur de prototype Javascript dans une application angulaire J'ai une application Angular dans laquelle j'essaie d'importer un fichier JS doté d'un con...

Depuis 2024-04-04 11:36:15

0

1

288

Rubriques connexes

Plus>

• Qu'est-ce qu'Avalanche
• Comment cracker le cryptage d'un fichier zip
• bootmgr est manquant et ne peut pas démarrer
• Méthodes de réparation des vulnérabilités des bases de données
• Comment utiliser l'annotation notnull
• Pourquoi l'ordinateur continue de redémarrer automatiquement
• Comment regarder les enregistrements de diffusion en direct sur Douyin
• À quelle marque appartient le téléphone mobile OnePlus ?