webpack4如何打包vue前端多頁面項目

這篇文章主要介紹webpack4如何打包vue前端多頁面項目，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1.用法

項目結構如下：

project
 |- bulid          <!-- 這個目錄是自動生成的-->
    |- public
    |- css
    |- js
    |- page1.html       <!-- 插件生成的html文件-->
    |- page2.html       <!-- 插件生成的html文件-->
    ...
 |- public/         <!-- 存放字體、圖片、網頁模板等靜態資源-->
 |- src           <!-- 源碼文件夾-->
    |- components/
    |- css/
    |- js/
    |- page1.js        <!-- 每個頁面唯一的VUE實例，需綁定到#app-->
    |- page2.js        <!-- 每個頁面唯一的VUE實例，需綁定到#app-->
    ...
 |- 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(__dirname, './src', `./${item}.js`);
  });
  return Object.assign(obj, option);
};
module.exports = {
  entry: createEntry(entryList),
  output: {
    path: path.resolve(__dirname, './build'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'public/fonts/[name].[ext]',
          },
        },
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'public/images/[name].[ext]',
          },
        },
      },
    ],
  },
  plugins: createPluginInstance(entryList).concat([
    // vue SFCs單文件支持
    new VueLoaderPlugin(),
  ]),
};

這里我們沒有進行css文件的配置，是因為生產環境下需要優化、提取，所以在另外2個文件分別配置。

webpack.dev.js
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        use: [
          'vue-style-loader',
          'css-loader', 
          'postcss-loader',
          'less-loader'
        ],
      },
    ],
  },
  resolve: { alias: { vue: 'vue/dist/vue.js' } },
});

vue分為開發版本和生產版本，最后一行是根據路徑指定使用哪個版本。

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
  },
  resolve: { alias: { vue: 'vue/dist/vue.min.js' } },
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader', 
          'postcss-loader',
          'less-loader'
        ],
      },
    ],
  },

在production環境下，我們使用了哈希值便于緩存，以后往生產環境下添加其他資源都會如此。

2.2 解決文件輸出目錄

我們期待的build文件夾具有如下結構：

build
  |- css/
  |- js/
  |- page1.html
  |- page2.html
  ...

即文件按照類型放在一起，html文件直接放在該目錄下，可是我們上面的配置的輸出結果是混合在一起的。由于name屬性既可以是文件名，也可以是 /dir/a 之類帶有路徑的文件名，我們根據這個特點做出一些修改。

直接對output的輸出路徑更改

比如改為 build/js ,其他資源利用相對路徑比如 ../page1.html 進行修改。我一開始就這樣做的，但最終會導致開發服務器無法響應文件的變化，因為他只能針對輸出目錄下的文件進行監聽，該目錄之上的文件變化無能為力。

修改入口名稱

這也是我們的最終解決方案。將原來的文件名 page1 修改為 /js/page1 ，最終輸出的js文件便都會放在js文件夾里。在生產環境下我們通過 MiniCssExtractPlugin 這個插件提取js文件中的css，這是該插件的配置：

new MiniCssExtractPlugin({
      filename:'[name].[contenthash].css'
    })

這里的name就是當初入口的名字，受到入口名稱更改的影響，上面最終會變成 js/page1.131de8553ft82.css ，并且該占位符[name]只在編譯時有效，這意味著無法用函數對該值進行處理。因此不能使用[name]占位符達到想要的目的，干脆只用[id]。

new MiniCssExtractPlugin({
      filename:'/css/[id].[contenthash].css'
    })

3.代碼分割

在webpack4中使用optimization.splitChunks進行分割.

//webpack.common.js
const path = require('path');
module.exports = {
  // ... 省略其他內容
  optimization:{
    runtimeChunk:{
      name:'./js/runtime'
    },
    splitChunks:{
      // 避免過度分割，設置尺寸不小于30kb
      //cacheGroups會繼承這個值
      minSize:30000,
      cacheGroups:{
        //vue相關框架
        main:{
          test: /[\\/]node_modules[\\/]vue[\\/]/,
          name: './js/main',
          chunks:'all'
        },
        //除Vue之外其他框架
        vendors:{
          test:/[\\/]node_modules[\\/]?!(vue)[\\/]/,
          name: './js/vendors',
          chunks:'all'
        },
        //業務中可復用的js
        extractedJS:{
          test:/[\\/]src[\\/].+\.js$/,
          name:'./js/extractedJS',
          chunks:'all'
        }
        
      }
    }
  }
};

runtimeChunk包含了一些webapck的樣板文件，使得你在不改變源文件內容的情況下打包，哈希值仍然改變，因此我們把他單獨提取出來，點這兒了解更多。 cacheGroups用于提取復用的模塊，test會嘗試匹配（ 模塊的絕對路徑||模塊名 ），返回值為true且滿足條件的模塊會被分割。滿足的條件可自定義，比如模塊最小應該多大尺寸、至少被導入進多少個chunk（即復用的次數）等。默認在打包前模塊不小于30kb才被會分割。

4.樹抖動

在package.json里加入

"sideEffects"：["*.css","*.less","*.sass"]

該數組之外的文件將會受到樹抖動的影響——未使用的代碼將會從export導出對象中剔除。這將大大減少無用代碼。如果樹抖動對某些文件具有副作用，就把這些文件名放進數組以跳過此操作。css文件（包括.less,.sass）都必須放進來，否則會出現樣式丟失。

5. 插件的使用

5.1 clean-webpack-plugin

每次打包后都會生成新的文件，這可能會導致無用的舊文件堆積，對于這些無用文件自己一個個刪太麻煩，這個插件會在每次打包前自動清理。實際中，我們不想在開發環境下清理掉build命令生成的文件，因此只在生產環境使用了這個插件。

5.2 html-Webpack-plugin

我們的源碼目錄中并沒有html文件，打包后的多個html文件，就是我們用這個插件生成的。

//webpack.common.js
// ...省略上面已經出現過的內容
//每個html需要一個插件實例
//批量生成html文件
const createPluginInstance = (list = []) => (
  list.map((item) => {
    return new HtmlWebpackPlugin({
      filename: item.filename ? `${item.filename}.html` : `${item}.html`,
      template: item.template ? `./public/${item.template}` :       './public/template.html',
      title: item.title ? item.title : item,
      chunks: [
        `./js/${item.filename ? item.filename : item}`,
        './js/extractedJS',
        './js/vendors',
        './js/main',
        './js/runtime',
        './css/styles.css',
        devMode ? './css/[id].css' : './css/[id].[contenthash].css',
      ],
    });
  })
);

默認會將所有的入口文件，代碼分割后的文件打包進一個html文件里，通過指定 chunks 屬性來告訴插件 只包含 哪些塊，或者exludeChunks指定不應包含那些chunks。這里有個小問題，我們無法讓文件剛好只包含他需要的塊。若想不包含未使用的chunks，只能根據實際情況手動配置，用這個函數批量生成的文件，總會包含所有的公共打包文件。

5.3 mini-css-extract-plugin (prooduction)

該插件用于提取js文件中的css到單獨的css文件中。

//webpack.prod.js
//...省略其他內容
plugins:[
    new CleanWebpackPlugin('build'), 
    // 提取css
    new MiniCssExtractPlugin({
      filename:'./css/[id].[contenthash].css'
    }),
    //優化緩存
    new webpack.HashedModuleIdsPlugin()
  ]

5.4 optimize-css-assets-webpack-plugin （production）

用于精簡打包后的css代碼，設置在配置optimization的minimizer屬性中，這將會覆蓋webpack默認設置，因此也要同時設置js的精簡工具(這里我們用uglifyplugin插件)：

optimization: {
    minimizer:[
     new UglifyJsPlugin({
      cache: true,
      parallel: true
     }),
     new OptimizeCSSAssetsPlugin()
    ]
  }

6.開發服務器、熱模塊替換 (development)

webpack.dev.js中增加如下內容即可：

//...省略其他內容
devServer:{
    index:'index.html',
    hot:true,
    contentBase:path.resolve(__dirname,'./build'),
    port:3000,
    noInfo:true
  },
plugins:[
    new webpack.HotModuleReplacementPlugin()
  ]

使用開發服務器可以在我們修改了源文件后自動刷新,因為是將數據放在內存中，因此不會影響硬盤中build文件夾。熱模塊替換還需要在源文件做相應修改。我們也為動態導入語法進行了相應配置。

7.其他

public用于存放靜態資源，打包后也會在build/下創建一個同名文件夾，里面存放的是public會被使用到的資源。如果在.css文件里引用了public里的資源，如圖片，添加url的時候要使用絕對路徑：

<!-- src/css/page1.css -->
.bg-img {
  background-image:url(/public/images/1.jpg)
}

這樣通過 http/https 打開的時候就能正常使用，如果是以文件形式打開（比如打包后雙擊page1.html），會發現瀏覽器顯示無法找到資源。通過導入圖片作為變量引用（ import name from path ），既可使用絕對路徑，也可使用相對路徑。

以上是“webpack4如何打包vue前端多頁面項目”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！