webpack4打包vue前端多页面项目

关于“webpack4打包vue前端多页面项目”的攻略，我会从以下几个方面进行详细讲解：

安装webpack及相关依赖
配置webpack
多页面配置
示例说明

下面我们将一步一步进行讲解。

1. 安装webpack及相关依赖

首先，我们需要全局安装webpack和webpack-cli，这里我使用的是webpack4版本：

npm install webpack webpack-cli -g

然后，我们需要安装一些额外的插件和loader，以便使用多页面配置和处理相关资源：

npm install html-webpack-plugin clean-webpack-plugin css-loader style-loader file-loader url-loader html-loader vue-loader vue-template-compiler webpack-dev-server -D

2. 配置webpack

在开始配置webpack之前，我们需要先创建一个webpack.config.js文件，在此文件中进行所有的Webpack配置。

首先，我们需要引入一些插件和依赖：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

然后，我们需要配置入口文件和输出目录：

module.exports = {
  entry: {
    index: './src/pages/index/index.js',
    about: './src/pages/about/about.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'
  },
  // ...
}

入口文件中，我们可以看到有两个入口：index和about分别代表了我们要配置的两个页面。

接下来，我们需要配置一下loader和对应的规则：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }
    ]
  },
  // ...
}

在配置规则时，我们主要是针对.html、.vue、.js、.css和各种图片文件进行了处理。

接下来，我们需要配置一下插件：

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      template: './public/about.html',
      filename: 'about.html',
      chunks: ['about']
    })
  ],
  // ...
}

插件方面我们主要是使用了vueLoaderPlugin、CleanWebpackPlugin和两个HtmlWebpackPlugin进行HTML模板的打包。

到这里，我们的Webpack配置已经完成，接下来我们来讲一下如何使用Webpack处理多页面项目。

3. 多页面配置

在准备开始多页面配置前，我们需要先准备一些相关文件和目录，例如：

/src
  /pages
    /index
      index.js
      App.vue
      /components
        Header.vue
        Footer.vue
    /about
      about.js
      /components
        Header.vue
        Footer.vue
      about.html
/dist
index.html

在以上目录结构中，我们可以看到我们使用了index和about两个页面，每个页面中都有各自的入口文件index.js和about.js，以及相关的Vue组件和页面模板。

接下来我们需要增加一些npm脚本来方便我们的开发和打包：

{
  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }
}

在完成以上的准备工作之后，我们就可以开始进行多页面配置了。

首先，在我们的webpack配置中，我们通过entry属性指定了两个入口文件，即index和about：

entry: {
  index: './src/pages/index/index.js',
  about: './src/pages/about/about.js'
}

接着，在plugins中，我们使用了两个HtmlWebpackPlugin来分别指定两个页面对应的HTML模板：

plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    filename: 'index.html',
    chunks: ['index']
  }),
  new HtmlWebpackPlugin({
    template: './public/about.html',
    filename: 'about.html',
    chunks: ['about']
  })
]

在这里，我们通过chunks属性指定了对应的入口文件和当前HTML模板的对应关系，这样Webpack就可以在编译时自动将各个页面对应的JS文件注入到HTML模板中了。例如，在index.html中，我们可以这样使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index Page</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="./index.[hash].js"></script>
</body>
</html>

最后，我们需要在页面入口文件中编写Vue实例，并将组件挂载到对应的DOM节点上：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
})

这样，我们就完成了Webpack4打包Vue前端多页面应用的配置和使用。

4. 示例说明

下面我们来看两个具体的示例。

在示例一中，我们已经在webpack.config.js文件中进行了Webpack的常规配置，然后在src目录下创建了两个页面index和about，每个页面中都有各自的入口文件index.js和about.js，以及相关的Vue组件和页面模板。在示例中我们演示了如何通过npm脚本启动Webpack本地开发服务器以及如何进行打包：

# 根据配置启动本地开发服务器
npm run dev

# 打包应用
npm run build

示例代码：webpack4-multi-page-demo

在示例二中，我们则使用了Webpack多页面应用的另一种方式，即使用glob模块自动扫描目录中的JS文件作为入口文件，避免了手工维护入口列表的麻烦。在示例中我们演示了如何使用glob模块扫描src/pages目录中的JS文件作为入口文件，然后使用new HtmlWebpackPlugin来自动生成HTML模板和注入到对应的JS文件中。

# 根据配置启动本地开发服务器
npm run dev

# 打包应用
npm run build

示例代码：webpack4-multi-page-demo-with-glob

至此，我已经介绍了如何使用Webpack4打包Vue前端多页面项目的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webpack4打包vue前端多页面项目 - Python技术站

webpack4打包vue前端多页面项目

1. 安装webpack及相关依赖

2. 配置webpack

3. 多页面配置

4. 示例说明

相关文章