vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server
下的设置(npm run dev
)
./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一个实例。
new HtmlWebpackPlugin({
// 打包后文件名
filename: 'index.html',
// html模板
template: './src/views/index.html',
// 打包后文件引入位置,['body'|'head'],这里的true等同于body
inject: true,
// 引入的入口文件(entry)
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/views/login.html',
inject: true,
chunks: ['login']
}),
2. webpack-build
下的设置(npm run build
)
打开 ./config/index.js 配置文件, build 属性中,默认只有一个 index ,在这里添加上自己的其他页面及其路径:
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'), // index page
login: path.resolve(__dirname, '../dist/login.html'), // login page
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', // 多级路径可以在这里配置, 比如{hostname}/admin/xxx 这里可以写为 '/admin/'
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
打开 ./build/webpack.prod.conf.js ,修改 new HtmlWebpackPlugin ,同理dev,一个页面一个实例。
new HtmlWebpackPlugin({
// 注意修改config.build.index,对应上面的config
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
// 模板文件路径
template: './src/views/index.html',
inject: true,
minify: {
// 删除注释
removeComments: true,
// 删除空格
collapseWhitespace: true,
removeAttributeQuotes: true
// 更多属性参见
// https://github.com/kangax/html-minifier#options-quick-reference
},
// 打包文件,注意公共文件(CommonsChunkPlugin中的name)放在前面
chunks: ['manifest', 'vendor', 'index'],
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'login.html'
: config.build.login,
template: './src/views/login.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunks: ['manifest', 'vendor', 'login'],
chunksSortMode: 'dependency'
}),
css-loader
无需配置,配置后会导致找不到包,vue-cli
已经自动配置。
webpack注意事项
- npm init ,生成 package.json 文件。
- less的 @import '../xxxx.less'; ,结尾一定要分号,路径是同目录需要 ./xxx.less 。
- 如果出现 Cannot find element: #app 错误,需要在 webpack.config.js 文件中,配置 html-webpack-plugin 的 inject 属性为 body 。
- webpack.config.js 配置文件的 entry 属性,为数组或字符串时打包为一个js文件,为
json
对象时打包为多个js文件, key 为占位符[name]
的值。 - 使用LESS需要安装 less、less-loader 。
- webpack.config.js 配置文件的 output 属性, path: path.resolve(__dirname, 'dist')
,
是打包后文件存放位置, filename: 'js/[name].bundle.js',
是打包后文件名, publicPath: 'http://webpacktest.nat123.cc' 是程序上线后的域名,这样HTML中引入的文件就有hostname,如图所示:
package.json
配置文件中,scripts
属性可以配置webpack
打包设置:"webpack": "webpack --config webpack.config.js --progress --display-modules --display-reasons --colors"
。
参考博客: webpack前端构建工具学习总结
vue cli 构建的 webpack 项目设置多页面的更多相关文章
- vue cli 3 & webpack-merge & webpack 3 & bug
vue cli 3 & webpack-merge & webpack & bug bug webpack-merge & bug webpack-merge ??? ...
- 手动搭建Vue之前奏:搭建webpack项目
手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- Vue Cli 3:创建项目
一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
- vue --- cli build 后的项目,图片路径出错
今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自 ...
- vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑
1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...
随机推荐
- POJ - 1733 离散化 并查集
题意:求问数列区间奇偶信息正确与否 和上一题一样(甚至弱化),加个离散就ok啦 #include<iostream> #include<algorithm> #include& ...
- HDU - 6183 动态开点线段树 || 令人绝望的线段树
一看C才[0,50],肯定要开51棵线段树维护y区间的最小x值啦 是男人就上51棵..等等空间爆几倍了 动态开点!51棵线段树用全局节点变量控制,有点像主席树 清空工作很简单,把51个树根清掉然后回收 ...
- mysql命令查询表的个数
https://blog.csdn.net/xiao__ge/article/details/56671221 语句如下: SELECT count(TABLE_NAME) FROM informat ...
- log4j详解与实战
[转自] http://www.iteye.com/topic/378077 log4j是一个非常强大的log记录软件,下面我们就来看看在项目中如何使log4j. 首先当然是得到log4j的jar档, ...
- jmeter发送邮件的模板
<hr/> (本邮件是程序自动下发的,请勿回复!)<br/><hr/> 项目名称:$PROJECT_NAME<br/><hr/> 构建编号: ...
- PIE SDK文本元素的绘制
1. 功能简介 在数据的处理中会用到文本元素的绘制,利用ITextElement文本元素接口进行绘制,目前PIE SDK支持ITextSymbol符号接口,TextSymbol对象是用于修饰文字元素对 ...
- PIE SDK影像格式转换
1.算法功能简介 影像格式转换可以实现通用栅格数据格式之间的自由转换.可自由转换的格式包括: GeoTIFF. ERDAS img. ENVI img. PIE支持算法功能的执行,下面对影像格式转 ...
- MySql——Explain执行计划详解
使用explain关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的,分析你的查询语句或是表结构的性能瓶颈. explain执行计划包含的信息 其中最重要的字段为:i ...
- Oracle RAC集群搭建(三)--挂载磁盘
一,磁盘配置 查看由上回配置的共享磁盘,一共三块-----以下所有内容均两台物理机都需要操作 查看磁盘id [root@rac2 ~]# /usr/lib/udev/scsi_id -g -u /de ...
- oracle 单实例DG(配置篇二)
一,DG搭建实例--主库配置 one : 归档配置 01,查看归档 1 select log_mode,force_logging from v$database; 02,开启归档 关闭数据库重新启 ...