初学webpack（3.X版本），手动搭建的一个简单多页面项目

最新推荐文章于 2024-01-29 14:27:07 发布

啊哈前端

最新推荐文章于 2024-01-29 14:27:07 发布

阅读量380

点赞数

分类专栏： webpack 文章标签： webpack多页面配置

本文链接：https://blog.csdn.net/wuzhe128520/article/details/89789190

版权

本文档详细介绍了如何使用webpack3.x手动配置一个多页面项目，包括webpack.util.js中自动读取入口和生成html模板的配置，webpack.comm.js的公用设置，如插件和loader的选择，以及在开发和生产模式下的不同配置，如webpack.dev.js的服务器配置和文件输出，webpack.prod.js的生产环境优化策略。

摘要由CSDN通过智能技术生成

这个配置是基于webpack3.X版本的；
1、第一个文件webpack.util.js，主要作用是自动读取入口文件并进行配置，自动生成html模板的配置文件

const glob = require('glob'),
      path = require('path'),
      htmlWebpackPlugin = require('html-webpack-plugin'),
      //公共使用的第三方库，单独打包到一个文件里避免长效缓存失败
      vendors = ['jquery', 'lodash'];

const webpackUtil = {

   //文件路径
      fileDir: {

          //打包前的原始路径
          origin: {
            //入口文件的路径(正则表示)
            entryJs: './src/js/pages/',

            //页面模板路径(正则表示)
            tmpls: './src/view/pages/'
          } ,

          //打包后的路径
          build: {

              //打包后的html存放目录
              view: './view/',

          }
      },

  //根据给定的值删除数组对应的值
  deleteByValue: function(ary, value, isDeleteAll){

          var i = 0,
              length = ary.length;

          for(; i < length; i++){

              if(value === ary[i]){
                  ary.splice(i,1);
                  //是否删除所有跟value一样的值,默认只删除最近的一个
                  if(!isDeleteAll){
                      break;
                  }
              }
          }
          return ary;
    },

    //获取所有的入口地址
  getEntry: function(globPath) {

      //找到正则globPath匹配的文件名(包括完整的路径)
      let files = glob.sync(globPath),
          entries = {},
          entry,
          dirname,
          basename,
          pathname,
          extname;

      entries['vendors'] = vendors;
      for (let i = 0; i < files.length; i++) {
           entry = files[i];

           //文件的路径
           dirname = path.dirname(entry);

           //文件名的后缀
           extname = path.extname(entry);

           //方法返回一个 path 的最后一部分
           basename = path.basename(entry, extname);
           pathname = path.join(dirname, basename);

           entries[basename] = entry;
      }

      return entries;
  },

  /**
   * [配置webpack插件的选项]
   * @param  {[string]} tmplsDir [html模板路径]
   * @param  {[string]} ext      [模板的后缀名]
   * injectArray: 需要将js插入到head的页面数组
   * @return {[type]}          [description]
   */
  configHtmlWebpackOptions: function(tmplsDir, ext, injectArray, entries, config) {

      let pages = Object.keys(entries);

      pages = webpackUtil.deleteByValue(pages,'vendors');

      //去除vendors这个chunk，已在其他插件处理
      pages.forEach(function(pagename) {

         let htmlWebpackOption = {

            filename: webpackUtil.fileDir.build.view + pagename + '.html&#