webpack多页面配置

webpack多页面配置

主要是入口 entry 和 plugins 下面的 html 配置 , 一个 html 模板对应一个 js 入口文件 , 多个 html 模板就需要配置和这个 html 模板相同名字的 js 入口文件 ,也可以吧这个 js 入口文件看成是这个 html 模板的总配置文件 , 在这个 js 入口文件中可以引入多个其他 js css 文件完成业务需求 。
下面上具体配置：

文件目录

webpack.config.js 代码

const path = require('path'); //路径解析模块
const generateEntry = require('./generateEntry') //引入 入口配置
const generateTemplate = require('./generateTemplate') //引入 html自动生成打包配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //webpack 官网搜索 MiniCssExtractPlugin 查看流程

const entry = generateEntry() //调用入口配置
const template = generateTemplate(entry) // 调用html自动生成打包配置 入口的配置从 entry 里来

module.exports = {
  // 编译模式
  mode: 'development',
  // 配置js模块入口。//应为是多页面的开发，所以output选择以对象的形式
  entry,
  // 文件输出相关配置
  output: {
    // path: path.join(__dirname, './dist'),
    filename: '[name].[chunkhash:8].js',//这是文件输入的文件名，[name]是入口的属性名，[chunkhash:8]可以生成随机数字 :8 表示随机生成8位
    // chunkhash的好处就是文件的内容发生变化 chunkhash 就会发生变化，本地的 缓存就不会在使用了，就是重新请求这个文件
  },
  //代码报错方便调试
  devtool: 'source-map',
  // 模块解析相关配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src') //以后在导入模块的时候就可以使用到 @ 符号
    },
    extensions: ['.js'] //配置文件的后缀 可以忽略 js 文件的后缀
  },
  // 文件类型解析相关。//可以配置一些文件类型。配置相关的 Loaders 对文件的类型去解析
  module: {
    rules: [
      { //有些浏览器不能解析es6语法 旧可以使用到 babel 。打开 babel 官网 -》 打开设置 -》 找到 wenpack 按照提示流程 先 npm 然后 复制配置
        // babel 需要 :
        // 1. npm install --save-dev babel-loader @babel/core
        // 1. npm install @babel/preset-env --save-dev 预顺 会根据js文件类型的文件进行怎样的编译。详细官网了解
        // 1. 在根目录创建 babel.config.json 的文件 在里面复制官网的配置
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/i, //说明：以 .css 后缀结尾的文件名就使用这个 loader 解析。
        /**
         * css-loader 这个 loader 它的解析顺序是从右到左的,
         * 吧js中导入的js文件进行相关的编译,
         * 然后通过 MiniCssExtractPlugin.loader 这个命令把它提取到一个独立的文件
         * **/
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
            /**
       *  MiniCssExtractPlugin.loader 和 style-loader 的区别是：
       *  MiniCssExtractPlugin.loader 假如 html 文件引入了多个 css 它会吧这些 css 打包放在同一个路径下面
       *  style-loader 打包会吧引入的css文件提取到 html 文件中放入到 <style> 标签中
       *  npm 官网 查看 sass-loader 详细用法
       * **/
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,  // 这边我们不用 style-loader 换成 MiniCssExtractPlugin.loader
          // "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              additionalData: "@import '@/style/variable.scss';", // 这个配置项可以配置公共主题样式,会在所有 sass 文件的头部添加这边配置的路径(换成自己的路径)
            },
          },
        ]
      },
    ]
  },
  //配置开发服务的一些配置
  devServer: {
    host: 'localhost', //开发的域名
    port: 8089, //端口号
    open: true //是否自动打开浏览器
  },
  // 插件
  plugins: [
    // html打包配置
    ...template,
    new MiniCssExtractPlugin() //实例化一下 MiniCssExtractPlugin 的插件
  ]

}

generateEntry.js 代码

//自动生成入口配置
const path = require('path') //路径解析模块
const fs = require('fs') //文件系统模块

const jsPath = path.join(__dirname, '../src/js')   //定义js路径

//读取 js 目录下的所有文件
function generateEntry () {
  let jsFiles = fs.readdirSync(jsPath) //拿到js路径下面的所有js文件
  jsFiles = jsFiles.filter(filename => {
    return /\.js$/.test(filename) //过滤获得以 js 为后缀类型的文件
  })

  // 吧 js 文件合并为 entry 的配置
  return jsFiles.reduce((result, filename) => { //把这个数组合并成一个对象
    const [point] = filename.split('.') //吧后缀和文件名以 . 进行切分成一个数组
    result[point] = path.join(jsPath, filename)
    return result
  }, {})
}

// 实例：entry的对象配置 键(js文件名) 值（路径）对
// entry: {
//   index: path.resolve(__dirname, '../src/js/index.js'),
//   adout: path.resolve(__dirname, '../src/js/adout.js')
// },




module.exports = generateEntry

generateTemplate.js 代码

// html自动生成打包配置
const path = require('path') //路径解析模块
const fs = require('fs') //文件系统模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); //html打包插件

const templatePath = path.resolve(__dirname, '../src/views') //html模板的原路劲

function generateTemplate (entry) {
  const keys = Object.keys(entry) //吧入口的 key 取出来
  let files = keys.map(key => `${key}.html`) //转换为模板的文件名
  //判断模板文件是否存在并进行过滤
  files = files.filter(filename => fs.existsSync(path.join(templatePath, filename)))
  return files.map(filename => new HtmlWebpackPlugin({//吧文件每一项都处理一下,生成html配置项
    template: path.resolve(templatePath, filename), //文件路径
    filename, //输出的文件名
    chunks: [filename.split('.')[0]] //这个html文件里面需要包含哪些 js 文件。数组里面加入 js 文件名就好
  }))
}
module.exports = generateTemplate