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'
}),
  1. 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 项目设置多页面的更多相关文章

  1. vue cli 3 & webpack-merge & webpack 3 & bug

    vue cli 3 & webpack-merge & webpack & bug bug webpack-merge & bug webpack-merge ??? ...

  2. 手动搭建Vue之前奏:搭建webpack项目

    手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name ...

  3. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  4. Vue Cli 3:创建项目

    一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...

  5. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  6. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  7. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  8. vue --- cli build 后的项目,图片路径出错

    今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自 ...

  9. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

随机推荐

  1. 【DP】【单调队列】洛谷 P2216 [HAOI2007]理想的正方形 题解

        算是单调队列的复习吧,不是很难 题目描述 有一个$a\times b$的整数组成的矩阵,现请你从中找出一个$n\times n$的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入 ...

  2. HDU - 2604 矩阵快速幂 字符串递推 两种解法

    记dp[i]为长度i且符合题意的方案数,dp[n]就是解 符合方案的是不含fmf和fff子串的字符串 考虑如何从前面几项递推出后面第i项 (★表示存在生成的非法方案)←其实没啥用处 i=1时 m③ f ...

  3. SQL数据库查询一张表新建一个排序字段并根据某列的排序存储排序值

    现在有一张表如下Id Name Age Classify Score1 张一 18 一班 122 张二 17 二班 19 3 张三 19 三班 30 我跟据他们的分数进行排名 再去新建一个列存储排序值 ...

  4. PhpExcel中文帮助手册|PhpExcel使用方法 ( 后面有部分没有显示出来 可以编辑中看到!!)

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  5. 【研究】CVE-2015-1635-HTTP.SYS远程执行代码漏洞(ms15-034)

    1.1.1  漏洞描述 在2015年4月安全补丁日,微软发布的众多安全更新中,修复了HTTP.sys中一处允许远程执行代码漏洞,编号为:CVE-2015-1635(MS15-034 ).利用HTTP. ...

  6. SQL Server Reporting Service(SSRS) 第七篇 常见错误汇总

    1. The current action cannot be completed. The user data source credentials do not meet the requirem ...

  7. python查看模块版本及所在文件夹

    # 以Numpy为例 第一种方法:import numpy as np np.__version__ >>> '1.12.1' np.__file__ >>> '/ ...

  8. Echart 动态生成series数据

    要做成页面只传入数据,js生成图表,如下图 下面是js代码 var LineChart = function (ID, title, axisData,seriesData) { var myChar ...

  9. HexChat访问Docker频道

    1.使用HexChat登录Freenode.net 2.在Freenode下输入并回车: /msg NickServ REGISTER yourpassword youremail@example.c ...

  10. 九度oj题目1521:二叉树的镜像

    题目1521:二叉树的镜像 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:2061 解决:560 题目描述: 输入一个二叉树,输出其镜像. 输入: 输入可能包含多个测试样例,输入以EOF ...