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 ...
随机推荐
- 【DP】【单调队列】洛谷 P2216 [HAOI2007]理想的正方形 题解
算是单调队列的复习吧,不是很难 题目描述 有一个$a\times b$的整数组成的矩阵,现请你从中找出一个$n\times n$的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入 ...
- HDU - 2604 矩阵快速幂 字符串递推 两种解法
记dp[i]为长度i且符合题意的方案数,dp[n]就是解 符合方案的是不含fmf和fff子串的字符串 考虑如何从前面几项递推出后面第i项 (★表示存在生成的非法方案)←其实没啥用处 i=1时 m③ f ...
- SQL数据库查询一张表新建一个排序字段并根据某列的排序存储排序值
现在有一张表如下Id Name Age Classify Score1 张一 18 一班 122 张二 17 二班 19 3 张三 19 三班 30 我跟据他们的分数进行排名 再去新建一个列存储排序值 ...
- PhpExcel中文帮助手册|PhpExcel使用方法 ( 后面有部分没有显示出来 可以编辑中看到!!)
下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...
- 【研究】CVE-2015-1635-HTTP.SYS远程执行代码漏洞(ms15-034)
1.1.1 漏洞描述 在2015年4月安全补丁日,微软发布的众多安全更新中,修复了HTTP.sys中一处允许远程执行代码漏洞,编号为:CVE-2015-1635(MS15-034 ).利用HTTP. ...
- SQL Server Reporting Service(SSRS) 第七篇 常见错误汇总
1. The current action cannot be completed. The user data source credentials do not meet the requirem ...
- python查看模块版本及所在文件夹
# 以Numpy为例 第一种方法:import numpy as np np.__version__ >>> '1.12.1' np.__file__ >>> '/ ...
- Echart 动态生成series数据
要做成页面只传入数据,js生成图表,如下图 下面是js代码 var LineChart = function (ID, title, axisData,seriesData) { var myChar ...
- HexChat访问Docker频道
1.使用HexChat登录Freenode.net 2.在Freenode下输入并回车: /msg NickServ REGISTER yourpassword youremail@example.c ...
- 九度oj题目1521:二叉树的镜像
题目1521:二叉树的镜像 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:2061 解决:560 题目描述: 输入一个二叉树,输出其镜像. 输入: 输入可能包含多个测试样例,输入以EOF ...