webpack-webpackConfig-配置说明-多页面
入口文件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
- publicPath参数表示的是一个URL路径 , 用于生成css/js/图片/字体文件等资源的路径,以确保网页能正确地加载到这些资源
- publicPath参数跟path参数的区别是:path参数其实是针对本地文件系统的,而publicPath则针对的是浏览器;
- publicPath既可以是一个相对路径,如示例中的
'../../../../build/'
,也可以是一个绝对路径如http://www.xxxxx.com/
。 - 如果遇到在开发环境加载图片可以显示,生产环境就加载失败的情况,可能是没有配置publicPath
filename
filename属性表示的是如何命名生成出来的入口文件,规则有以下三种:
- [name],指代入口文件的name,也就是上面提到的entry参数的key,因此,我们可以在name里利用
/
,即可达到控制文件目录结构的效果 - [hash] ,指代本次编译的一个hash版本,只要是在同一次编译过程中生成的文件,这个[hash]的值就是一样的;在缓存的层面来说,相当于一次全量的替换
- [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-配置说明-多页面的更多相关文章
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...
- 基于webpack实现多html页面开发框架一 准备工作
本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
- Vue+webpack配置实现多页面应用开发
为什么要配置多页面开发? · 由于单页面应用不利于SEO,对于某些资讯类网站不够友好,而多页面则能够更优的解决此问题. · 传统的多页面开发模式(如java的jsp等) 前后端耦合性大,开发效率低,代 ...
- webpack构建react多页面应用
写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应 ...
- webpack+react+antd 单页面应用实例
React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
随机推荐
- loj #6261 一个人的高三楼 FFT + 组合数递推
\(\color{#0066ff}{ 题目描述 }\) 一天的学习快要结束了,高三楼在晚自习的时候恢复了宁静. 不过,\(HSD\) 桑还有一些作业没有完成,他需要在这个晚自习写完.比如这道数学题: ...
- clang -O3 for循环的LLVM IR
O3都是怪物,这里分析的是CLANG怪物,示例程序遍历数组每个元素然后放大. void foreach_scale(int arr[],int elem){ for(int i=0;i<elem ...
- Diophantus of Alexandria
Diophantus of Alexandria was an egypt mathematician living in Alexandria. He was one of the first ma ...
- POJ 2421 Constructing Roads(最小生成树)
Description There are N villages, which are numbered from 1 to N, and you should build some roads su ...
- Educational Codeforces Round 3 C
C. Load Balancing time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- Java中的ThreadLocal使用
ThreadLocal用于下面的场景: 1. 不允许多个线程同时访问的资源 2. 单个线程存活过程只使用一个实例 官方定义如下: This class provides thread-local va ...
- 【Effective Java】阅读
Java写了很多年,很惭愧,直到最近才读了这本经典之作<Effective Java>,按自己的理解总结下,有些可能还不够深刻 一.Creating and Destroying Obje ...
- ZPL打印机公用代码
using System;using System.Collections.Generic;using System.Linq;using System.Web; using System.Text; ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
- 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 ...