接 | cnblogs.com/

言

现实应用环境，会有使用vue开发多页面环境的需求，这些页面拥有共同的依赖，但是却又都是独立的，为了实现vue的多页面打包，可以使用webpack，同时又因为vue-cli自带了webpack，所以我们还可以采用vue-cli本身的配置文件进行多页打包操作。

VUE3多页面打包

方式一：webpack配置

webpack安装参考：[安装 | webpack 中文网]。

直接在package.json同级目录下创建webpack.config.js(创建一个webpack的配置文件即可)，然后在配置文件内输入内容：

/**

*配置

* */

/*path处理模块，可有可无，主要是为了方便路径链接，因为在配置文件内对于参数而言只接受绝对路径，利用path.resovle(__dirname, 相对路径)可以自动生成绝对路径，此模块为webpack自带*/

let path = require('path')

/*vue-loader,vue加载插件，使用npm install vue-loader直接安装即可

*同时对于vue3而言需要单独安装@vue/compiler-sfc,vue2的话是vue-compiler

*/

let vueLoader = require('vue-loader')

/*html-webpack-plugin,模版处理插件，如果存在多个html模版就需要安装

*直接用npm install html-webpack-plugin

*/

let htmlWebPackPlugin = require('html-webpack-plugin')

/**

*compression-webpack-plugin，这是一个可选插件，目的是为了对打包后的文件进行压缩，因为打包后会形成一个大的js文件，文件越大网页打开速度越慢。

*/

let compressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {

/*打包入口，多入口就是从这里来的，当打包时，会去找到每一个入口文件，

并根据这个文件依赖去打包，每一个入口写一个key-value对*/

entry: {

/*key-value格式

key就是标识名称，之所以写成 "/js/index/index" 格式是为了在打包时将文件输出到对应目录，

默认情况下，文件只会输出到output所指定的目录下，之后便没有区分，这里用“/”分割就是利用输出路径时小漏洞形成目录*/

/*value是要打包入口的地址，利用path.resolve处理绝对路径问题*/

'/js/index/index': path.resolve(__dirname, './src/entry/index.js'),

'/js/index2/index2': path.resolve(__dirname, './src/entry/index2.js')

},

/*文件输出目录，只能有一个，[官方要求](https://www.webpackjs.com/concepts/output/)*/

output: {

/*输出的入口文件的名称，【name】就是刚才上面我们指定的key值，这个值不能通过外部变量或数组动态修改*/

filename: '[name].js',

/*输出目录，也需要指定绝对路径*/

path: path.resolve(__dirname, './dist')

},

/*插件配置与加载*/

plugins: [

/*加载vue文件打包插件*/

new vueLoader.VueLoaderPlugin,

/*html模版打包插件，有几个入口就要用几个，书写顺序与上方入口顺序一致，

如果只有一个，那么所有入口都会通过这一个模版打包*/

new htmlWebPackPlugin({

template: path.resolve(__dirname, './public/html/index.html'),

filename: 'index.html'

}),

new htmlWebPackPlugin({

template: path.resolve(__dirname, './public/html/index2.html'),

filename: 'xxjszx.html'

}),

/*加载压缩插件，将test中查找到的文件类型全部压缩，test的值对应的是一个正则表达式*/

new compressionWebpackPlugin({

test: /\.js$|\.html$|\.css$|\.jpg$|\.png$/,

threshold: 100000,

deleteOriginalAssets: false

})

],

module:{

/*文件处理规则*/

rules: [

{

/*css处理规则，直接用css-loader插件默认加载，css-loader插件也需要使用npm安装*/

test: /\.css$/,

use: ['style-loader', 'css-loader']

},

{

/*vue文件加载规则*/

test: /\.vue$/,

use: ['vue-loader']

},

{

/*图片文件处理规则，使用url-loader插件改写文件名并放到指定位置*/

test: /\.(jp?g|png|svg|ico)$/,

use: 'url-loader?limit=2048&name=./img/[hash:8].[name].[ext]'

}

]

}

}

方式二：vue-cli配置

vue-cli目前已不提供vue.config.js配置文件，但是我们可以手动在package.json同级目录创建一个，创建成功后此文件将作为优先调用对象，结构与内容同webpack类似（其实就是内置的webpack配置），可参考官网配置解释：配置参考 | Vue CLI：

module.exports = {

/*pages指定入口，同样是key-value对的形式，只不过是将配置集成到了一起*/

pages: {

/*名称*/

xxjszx: {

/*入口，同上面的entry*/

entry: 'src/entry/xxjszx.js',

/*模版，同上面的html-webpack-plugin插件*/

template: 'public/html/xxjszx.html',

/*输出后的文件名称*/

filename: 'xxjszx.html',

},

index: {

entry: 'src/entry/index.js',

template: 'public/html/index.html',

/*这里是html输出到的文件地址，也可以利用/斜杠表示目录，例如index/index.html就代表创建index目录并把index.html放到目录下*/

filename: 'index.html',

}

}

}

vue3多页面直接运行

使用vue.config.js配置好后，直接使用npm run dev命令即可，对应vue的vue-cli-service serve，运行可根据pages定义的key值进行路由调用页面，key值为index那么调用格式就是/index,默认页面是index路由对应页面。如果采用webpack打包是无法直接运行多页面的，需要在打包后部署到服务器上。

篇文章了解了怎么去配置以及运行webpack，但是由于简单的打包js，有时候我们有很多css文件需要去打包，这个怎么办呢？不用着急，这边文章就是来一起学习怎么去简单的打包css文件。

配置webpack环境

首先创建空文件夹通过命令全局安装webpack（如果你已经全局安装过webpack，可以直接进行下一步初始化根目录）

//全局安装
npm install -g webpack
//或者--淘宝镜像，速度比较快
cnpm install -g webpack

其次初始化你的文件根目录并且安装依赖

npm init //根目录初始化
npm install --save-dev webpack // 安装Webpack

然后创建你的项目

eg：在根文件夹下创建一个src文件夹，src文件夹里面可以放入你的源代码js，css等
 同样根目录下创建一个public文件夹，里面放入你的html文件它在这里目的在于引入打包后的js文件，这里我们先把 之后打包后的js文件命名为bundle.js

根目录下创建并配置webpack.config.js文件

const path=require('path');
module.exports={
 //JavaScript执行入口文件,
 entry:'./src/js/main.js',
 //需要指定一下输出的路径path和输出的文件名filename
 output:{
 filename:'bundle.js', //自定义输出文件名
 path:path.resolve(__dirname,'./public/js') //自定义输出文件所在目录
 },
 //设置mode
 mode: 'development' // 设置mode
}

Loader

基本环境配置好后，由于webpack本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。不可以直接打包css，所以我们需要使用到 css-loader 和 style-loader。，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

安装 css-loader 和 style-loader(全局安装需要参数 -g)。

cnpm install css-loader style-loader

执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。

接下来在src文件夹下的css文件夹里创建一个index.css文件

body{
 background: red;
}

同时配置入口文件main.js

require("!style-loader!css-loader!../css/index.css");//这个就是配置的css文件
document.write("Hello World!");

然后在根目录下运行webpack

webpack

输出成功后，打开你的html文件，即可看到带有css的打包过的项目！

配置文件

require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!，这样有些麻烦，我们可以通过配置文件来方便操作。

首先更改require CSS方式：

require("../css/index.css");

然后配置webpack.config.js文件

const path=require('path');
module.exports={
 //JavaScript执行入口文件,
 entry:'./src/js/main.js',
 //需要指定一下输出的路径path和输出的文件名filename
 output:{
 filename:'bundle.js', //自定义输出文件名
 path:path.resolve(__dirname,'./public/js') //自定义输出文件所在目录
 },
 //设置style-loader css-loader
 module:{
 rules: [
 {
 test: /\.css$/,
 use: [
 {
 loader: "style-loader"
 }, {
 loader: "css-loader"
 }
 ]
 }
 ]
 }
}

再次运行webpack，你会发现有神奇的效果。

开发环境

项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

webpack --progress --colors --watch

当然，我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

//安装
cnpm install webpack-dev-server -g
//运行
webpack-dev-server --progress --colors

在浏览器打开 http://localhost:8080/ 输出结果如下：

进入到相对应的文件打开你的项目