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. 栈和递归的关系 144:Binary Tree Preorder Traversal

    前序遍历:根左右 //用栈来实现非递归解法/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeN ...

  2. XAML 绑定和结构体不得不说的问题

    遇见一个问题 如果用一个结构体struct.再用一个ListView,然后使用绑定. <Window x:Class="WpfApp1.MainWindow" xmlns=& ...

  3. javascript格式化时间(几秒钟前,几分钟前,几小时前,几天前...)

    beautify_time: function(timestamp) { var mistiming = Math.round(new Date() / 1000) - timestamp; var ...

  4. MyBatis模糊查询相关

    Mybatis模糊查询的实现不难,如下实例:在UserMapper.xml中根据用户名模糊查询用户: <!-- 模糊查询用户 --> <select id="findSom ...

  5. 向一个GitHub repository添加协作者

    第一步: 在协作者的机器(就是你的电脑啦)上创建一个ssh key (使用命令ssh-keygen) 第二步: 创建一个github账户 第三步: 把public-key添加到你的github用户账户 ...

  6. connection reset by peer, socket write error问题排查

    2018-03-15更新:弄明白connection reset产生的原因,见重新分析connection reset by peer, socket write error错误原因 在开发文件上传功 ...

  7. 【CAD】创建多行文本

    下面为OBJECT-ARX创建多行文本的代码,记录 McDbMText* Mx::AddMText(IN McDbBlockTableRecord* pBlkRec, IN LPCTSTR pszCo ...

  8. Unity3D第一课之自转与公转

    1.物体公转,即围绕一个中心物体旋转 public class gongzhuan : MonoBehaviour { public GameObject Axis;//轴,用于选择围绕中心 publ ...

  9. java使用poi.3.10读取excel 2007以上版本(xlsx格式)

    1.在使用过程中,一直报错 throw new ClassNotFoundException(name);原因:没有导入xmlbeans-2.6.0.jar包,建议在使用poi时,将所有包都导入进工程 ...

  10. Jedis Cluster源码分析

    最近一个项目用到Jedis客户端,需要对这个客户端进行改造.看了一下Jedis Cluster源码,做个记录 首先,说核心内容, 在Jedis源码中,关于cluster有个两个重要的map.一个是no ...