Web-Beispielcode zum Erstellen von Front-End-Projekten mit Webpack

Die beliebtesten sind heutzutage Webpack und Gulp. In diesem Artikel besprechen wir hauptsächlich die Verwendung von Webpack zum Erstellen von Front-End-Projekten im Web . Ich denke, es ist ziemlich gut. Teilen Sie es jetzt mit allen und geben Sie jedem eine Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Apropos Webpack: Front-End-Studenten müssen damit vertraut sein. Als wir zuvor Gulp zum Erstellen verwendeten, verwendeten wir tatsächlich auch die Verpackungstechnologie von Webpack. Tatsächlich ersetzen Gulp und Webpack einander nicht, sondern ergänzen sich. Heute werden wir einen genaueren Blick auf die Magie von Webpack werfen.

Wenn wir eine neue Technologie lernen, müssen wir zuerst damit beginnen Die offizielle Dokumentation ist natürlich sehr gut geschrieben und erklärt Schritt für Schritt. Sie können die offizielle Dokumentation direkt lesen -Handinformationen im Blog, die offizielle Tutorial-Dokumentation ist definitiv eine bessere Wahl für Sie

In diesem Artikel geht es nicht darum, Ihnen das Kopieren offizieller Dokumente beizubringen. Das Lesen dieses Artikels reicht aus, aber es ermöglicht Ihnen Um schnell loszulegen und das sogenannte Webpack zu spüren, müssen Sie sich nur eine zentrale Idee merken, genau wie das obige Diagramm: Es packt und komprimiert die gesamte komplexe Dateilogik in mehrere statische Ressourcen Schauen wir uns den Code genauer an.

webpack.config.js

Für einige Front-End-Entwickler, die JQuery aufgegeben haben, um React und Vue zu nutzen Obwohl das Webpack möglicherweise nicht selbst geschrieben wurde, wird es im Allgemeinen eine webpack.config.js Webpack-Konfigurationsdatei geben, die klein und vollständig ist 🎜>

var debug = process.env.NODE_ENV !== "production"; //是否是测试环境
var webpack = require('webpack'); //导入webpack包
var path = require('path');

module.exports = { //导出 webpack固定写法
 context: path.join(__dirname),
 devtool: debug ? "inline-sourcemap" : null, //是否使用map工具, 用于浏览器debug
 entry: "./src/js/root.js", //打包的实体
 module: {
  loaders: [ //加载的配置
   {
    test: /\.js?$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    query: {
     presets: ['react', 'es2015'], //添加预处理器
     plugins: ['react-html-attrs'], //添加组件的插件配置
    }
   },
   { test: /\.css$/, loader: 'style-loader!css-loader' },
   {
    test: /\.less$/,
    loader: "style!css!less"
   }
  ]
 },
 output: { //输出的路径及文件名
  path: __dirname,
  filename: "./src/bundle.js"
 },
 plugins: debug ? [] : [ //一些插件
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
 ],
};

Webpack umfasst hauptsächlich

vier Hauptkategorien. Wenn Sie mehr erfahren möchten, lesen Sie bitte die offizielle Dokumentation Wenn Sie sich nicht die Mühe machen möchten, kopieren Sie einfach den obigen Code.entry, module, output, plugins

Im Vergleich zu gulp ist Webpack in Bezug auf die Verpackung schlanker, was möglicherweise der Grund dafür ist, dass es beliebt ist. Aber wenn man sich nur die oben genannten Dateien ansieht, ist es tatsächlich so einfach, aber es gibt Raum für weitere Verbesserungen.

package.json

Ich werde nicht viel über die Einführung von npm sagen, schauen wir uns die Datei direkt an.

{
 "name": "webpack",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": { //命令行工具
  "test": "echo \"Error: no test specified\" && exit 1",
  "watch": "webpack --progress --watch",
  "start": "webpack-dev-server --open --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": { //开发环境依赖
  "babel-loader": "^7.1.2",
  "clean-webpack-plugin": "^0.1.16",
  "css-loader": "^0.28.7",
  "csv-loader": "^2.1.1",
  "file-loader": "^0.11.2",
  "html-webpack-plugin": "^2.30.1",
  "json-loader": "^0.5.7",
  "lodash": "^4.17.4",
  "style-loader": "^0.18.2",
  "uglifyjs-webpack-plugin": "^0.4.6",
  "webpack": "^3.6.0",
  "webpack-dev-middleware": "^1.12.0",
  "webpack-dev-server": "^2.8.2",
  "webpack-merge": "^4.1.0",
  "xml-loader": "^1.2.1"
 },
 "dependencies": { //生产环境依赖
  "babel-plugin-import": "^1.5.0",
  "babel-plugin-react-html-attrs": "^2.0.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babelify": "^7.3.0",
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-mixin": "^4.0.0",
  "react-router": "^4.2.0"
 }
}

Befehl Das laufende Tool ist npm run build, was der Ausführung von webpack --config webpack.prod.js entspricht, und npm start entspricht der Ausführung von webpack- dev-server --open --config webpack.dev.js. Einfach und leicht zu verstehen.

In den Projektabhängigkeiten haben wir viele Plug-Ins und Loader hinzugefügt, die alle daran gewöhnt sind Erwähnenswert ist, dass das Webpack-Paket die Produktionsumgebung und die Entwicklungsumgebung gut isoliert und konfiguriert.

Zuerst müssen wir die vorherige webpack.config.js in drei Dateien aufteilen: webpack.common.js, webpack.prod.js.

webpack.common.js

Dies ist die allgemeine Konfiguration von Webpack. Die Gesamtkonfiguration ähnelt der, die wir zuvor gesehen haben. Wir importieren hauptsächlich zwei Plug-Ins, eines dient zum Löschen des Plug-Ins. in, und das andere besteht darin, das HTML-Plug-in zu erstellen

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 entry: './src/index.js',
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({title: 'webpack'}),
  new webpack.HashedModuleIdsPlugin()
 ],
 output: {
  filename: '[name].[chunkhash].js',
  path: path.resolve(__dirname, 'dist')
 },
 module: {
  rules: [
   {
    test: /\.js?$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    query: {
     presets: [
      'react', 'es2015'
     ],
     plugins: ['react-html-attrs']
    }
   },
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
   }, {
    test: /\.(png|svg|jpg|gif)$/,
    use: ['file-loader']
   }, {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader']
   }, {
    test: /\.(csv|tsv)$/,
    use: ['csv-loader']
   }, {
    test: /\.xml$/,
    use: ['xml-loader']
   }
  ]
 }
};

In der Konfiguration sind auch einige mögliche Dateien enthalten Webpack. rulesWenn Sie darüber sprechen möchten, können Sie einen weiteren Artikel schreiben, damit Sie es verstehen können babel-loader

Die Konfiguration der Webpack-Entwicklungsumgebung ist sehr einfach. Genau wie Git wird die Konfiguration von webpack.common.js zusammengeführt und eine neue Inline-Quelle hinzugefügt -Map-Tool zum Debuggen und aktuell aktualisierter Inhaltsindex.

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
 devtool: 'inline-source-map',
 devServer: {
  contentBase: './dist'
 }
});

Die Konfiguration von Die Webpack-Produktionsumgebung hat ein Komprimierungs-Plug-In und ein Umgebungskonfigurations-Plug-In hinzugefügt. Die Entwicklungstools unterscheiden sich von denen in der Entwicklungsrückzahlung. Weitere Informationen finden Sie direkt in der offiziellen Dokumentation.

Terminal

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
 devtool: 'source-map',
 plugins: [
  new UglifyJSPlugin({sourceMap: true}),
  new webpack.DefinePlugin({
   'process.env': {
    'NODE_ENV': JSON.stringify('production')
   }
  })
 ]
});

Auf diese Weise haben wir die Konfiguration abgeschlossen, um den Effekt zu sehen:

Zuerst betreten wir das Verzeichnis und installieren das Node-Paket.

npm run build

cd ../ && npm i

Wir können die gepackten Dateien sehen:

main.014ac9aa420264da48eb.js

MacBook-Pro-15:webpack zhushuangquan$ npm run build

> webpack@1.0.0 build /Users/zhushuangquan/Documents/code/webpack
> webpack --config webpack.prod.js

clean-webpack-plugin: /Users/zhushuangquan/Documents/code/webpack/dist has been removed.
Hash: 85b65f54ef1436b295a5
Version: webpack 3.6.0
Time: 1148ms
              Asset    Size Chunks       Chunk Names
  main.014ac9aa420264da48eb.js 671 bytes    0 [emitted] main
main.014ac9aa420264da48eb.js.map  6.47 kB    0 [emitted] main
           index.html 197 bytes     [emitted] 
[lVK7] ./src/index.js 184 bytes {0} [built]
Child html-webpack-plugin for "index.html":
   1 asset
  [3IRH] (webpack)/buildin/module.js 517 bytes {0} [built]
  [DuR2] (webpack)/buildin/global.js 509 bytes {0} [built]
    + 2 hidden modules

Wir können die Verpackung im Webpack sehen und Komprimierung, der Code ist im Grunde nicht lesbar. Daher müssen wir das vorherige Debugging-Plugin hinzufügen, um Fehler in der Produktionsumgebung zu beheben

!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s="lVK7")}({lVK7:function(e,n,t){"use strict";document.body.appendChild(function(){var e=document.createElement("p");return e.innerHTML="Hello webpack",e}())}});
//# sourceMappingURL=main.014ac9aa420264da48eb.js.map

Wir können sehen, dass eine Webseite mit dem Inhalt „Hello Webpack“ auf Port 8080 geöffnet ist. Wenn wir die Datei ändern, wird die Webseite automatisch aktualisiert.

Wissen Klicken Sie auf:

Gehen Sie zurück zur Befehlszeilenkonfiguration von package.json, die wir gerade hatten.

MacBook-Pro-15:webpack zhushuangquan$ npm start

> webpack@1.0.0 start /Users/zhushuangquan/Documents/code/webpack
> webpack-dev-server --open --config webpack.dev.js

clean-webpack-plugin: /Users/zhushuangquan/Documents/code/webpack/dist has been removed.
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
webpack: wait until bundle finished: /
Hash: 06f20ec519d58fbd5c28
Version: webpack 3.6.0
Time: 1460ms
            Asset    Size Chunks          Chunk Names
main.5eb4d4e3f458c49658a2.js   852 kB    0 [emitted] [big] main
         index.html 197 bytes     [emitted]     
[6Um2] (webpack)/node_modules/url/util.js 314 bytes {0} [built]
[8o/D] (webpack)-dev-server/client/overlay.js 3.71 kB {0} [built]
[HPf+] (webpack)/node_modules/url/url.js 23.3 kB {0} [built]
[Lx3u] (webpack)/hot/log.js 1.04 kB {0} [optional] [built]
[Sj28] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
[TfA6] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[U2me] (webpack)/hot/emitter.js 77 bytes {0} [built]
[V3KU] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
[cMmS] (webpack)-dev-server/client?http://localhost:8080 7.27 kB {0} [built]
[gqsi] (webpack)-dev-server/node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
  [0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {0} [built]
[gt+Q] (webpack)-dev-server/node_modules/ansi-regex/index.js 135 bytes {0} [built]
[lVK7] ./src/index.js 184 bytes {0} [built]
[p7Vd] (webpack)/node_modules/punycode/punycode.js 14.7 kB {0} [built]
[pEPF] (webpack)/node_modules/querystring-es3/index.js 127 bytes {0} [built]
  + 73 hidden modules
Child html-webpack-plugin for "index.html":
   1 asset
  [3IRH] (webpack)/buildin/module.js 517 bytes {0} [built]
  [DuR2] (webpack)/buildin/global.js 509 bytes {0} [built]
  [M4fF] ./node_modules/lodash/lodash.js 540 kB {0} [built]
  [a/t9] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
webpack: Compiled successfully.

 "scripts": { //命令行工具
  "test": "echo \"Error: no test specified\" && exit 1",
  "watch": "webpack --progress --watch",
  "start": "webpack-dev-server --open --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
 },

• 上面的npm run build => webpack => webpack.prod.js, 就是执行了生产环境的配置的打包命令.

• 上面的npm start => webpack-dev-server --open => webpack.dev.js, 就是执行了开发环境配置的服务端命令.

• --config是用于执行webpack配置文件的命令, 而默认为webpack.config.js.

• webpack命令就是和之前的gulp的逻辑相似, 将entry实例复制到output路径的逻辑. 当然还伴随着一系列的操作.

• webpack-dev-server --open命令是打开服务器并进行热加载的用途.

以上就是webpack的使用及逻辑, 并没有想象中的复杂吧, 甚至可以说是简单, 实测一天即可入门webpack.

由于webpack的配置是固定代码, 我已经打包上传github, 需要的同学可以进行下载.

相关推荐：

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

webpack配置方法小结

如何使用 webpack 优化资源方法技巧

Das obige ist der detaillierte Inhalt vonWeb-Beispielcode zum Erstellen von Front-End-Projekten mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!