webpack多页面配置

2026-08-30T00:00:00+00:00

webpack多页面配置

之前都是使用脚手架直接生成的webpack配置，然后根据需求适当调整便使用了。最近空闲下来，然后就想从零开始写一个webpack配置，在此记录一下配置过程以及遇到的一些问题吧。

node环境、npm或者yarn包管理器
创建一个新文件夹，然后使用npm或者yarn初始化
添加webpack依赖，创建一个webpack.config.js文件。顺便创建文件目录等
根据需要安装插件，目前我所用的到插件有

{
  "name": "interview",
  "version": "1.0.0",
  "description": "面试题记录",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "glob": "^7.1.7",
    "html-loader": "^2.1.2",
    "node-sass": "^6.0.0",
    "postcss": "^8.3.0",
    "postcss-loader": "^5.3.0",
    "postcss-px2rem": "^0.3.0",
    "sass": "^1.34.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack-dev-server": "^3.11.2"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "copy-webpack-plugin": "^9.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.6.0",
    "optimize-css-assets-webpack-plugin": "^6.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0"
  }
}

其中一些loader，例如css-loader、style-loader等都是针对于css处理的，因为extract-text-webpack-plugin在webpack4中使用存在一些问题，而且官方建议使用mini-css-extract-plugin插件，所以我这里就使用官方推荐了。
@babel/core、@babel/preset-env等是针对编译js所引入的包处理
webpack-dev-server开发使用的本地服务，可以配置端口号、热更新等服务

遇到的问题：

~~px转rem插件无法处理sass~~改用webpack-px-to-rem
html无法进行热更新（将热更新关闭，使用页面自动刷新，比较耗费性能）

webpack.config.js文件内容

/*
 * @Author: PrendsMoi
 * @GitHub: https://github.com/PrendsMoi
 * @Blog: https://liuhgxu.com
 * @Description: webpack配置
 * @FilePath: /interview/webpack.config.js
 * @Date: 2021-05-30 11:27:51
 * @LastEditors: PrendsMoi
 * @LastEditTime: 2021-06-13 12:03:35
 */
const webpack = require('webpack')
const path = require('path')
const glob = require('glob')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

// 获取多页面
const getPages = (argv) => {
  const isDev = argv.mode === 'development'
  const views = glob.sync('src/views/**/*.html')
  const viewJs = glob.sync('src/views/**/*.js')
  const config = {
    hash: true,
    inject: true,
    minify: {
      removeComments: !isDev,
      collapseWhitespace: !isDev
    }
  }
  const entries = {}
  const htmls = []
  views.forEach(item => {
    const fileInfo = path.parse(item)
    console.log(viewJs.includes(`${fileInfo.dir}/${fileInfo.name}.js`))
    if (viewJs.includes(`${fileInfo.dir}/${fileInfo.name}.js`)) {
      entries[fileInfo.dir.split('/').slice(-1)[0]] = `./${item}`.replace('.html', '.js')
    }
    htmls.push(new HtmlWebpackPlugin({
      ...config,
      filename:  `${fileInfo.name}.html`,
      template: `./${fileInfo.dir}/${fileInfo.name}.html`,
      chunks: [ 'vendor', 'commons', fileInfo.name]
    }))
  })
  const entry = Object.assign({'babel-polyfill': ['babel-polyfill'],commons: './src/app.js'}, entries)
  return {
    entries: entry,
    htmls
  }
}
module.exports = (env, argv) => ({
  entry:  getPages(argv).entries,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: (argv.mode === 'development') ? './js/[name].js' : './js/[name].[contenthash].js',
    chunkFilename: (argv.mode === 'development') ? './js/[name].js' : './js/[name].[contenthash].js',
    publicPath: (argv.mode === 'development') ? '' : './'
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          (argv.mode === 'development') ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { importLoaders: 2 }
          },
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'expanded'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({
                  browsers: ['last 10 versions', 'ie >= 9'],
                  flexbox:true,
                  remove: false
                }),
                // require('postcss-px2rem')({remUnit: 75})
              ]
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            sources: false
          }
        }
      },
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: 'babel-loader'
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      },
      {
        test: /\.(woff2|woff|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  resolve: {//解析模块可选项
  },
  plugins: [
    ...getPages(argv).htmls,
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({filename:(argv.mode === 'development') ? "css/[name].css" : 'css/[name].[hash].css', chunkFilename: '[id].css'}),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, './src/assets'),
          to: 'assets',
          noErrorOnMissing: true
        }
      ],
      options: {}
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('postcss-px2rem')({remUnit: 37.5})
        ]
      }
    })
  ],
  devtool: (argv.mode === 'development') ? "eval" : "nosources-source-map",
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'async',
          name: 'commons',
          minChunks: 2,
          maxInitialRequests: 5,
          // minSize: 0
        },
        vendor: {
          test:/node_modules/,
          chunks:'all',
          name:'vendor',
          priority:10
        }
      }
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: (argv.mode === 'development') ? true : false
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,  //是否启用gzip
    host: 'localhost',
    port: 9000,
    hot: true, // 热更新
    open: true,
    overlay: true,
    inline: true,
    watchContentBase: true
  }
})

.babelrc文件

{
	"presets": ["@babel/preset-env"],
	"plugins": ["@babel/plugin-transform-runtime"]
}

PrendsMoi's Blog - webpack

webpack多页面配置

webpack多页面配置