Webpack 多页面应用(多 HTML 页面 html-webpack-plugin )

Webpack 4.0 开始,为了应对 Parcel 等的挑战,配置越来越简单,甚至可以“零配置”。


一个简单的 Webpack.config.js 配置文件 :

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};


添加上常用 loader 后的配置文件:

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

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
      { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, use: ['file-loader'] },
      { test: /\.(html)$/, use: {loader: 'html-loader'}}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title:'Home', 
      filename: 'index.html', 
      template: 'src/index_template.html'
    })
  ],

  //引入绝对路径
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') }
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }
};


一个多页面配置文件:

如果不指定output.filename,默认的filename是"main.js",每个页面都会包含。If you have multiple webpack entry points, they will all be included with script tags in the generated HTML.


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

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    // filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
      { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, use: ['file-loader'] },
      { test: /\.(html)$/, use: {loader: 'html-loader'}}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title:'Home', 
      filename: 'index.html', 
      template: 'src/index_template.html',
    }),
    new HtmlWebpackPlugin({
      title:'Sub Page',
      filename: 'subpage.html', 
      template: 'src/pages/subpage.html',
    }),
    new HtmlWebpackPlugin({
      title:'404 页', 
      filename: '404.html',
      template: 'src/pages/404.html',
    }),
  ]
  ...
};



指定 chunk 文件:

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

module.exports = {
  mode: 'development',
  // entry: './src/index.js',
  entry: {
    index:'./src/index.js',
    subpage:'./src/pages/subpage.js',
    "404":'./src/pages/404.js'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    // filename: 'bundle.js'
    filename: 'js/[name]-[chunkhash].js',
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
      { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, use: ['file-loader'] },
      { test: /\.(html)$/, use: {loader: 'html-loader'}}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title:'Home', 
      filename: 'index.html', 
      template: 'src/index_template.html',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      title:'Sub Page',
      filename: 'subpage.html', 
      template: 'src/pages/subpage.html',
      chunks: ['subpage']
    }),
    new HtmlWebpackPlugin({
      title:'404 页', 
      filename: '404.html',
      template: 'src/pages/404.html',
      chunks: ['404']
    }),
  ],

  //引入绝对路径
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') }
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }
};




参考:

https://github.com/jantimon/html-webpack-plugin