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 ,一个页面一 ...
随机推荐
- 1、OpenCV Python 图像加载和保存
__author__ = "WSX" import cv2 as cv # 这里的文件是图片或者视频 def Save_File( image ): cv.imwrite(&quo ...
- 树状数组【bzoj1103】: [POI2007]大都市meg
1103: [POI2007]大都市meg 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了. 不过,她经常回忆起以前在乡间漫步的情景.昔日,乡 ...
- kuangbin专题七 HDU1166 敌兵布阵 (线段树或树状数组)
C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...
- Spring Security获取已登录的用户信息的两种方法
第一种是直接从session中手动拿: @RequestMapping(value = "/user", method = RequestMethod.GET)public Res ...
- vim 常用配置项
#设置行号set nu #设置下划线 set cursorline #设置自动锁紧 set autoindent #设置shift空格 set shiftwidth=4 #设置c 风格缩进 set c ...
- ssh-keygen生成公私钥免密码登录远程服务器
1.终端输入命令:ssh-keygen -t rsa ssh-keygen命令专门是用来生成密钥的.该命令有很多选项,这里列出了最基本的四个: -t 用来指定密钥类型(dsa | ecdsa | ed ...
- 查询mysql单库的修改时间,大小
select database_name,max(last_update) from mysql.innodb_table_stats group by database_name; SELE ...
- Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...
- ajax提交文件file 单个文件上传
转载: https://blog.csdn.net/u012867699/article/details/78357401
- my11_mysql事务隔离
概述 ************************************************ Mysql有四个事务隔离级别,默认隔离级别为RR,开启一个事务可以使用 START TRANSA ...