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. POJ - 1733 离散化 并查集

    题意:求问数列区间奇偶信息正确与否 和上一题一样(甚至弱化),加个离散就ok啦 #include<iostream> #include<algorithm> #include& ...

  2. HDU - 6183 动态开点线段树 || 令人绝望的线段树

    一看C才[0,50],肯定要开51棵线段树维护y区间的最小x值啦 是男人就上51棵..等等空间爆几倍了 动态开点!51棵线段树用全局节点变量控制,有点像主席树 清空工作很简单,把51个树根清掉然后回收 ...

  3. mysql命令查询表的个数

    https://blog.csdn.net/xiao__ge/article/details/56671221 语句如下: SELECT count(TABLE_NAME) FROM informat ...

  4. log4j详解与实战

    [转自] http://www.iteye.com/topic/378077 log4j是一个非常强大的log记录软件,下面我们就来看看在项目中如何使log4j. 首先当然是得到log4j的jar档, ...

  5. jmeter发送邮件的模板

    <hr/> (本邮件是程序自动下发的,请勿回复!)<br/><hr/> 项目名称:$PROJECT_NAME<br/><hr/> 构建编号: ...

  6. PIE SDK文本元素的绘制

    1. 功能简介 在数据的处理中会用到文本元素的绘制,利用ITextElement文本元素接口进行绘制,目前PIE SDK支持ITextSymbol符号接口,TextSymbol对象是用于修饰文字元素对 ...

  7. PIE SDK影像格式转换

      1.算法功能简介 影像格式转换可以实现通用栅格数据格式之间的自由转换.可自由转换的格式包括: GeoTIFF. ERDAS img. ENVI img. PIE支持算法功能的执行,下面对影像格式转 ...

  8. MySql——Explain执行计划详解

    使用explain关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的,分析你的查询语句或是表结构的性能瓶颈. explain执行计划包含的信息 其中最重要的字段为:i ...

  9. Oracle RAC集群搭建(三)--挂载磁盘

    一,磁盘配置 查看由上回配置的共享磁盘,一共三块-----以下所有内容均两台物理机都需要操作 查看磁盘id [root@rac2 ~]# /usr/lib/udev/scsi_id -g -u /de ...

  10. oracle 单实例DG(配置篇二)

    一,DG搭建实例--主库配置 one : 归档配置 01,查看归档  1 select log_mode,force_logging from v$database; 02,开启归档 关闭数据库重新启 ...