vue2 多html项目,webpack4打包vue前端多页面项目

之前一直用的脚手架，这次自己搭建webpack前端项目，花费了不少心思，于是做个总结。

1.用法

项目结构如下：

project

|- bulid

|- public

|- css

|- js

|- page1.html

|- page2.html

...

|- public/

|- src

|- components/

|- css/

|- js/

|- page1.js

|- page2.js

...

|- package.json

|- package-lock.json

|- README.md

public文件夹存放一些静态文件，src文件夹存放源码。每个页面通过一个入口文件(page1.js，page2.js,..)生成vue实例，挂载到插件生成的html文件的#app元素上。

安装依赖

$ npm install

进入开发模式

$ npm run start

浏览器会打开 http://localhost:3000 ,这时页面一片空白，显示 cannot get几个字。不要慌，在url后面加上 /page1.html ,回车，便可看见我们的页面。 这是因为我把开发服务器的主页设置为 index.html ，而本例中页面为 page1.html,page2.html,因此会显示一片空白。

开发完成了，构建生产版本：

$ npm run build

这会产生一个build/文件夹，里面的文件都经过优化，服务器响应的资源，就是来自于这个文件夹。

2.介绍

2.1 webpack基础配置

我们的开发分为生产环境和开发环境，因此需要有2份webpack的配置文件(可能你会想用env环境变量，然后用3目运算符根据env的值返回不同值。然而这种方法在webpack导出模块的属性中无效，我试过~~~)。这里我们拆分成3个文件，其中 webpack.common.js 是常规的配置，在两种环境下都会用到， webpack.dev.js 和 webpack.prod.js 则是在2种环境下的特有配置。这里用到 webpack-merge 这个包，将公共配置和特有配置进行合成。

webpack.common.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const devMode = process.env.NODE_ENV !=='production';

// 需要被打包入口文件数组

// 数组元素类型 {string|object}

// string:将以默认规则生成bundle

// object{filename|title|template} 生成的bundle.html的文件名|title标签内容|路径 /public 下的模板文件(需指定文件后缀)

const entryList = [

'page1',

'page2',

];

/**

* @param {array} entryList

* @param {object} option:可选 要手动配置的内容

*/

const createEntry = (list = [], option = {}) => {

const obj = {};

list.forEach((item) => {

const name = item.filename ? `./js/${item.filename}` : `./js/${item}`;

obj[name] = path.resolve(__dirnam