入口文件entry 配置

/*

例子:

项目目录结构:

├─src # 当前项目的源码
    ├─pages # 各个页面独有的部分,如入口文件、只有该页面使用到的css、模板文件等
    │  ├─alert # 业务模块
    │  │  └─index # 具体页面
    │  ├─index # 业务模块
    │  │  ├─index # 具体页面
    │  │  └─login # 具体页面
*/

var path = require('path');
var glob = require('glob');
var option = {
    cwd: path.resolve(__dirname, './src/pages'),
    sync: true // 这里不能异步,只能同步
}
var globInstance = new glob.Glob('!(_)*/!(_)*', options);

var pageArr = globInstance.found;//一个数组,形如['index/index', 'index/login', 'alert/index']
//每一个入口文件都相当于entry里的一项,因此这样一项一项地来写实在是有点繁琐,使用 glob 模块读取目录结构,拼接项目页面输出
var configEntry = {};
pageArr.forEach((page) => {
      configEntry[page] = path.resolve(dirVars.pagesDir, page + '/page');
});
// configEntry = {
//     'alert/index': './src/pages/alert/index/page',
//     'user/index': './src/pages/user/index/page',
//     'index/index': './src/pages/index/index/page'
// }
module.exports = {    entry: configEntry}

输出文件:output参数

例子:

var configOutput = {
    path: path.resolve(__dirname, './build'),
    publicPath: '/',
    filename: '[name]/entry.js',
    chunkFilename: '[id].bundle.js',
};  
module.exports = {    output: configOutput}

output参数告诉webpack以什么方式来生成/输出文件 , output相当于一套规则,所有的入口都必须使用这一套规则  , 不能针对某一个特定的入口来制定output规则。output参数里有这几个子参数是比较常用的:path、publicPath、filename、chunkFilename

  • path

path参数表示生成文件的根目录,需要传入一个绝对路径。  path参数和后面的filename参数共同组成入口文件的完整路径

  • publicPath

  1. publicPath参数表示的是一个URL路径 , 用于生成css/js/图片/字体文件等资源的路径,以确保网页能正确地加载到这些资源
  2. publicPath参数跟path参数的区别是:path参数其实是针对本地文件系统的,而publicPath则针对的是浏览器;
  3. publicPath既可以是一个相对路径,如示例中的'../../../../build/',也可以是一个绝对路径如http://www.xxxxx.com/
  4. 如果遇到在开发环境加载图片可以显示,生产环境就加载失败的情况,可能是没有配置publicPath
  • filename

filename属性表示的是如何命名生成出来的入口文件,规则有以下三种:

  1. [name],指代入口文件的name,也就是上面提到的entry参数的key,因此,我们可以在name里利用/,即可达到控制文件目录结构的效果
  2. [hash] ,指代本次编译的一个hash版本,只要是在同一次编译过程中生成的文件,这个[hash]的值就是一样的;在缓存的层面来说,相当于一次全量的替换
  3. [chunkhash],指代的是当前chunk的一个hash版本,也就是说,在同一次编译中,每一个chunk的hash都是不一样的;而在两次编译中,如果某个chunk根本没有发生变化,那么该chunk的hash也就不会发生变化。这在缓存的层面上来说,就是把缓存的粒度精细到具体某个chunk,只要chunk不变,该chunk的浏览器缓存就可以继续使用。
  • chunkFilename

chunkFilename参数与filename参数类似,都是用来定义生成文件的命名方式的,只不过,chunkFilename参数指定的是除入口文件外的chunk的命名(这些chunk通常是由于webpack对代码的优化所形成的,比如因应实际运行的情况来异步加载)

例如:如果使用了插件 webpack.optimize.CommonsChunkPlugin 抽取所有通用的js部分,该插件就会生成一个公共的js 文件,chunkFilename就是设置 输入的文件名

例中的 对于key为'index/login'的入口文件,生成出来的路径就是build/index/login/entry.js

module 配置

webpack拥有一个类似于插件的机制,名为Loader,通过Loader,webpack能够针对每一种特定的资源做出相应的处理

  • test参数用来指示当前配置项针对哪些资源,该值应是一个条件值(condition)。

  • exclude参数用来剔除掉需要忽略的资源,该值应是一个条件值(condition)。

  • include参数用来表示本loader配置仅针对哪些目录

  • loader/loaders参数,用来指示用哪个/哪些loader来处理目标资源,这俩货表达的其实是一个意思,只是写法不一样,用loader写成一行,多个loader间使用!分割,形如loader: 'css?!postcss!less',目标资源先经less-loader处理过后将结果交给postcss-loader作进一步处理,然后最后再交给css-loader。

例子:生产的配置var dirVars = require('../base/dir-vars.config.js');

var eslintFormatter = require('eslint-friendly-formatter');
module.exports = {
  rules: [
    // eslint 代码检查
    {
        test: /\.js$/,
        enforce: 'pre',
        loader: 'eslint-loader',
        include: dirVars.srcRootDir,
        exclude: /bootstrap/,
        options: {
            formatter: eslintFormatter,
            fix: true,
        }
    },

    // es6转换
    {
        test: /\.js$/,
        include: dirVars.srcRootDir,
        loader: 'babel-loader',
        options: {
        presets: [['es2015', { loose: true }]],
            // 参数默认为false ,则相当于开启cache。这里的cache指的是babel在编译过程中某些可以缓存的步骤
            cacheDirectory: true,
            // ,不用这transform-runtime ,babel会为每一个转换后的文件 添加一些辅助的方法;        //  用了这个plugin,babel会把这些辅助的方法都集中到一个文件里统一加载统一管理,       plugins: ['transform-runtime']
        },
    },

    {
        test: /\.html$/,
        include: dirVars.srcRootDir,
        loader: 'html-loader',
    },

    // ejs
    {
        test: /\.ejs$/,
        include: dirVars.srcRootDir,
        loader: 'ejs-loader',
    },

    // 图片加载器,雷同file-loader,更适合图片,可以将较小的图片转成base64 ;  如下配置,将小于8192byte的图片转成base64码
    {
        test: /\.(png|jpg|gif)$/,
        include: dirVars.srcRootDir,
        loader: 'url-loader',
        options: {
            limit: 8192,
            name: './static/img/[hash].[ext]',
        },
    },

    // 专供bootstrap方案使用的,忽略bootstrap自带的字体文件
    {
        test: /\.(woff|woff2|svg|eot|ttf)$/,
        include: /glyphicons/,
        loader: 'null-loader',
    },

    // 专供iconfont方案使用的,后面会带一串时间戳,需要特别匹配到
    {
        test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
        include: dirVars.srcRootDir,
        loader: 'file-loader',
        options: {
            name: 'static/fonts/[name].[ext]',
        },
    },

    // 使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来
    {
        test: /\.css$/,
        exclude: /node_modules|bootstrap/,
        // loader: ExtractTextPlugin.extract('css?minimize&-autoprefixer!postcss'),
        use: ExtractTextPlugin.extract([
            {
              loader: 'css-loader',
              options: {
                    minimize: true,         // 代码压缩
                    '-autoprefixer': true   // 关闭autoprefixer已避免你的废弃CSS代码被css-loader删除了
              },
            },
            {
              loader: 'postcss-loader'
            },
        ])
    },
    // css
    {
        test: /\.css$/,
        include: /bootstrap/,
        use: ExtractTextPlugin.extract([
            {
                loader: 'css-loader',
            }
        ])
    },
    // less
    {
        test: /\.less$/,
        include: dirVars.srcRootDir,
        use: ExtractTextPlugin.extract([
            {
                loader: 'css-loader',
                options: {
                    minimize: true,         // 代码压缩
                    '-autoprefixer': true   // 关闭autoprefixer已避免你的废弃CSS代码被css-loader删除了
                },
            },
            {
                loader: 'postcss-loader'
            },
            {
                loader: 'less-loader'
            }
        ])
    }

  ],
};

webpack-webpackConfig-配置说明-多页面的更多相关文章

  1. 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...

  2. EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本

    为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

  3. 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...

  4. 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...

  5. 基于webpack实现多html页面开发框架一 准备工作

    本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...

  6. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载

    为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

  7. Vue+webpack配置实现多页面应用开发

    为什么要配置多页面开发? · 由于单页面应用不利于SEO,对于某些资讯类网站不够友好,而多页面则能够更优的解决此问题. · 传统的多页面开发模式(如java的jsp等) 前后端耦合性大,开发效率低,代 ...

  8. webpack构建react多页面应用

    写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应 ...

  9. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  10. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

随机推荐

  1. 1、OpenCV Python 图像加载和保存

    __author__ = "WSX" import cv2 as cv # 这里的文件是图片或者视频 def Save_File( image ): cv.imwrite(&quo ...

  2. 树状数组【bzoj1103】: [POI2007]大都市meg

    1103: [POI2007]大都市meg 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了. 不过,她经常回忆起以前在乡间漫步的情景.昔日,乡 ...

  3. kuangbin专题七 HDU1166 敌兵布阵 (线段树或树状数组)

    C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...

  4. Spring Security获取已登录的用户信息的两种方法

    第一种是直接从session中手动拿: @RequestMapping(value = "/user", method = RequestMethod.GET)public Res ...

  5. vim 常用配置项

    #设置行号set nu #设置下划线 set cursorline #设置自动锁紧 set autoindent #设置shift空格 set shiftwidth=4 #设置c 风格缩进 set c ...

  6. ssh-keygen生成公私钥免密码登录远程服务器

    1.终端输入命令:ssh-keygen -t rsa ssh-keygen命令专门是用来生成密钥的.该命令有很多选项,这里列出了最基本的四个: -t 用来指定密钥类型(dsa | ecdsa | ed ...

  7. 查询mysql单库的修改时间,大小

      select database_name,max(last_update) from mysql.innodb_table_stats group by database_name;   SELE ...

  8. Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap

    转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...

  9. ajax提交文件file 单个文件上传

    转载: https://blog.csdn.net/u012867699/article/details/78357401

  10. my11_mysql事务隔离

    概述 ************************************************ Mysql有四个事务隔离级别,默认隔离级别为RR,开启一个事务可以使用 START TRANSA ...