入口文件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. loj #6261 一个人的高三楼 FFT + 组合数递推

    \(\color{#0066ff}{ 题目描述 }\) 一天的学习快要结束了,高三楼在晚自习的时候恢复了宁静. 不过,\(HSD\) 桑还有一些作业没有完成,他需要在这个晚自习写完.比如这道数学题: ...

  2. clang -O3 for循环的LLVM IR

    O3都是怪物,这里分析的是CLANG怪物,示例程序遍历数组每个元素然后放大. void foreach_scale(int arr[],int elem){ for(int i=0;i<elem ...

  3. Diophantus of Alexandria

    Diophantus of Alexandria was an egypt mathematician living in Alexandria. He was one of the first ma ...

  4. POJ 2421 Constructing Roads(最小生成树)

    Description There are N villages, which are numbered from 1 to N, and you should build some roads su ...

  5. Educational Codeforces Round 3 C

    C. Load Balancing time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  6. Java中的ThreadLocal使用

    ThreadLocal用于下面的场景: 1. 不允许多个线程同时访问的资源 2. 单个线程存活过程只使用一个实例 官方定义如下: This class provides thread-local va ...

  7. 【Effective Java】阅读

    Java写了很多年,很惭愧,直到最近才读了这本经典之作<Effective Java>,按自己的理解总结下,有些可能还不够深刻 一.Creating and Destroying Obje ...

  8. ZPL打印机公用代码

    using System;using System.Collections.Generic;using System.Linq;using System.Web; using System.Text; ...

  9. Vue.js递归组件实现动态树形菜单

    使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...

  10. python -- Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools

    用python读取hive数据,引用下面包. #!/usr/bin/env python import pyhs2 as hive 先按照它 pip install pyhs2 出现错误 Collec ...