recherche

Maison  >  Article  >  interface Web  >  Explication détaillée des exemples de développement de sites multipages webpack+express

Explication détaillée des exemples de développement de sites multipages webpack+express

小云云
小云云original
2017-12-23 15:11:471519parcourir

Après avoir étudié le didacticiel d'entrée de gamme du webpack, je pense qu'il peut être conçu sur mesure pour les applications d'une seule page, telles que webpack+react, webpack+vue, etc., qui peuvent résoudre les problèmes de chargement et d'empaquetage des dépendances de diverses ressources. Même les CSS sont empaquetés dans js et ajoutés dynamiquement au document dom. Cet article présente principalement l'explication détaillée du développement de sites multipages webpack+express, j'espère qu'il pourra aider tout le monde.

Donc, si nous voulons un site Web ordinaire avec plusieurs pages, le CSS doit être indépendant et le chargement de JS nécessite des modules ?

Adresse du projet : webpackDemo_jb51.rar

Initialiser le projet, installer les dépendances

package.json


"devDependencies": {
  "css-loader": "^0.23.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.8.5",
  "html-loader": "^0.4.3",
  "html-webpack-plugin": "^2.9.0",
  "jquery": "^1.12.0",
  "less": "^2.6.0",
  "less-loader": "^2.2.2",
  "sass-loader": "^4.0.2",
  "style-loader": "^0.13.0",
  "url-loader": "^0.5.7",
  "webpack": "^1.12.13",
  "webpack-dev-server": "^1.14.1"
}

Structure du répertoire (j'utilise le framework express, d'autres sont basés sur des besoins personnels) 


- webpackDemo
  - src        #代码开发目录
    - css      #css目录，按照页面（模块）、通用、第三方三个级别进行组织
      + page
      + common
      + lib
    - js       #JS脚本，按照page、components进行组织
      + page
      + components
    + template      #HTML模板
  - node_modules    #所使用的nodejs模块
  - public            #express静态资源文件
    - dist            #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成
      + css        
      + js
    + img      #图片资源
  + view            #express静态资源文件（webpack编译打包输出view目录）
  package.json      #项目配置
  webpack.config.js  #webpack配置

Page de développement

Créez le fichier index.js dans le répertoire src/js/page et le fichier index.html dans le répertoire src/view. L'entrée js correspond au nom du fichier modèle.

Le contenu d'index.html est le suivant : 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <!--
    描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签
  -->
</head>
<body>
  <!--
    描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值
  -->
</body>
</html>

C'est un modèle HTML si simple, n'introduisez aucun CSS ni JS, juste un package via webpack Importez-le automatiquement pour nous.

Le contenu d'index.js est le suivant : 


//引入css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$(&#39;body&#39;).append(&#39;<p class="text">index</p>&#39;);

page1.html :


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>page1</title>
</head>
<body>
</body>
</html>

page1.js :


//引入css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$(&#39;body&#39;).html(&#39;page1&#39;);

configuration du webpack (j'utilise le framework express, d'autres sont basés sur des besoins personnels) 


var path = require(&#39;path&#39;);
var webpack = require(&#39;webpack&#39;);
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
 */
var ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
 */
var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);

module.exports = {
  entry: { //配置入口文件，有几个写几个
    index: &#39;./src/js/page/index.js&#39;,
    page1: &#39;./src/js/page/page1.js&#39;
  },
  output: { 
    path: path.join(__dirname, &#39;./public/dist/&#39;), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
    publicPath: &#39;/dist/&#39;,        //模板、样式、脚本、图片等资源对应的server上的路径
    filename: &#39;js/[name].js&#39;,      //每个页面对应的主js的生成配置
    chunkFilename: &#39;js/[id].chunk.js&#39;  //chunk生成的配置
  },
  module: {
    loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。
      {
        test: /\.css$/,
        //配置css的抽取器、加载器。&#39;-loader&#39;可以省去
        loader: ExtractTextPlugin.extract(&#39;style-loader&#39;, &#39;css-loader&#39;) 
      }, {
        test: /\.less$/,
        //配置less的抽取器、加载器。中间!有必要解释一下，
        //根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
        //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
        loader: ExtractTextPlugin.extract(&#39;css!less&#39;)
      }, {
        test: /\.scss$/,
        //配置scss的抽取器、加载器。中间!有必要解释一下，
        //根据从右到左的顺序依次调用scss、css加载器，前一个的输出是后一个的输入
        //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
        loader: ExtractTextPlugin.extract(&#39;css!scss&#39;)
      }, {
        //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
        //比如你配置，attrs=img:src img:src就可以一并处理src引用的资源了，就像下面这样
        test: /\.html$/,
        loader: "html?attrs=img:src img:src"
      }, {
        //文件加载器，处理文件静态资源
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: &#39;file-loader?name=./fonts/[name].[ext]&#39;
      }, {
        //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
        //如下配置，将小于8192byte的图片转成base64码
        test: /\.(png|jpg|gif)$/,
        loader: &#39;url-loader?limit=8192&name=./img/[hash].[ext]&#39;
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({ //加载jq
      $: &#39;jquery&#39;
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: &#39;commons&#39;, // 将公共模块提取，生成名为`commons`的chunk
      chunks: [&#39;index&#39;,&#39;page1&#39;], //提取哪些模块共有的部分
      minChunks: 2 // 提取至少2个模块共有的部分
    }),
    new ExtractTextPlugin(&#39;css/[name].css&#39;), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
    
    //HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      favicon: &#39;./src/favicon.ico&#39;, //favicon路径，通过webpack引入同时可以生成hash值
      filename: &#39;../../views/index.html&#39;, //生成的html存放路径，相对于path
      template: &#39;./src/template/index.html&#39;, //html模板路径
      inject: &#39;body&#39;, //js插入的位置，true/&#39;head&#39;/&#39;body&#39;/false
      hash: true, //为静态资源生成hash值
      chunks: [&#39;commons&#39;, &#39;index&#39;],//需要引入的chunk，不配置就会引入所有页面的资源
      minify: { //压缩HTML文件  
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: false //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      favicon: &#39;./src/favicon.ico&#39;, //favicon路径，通过webpack引入同时可以生成hash值
      filename: &#39;../../views/page1.html&#39;, //生成的html存放路径，相对于path
      template: &#39;./src/template/page1.html&#39;, //html模板路径
      inject: true, //js插入的位置，true/&#39;head&#39;/&#39;body&#39;/false
      hash: true, //为静态资源生成hash值
      chunks: [&#39;commons&#39;, &#39;list&#39;],//需要引入的chunk，不配置就会引入所有页面的资源
      minify: { //压缩HTML文件  
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: false //删除空白符与换行符
      }
    })

    // new webpack.HotModuleReplacementPlugin() //热加载
  ],
  //使用webpack-dev-server，提高开发效率
  // devServer: {
  //   contentBase: &#39;./&#39;,
  //   host: &#39;localhost&#39;,
  //   port: 9090, //默认8080
  //   inline: true, //可以监控js变化
  //   hot: true, //热启动
  // }
};

D'accord, après avoir terminé les configurations ci-dessus, exécutez la commande webpack packaging pour terminer le packaging du projet. 


Hash: e6219853995506fd132a
Version: webpack 1.14.0
Time: 1338ms
        Asset    Size Chunks       Chunk Names
     js/index.js 457 bytes    0 [emitted] index
     js/page1.js 392 bytes    1 [emitted] page1
    js/commons.js   306 kB    2 [emitted] commons
    css/index.css  62 bytes    0 [emitted] index
    css/page1.css  62 bytes    1 [emitted] page1
   css/commons.css 803 bytes    2 [emitted] commons
     favicon.ico  1.15 kB     [emitted]
../../view/index.html 496 bytes     [emitted]
../../view/page1.html 499 bytes     [emitted]
  [0] ./src/js/page/index.js 170 bytes {0} [built]
  [0] ./src/js/page/page1.js 106 bytes {1} [built]
  + 7 hidden modules
Child html-webpack-plugin for "../../view/page1.html":
    + 1 hidden modules
Child html-webpack-plugin for "../../view/index.html":
    + 1 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules

À ce stade, accédez au répertoire vues pour afficher le fichier index.html généré, comme suit : 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>  
<link rel="shortcut icon" href="/dist/favicon.ico" rel="external nofollow" ><link href="/dist/css/commons.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"><link href="/dist/css/index.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"></head>
<body>
  <script type="text/javascript" src="/dist/js/commons.js?e6219853995506fd132a"></script><script type="text/javascript" src="/dist/js/index.js?e6219853995506fd132a"></script></body>
</html>

Vous pouvez voir qu'en plus de conserver le contenu du modèle d'origine, le fichier généré ajoute également automatiquement les fichiers CSS et JS qui doivent être introduits, ainsi que le favicon selon le définition du fichier d'entrée index.js, et ajoute également la valeur de hachage correspondante.

Deux questions

  1. Comment webpack découvre-t-il automatiquement le fichier d'entrée et configure le modèle correspondant

  2. Comment traiter directement le problème de l'introduction automatique des styles et des scripts


var path = require(&#39;path&#39;);
var webpack = require(&#39;webpack&#39;);
var glob = require(&#39;glob&#39;);
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
 */
var ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
 */
var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
/**
 *将公共模块提取，生成名为`commons`的chunk
 */
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
//压缩
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

//判断开发模式
var debug = process.env.NODE_ENV !== &#39;production&#39;;
var getEntry = function(globPath, pathDir) {
  var files = glob.sync(globPath);
  var entries = {},
    entry, dirname, basename, pathname, extname;
  for (var i = 0; i < files.length; i++) {
    entry = files[i];
    dirname = path.dirname(entry);  //文件目录
    extname = path.extname(entry);  //后缀名
    basename = path.basename(entry, extname); //文件名
    pathname = path.join(dirname, basename);
    pathname = pathDir ? pathname.replace(new RegExp(&#39;^&#39; + pathDir), &#39;&#39;) : pathname;
    entries[pathname] = [&#39;./&#39; + entry]; //这是在osx系统下这样写 win7 entries[basename]
  }
  console.log(entries);
  return entries;
}

//入口(通过getEntry方法得到所有的页面入口文件)
var entries = getEntry(&#39;src/js/page/**/*.js&#39;, &#39;src/js/page/&#39;);
//提取哪些模块共有的部分从entries里面获得文件名称
var chunks = Object.keys(entries);
//模板页面(通过getEntry方法得到所有的模板页面)
var pages = Object.keys(getEntry(&#39;src/template/**/*.html&#39;, &#39;src/template/&#39;));

console.log(pages)

var config = {
  entry: entries,
  output: {
    path: path.join(__dirname, &#39;./public/dist/&#39;),//输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
    publicPath: &#39;/dist/&#39;,        //模板、样式、脚本、图片等资源对应的server上的路径
    filename: &#39;js/[name].js&#39;,      //每个页面对应的主js的生成配置
    chunkFilename: &#39;js/[id].chunk.js?[chunkhash]&#39;  //chunk生成的配置
  },
  module: {
    loaders: [ //加载器
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(&#39;style&#39;, &#39;css&#39;)
      }, {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract(&#39;css!less&#39;)
      }, {
        test: /\.html$/,
        loader: "html?-minimize"  //避免压缩html,https://github.com/webpack/html-loader/issues/50
      }, {
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: &#39;file-loader?name=fonts/[name].[ext]&#39;
      }, {
        test: /\.(png|jpe?g|gif)$/,
        loader: &#39;url-loader?limit=8192&name=imgs/[name]-[hash].[ext]&#39;
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({ //加载jq
      $: &#39;jquery&#39;
    }),
    new CommonsChunkPlugin({
      name: &#39;commons&#39;, // 将公共模块提取，生成名为`commons`的chunk
      chunks: chunks,
      minChunks: chunks.length // 提取所有entry共同依赖的模块
    }),
    new ExtractTextPlugin(&#39;css/[name].css&#39;), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
    debug ? function() {} : new UglifyJsPlugin({ //压缩代码
      compress: {
        warnings: false
      },
      except: [&#39;$super&#39;, &#39;$&#39;, &#39;exports&#39;, &#39;require&#39;] //排除关键字
    }),
  ]
};

pages.forEach(function(pathname) {
  var conf = {
    filename: &#39;../../views/&#39; + pathname + &#39;.html&#39;, //生成的html存放路径，相对于path
    template: &#39;src/template/&#39; + pathname + &#39;.html&#39;, //html模板路径
    inject: false, //js插入的位置，true/&#39;head&#39;/&#39;body&#39;/false
    /*
    * 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题，
    * 如在html标签属性上使用{{...}}表达式，所以很多情况下并不需要在此配置压缩项，
    * 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
    * 为避免压缩html，需要在html-loader上配置&#39;html?-minimize&#39;，见loaders中html-loader的配置。
     */
    // minify: { //压缩HTML文件
    // removeComments: true, //移除HTML中的注释
    // collapseWhitespace: false //删除空白符与换行符
    // }
  };
  if (pathname in config.entry) {
    favicon: &#39;./src/favicon.ico&#39;, //favicon路径，通过webpack引入同时可以生成hash值
    conf.inject = &#39;body&#39;;
    conf.chunks = [&#39;commons&#39;, pathname];
    conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;

Le code suivant est similaire à celui ci-dessus L'essentiel. la différence est qu'elle passe un La méthode place tous les fichiers associés dans un objet, complétant ainsi l'effet d'introduction automatique !

Ce qui précède sont toutes les configurations sur le système mac osx, le chemin win7 peut être différent

glob : L'analyse ici est différente :

Mais l'exigence finale est 


entries:
 {
 index: [ &#39;./src/template/index.js&#39; ],
 page1: [ &#39;./src/template/page1.js&#39; ]
 }

pages:
 [ &#39;index&#39;, &#39;page1&#39; ]

Il doit être modifié en conséquence en fonction de la configuration de l'ordinateur personnel.

Recommandations associées :

Développement de sites multipages basés sur l'ingénierie frontale du webpack (2)_html/css_WEB-ITnose

Une brève introduction pour démarrer avec Node.js et Express (images et texte)

Résumé du didacticiel d'apprentissage sur l'optimisation des performances frontales du 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!

Déclaration：
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
Article précédent：Exemples pour expliquer le développement de meilleurs modules JavaScriptArticle suivant：Exemples pour expliquer le développement de meilleurs modules JavaScript

Articles Liés

Voir plus