Exemple de code Web pour créer des projets frontaux à l'aide de Webpack

Les plus populaires de nos jours sont webpack et gulp. Nous avons parlé de gulp dans l'article précédent, nous aborderons webpack Cet article vous présente principalement comment utiliser webpack pour créer des projets front-end sur le Web. . Je pense que c'est plutôt bien. Maintenant, partagez-le avec tout le monde et donnez-le comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

En parlant de webpack, les étudiants front-end doivent le connaître. En fait, lorsque nous utilisions gulp pour construire auparavant, nous utilisions également la technologie d'emballage de. webpack. En fait, Gulp et webpack ne se remplacent pas, mais se complètent. Aujourd'hui, nous allons examiner de plus près la magie du webpack.

Lorsque nous apprenons une nouvelle technologie, nous devons d'abord commencer par. sa documentation officielle. Bien sûr, nous devons apprendre la dernière version. Le tutoriel officiel de webpack est très bien écrit et explique étape par étape. Par rapport à la documentation officielle d'occasion, de troisième main et de quatrième. -informations à la main sur le blog, le tutoriel officiel Documentation est définitivement un meilleur choix pour vous

Cet article n'a pas pour but de vous apprendre à copier des documents officiels, comme la lecture de cet article suffit, mais il vous le permet. pour commencer rapidement et sentir que le soi-disant Webpack est en réalité comme ça. Avec webpack, il vous suffit de vous souvenir d'une idée centrale, tout comme le diagramme ci-dessus, il regroupe et compresse toute la logique de fichier complexe en plusieurs ressources statiques. plus d'explications, regardons le code. C'est pratique.

webpack.config.js

Pour certains développeurs front-end qui ont abandonné jquery pour adopter React et Vue. , bien que webpack n'ait peut-être pas été écrit par lui-même, mais vous l'avez probablement déjà vu. De manière générale, il y aura un webpack.config.js fichier de configuration du webpack. Le code suivant est une configuration simple du webpack, qui est petite et complète. 🎜>

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 comprend principalement

quatre grandes catégories La documentation officielle est très claire. Si vous souhaitez en savoir plus, veuillez lire la documentation officielle. Je ne veux pas vous embêter, copiez simplement le code ci-dessus.entry, module, output, plugins

Par rapport à gulp, webpack est plus simple en termes d'emballage, c'est pourquoi il est populaire. Mais rien qu'en regardant les fichiers ci-dessus, c'est en effet simple. , mais il y a encore place à l'amélioration.

package.json

Je ne dirai pas grand-chose sur l'introduction de npm, regardons directement le fichier.

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

commande L'outil en cours d'exécution est npm run build ce qui équivaut à exécuter webpack --config webpack.prod.js, et npm start équivaut à exécuter webpack-dev -server --open --config webpack.dev.js C'est simple et facile à comprendre.

Dans les dépendances du projet, nous avons ajouté de nombreux plug-ins et chargeurs, qui sont tous utilisés. pour construire webpack. Ils sont tous mentionnés dans les tutoriels des documents officiels. Ce qu'il convient de noter, c'est le package webpack-merge. L'environnement de production et l'environnement de développement sont bien isolés et configurés.

Nous devons d'abord diviser le webpack.config.js précédent en trois fichiers --- webpack.common.js, webpack dev.js, webpack.prod.js.

<.>webpack.common.js

Il s'agit de la configuration commune de webpack. La configuration globale est similaire à ce que nous avons vu auparavant. Nous importons principalement deux plug-ins, l'un consiste à effacer le plug. -in, et l'autre consiste à créer le plug-in html

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']
   }
  ]
 }
};

Dans la configuration, nous incluons également certains fichiers possibles. dans webpack.

Si vous voulez en parler, vous pouvez écrire un autre article. C'est en fait un outil de compatibilité js, donc vous pouvez le comprendre rulesbabel-loader

dev.js

La configuration de l'environnement de développement webpack est très simple. Il utilise simplement l'outil webpack-merge mentionné précédemment, tout comme git, il fusionne la configuration de webpack.common.js et en ajoute une nouvelle en ligne. outil de carte source pour le débogage et index de contenu mis à jour à chaud.

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'
 }
});

La configuration de l'environnement de production webpack a ajouté un plug-in de compression et un plug-in de configuration d'environnement. Les outils de développement ici sont différents de ceux en cours de remboursement de développement. Pour plus de détails, vous pouvez consulter directement la documentation officielle.

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')
   }
  })
 ]
});

De cette façon, nous avons terminé la configuration, saisissons-le sur le terminal pour voir l'effet :

Nous entrons d'abord dans le répertoire et installons le package de nœud.

cd ../ && npm i

npm run build

Nous pouvons voir les fichiers empaquetés :

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

Nous pouvons voir l'emballage dans le webpack et la compression, le code est fondamentalement illisible. Nous devons donc ajouter le plug-in de débogage précédent pour remédier aux bugs de l'environnement de production

!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

npm start

Nous pouvons voir qu'une page Web avec le contenu Hello webpack est ouverte sur le port 8080. Lorsque nous modifions le fichier, la page Web s'actualisera automatiquement.

Cliquez sur les connaissances :

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.

Retournez à la configuration en ligne de commande de package.json que nous venons d'avoir.

 "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 优化资源方法技巧

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!