多页面打包

最新推荐文章于 2023-04-25 17:54:32 发布
最新推荐文章于 2023-04-25 17:54:32 发布
阅读量87 收藏
点赞数
文章标签： webpack ViewUI
原文链接：http://www.cnblogs.com/QianDingwei/p/11197768.html
版权 
'use strict'

const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const setMPA = () => {
    const entry = {}
    const htmlWebpackPlugins = []

    const entryFiles = glob.sync(path.join(__dirname, '/src/*/index.js')) // 找到src下所有包含index.js的文件夹的路径是一个路径组成的数组

    console.log('entryFiles:', entryFiles)

    Object.keys(entryFiles).map(index => {
        const entryFile = entryFiles[index]   // 找到对应的路径
        const match = entryFile.match(/src\/(.*)\/index\.js/)

        const pageName = match && match[1]   // 文件名

        entry[pageName] = entryFile   // 文件名与对应的路径构成的对象

        htmlWebpackPlugins.push(
            new HtmlWebpackPlugin({
                template: path.join(__dirname, `src/${pageName}/index.html`),   // 模板文件
                filename: `${pageName}.html`,
                chunks: [pageName],
                inject: true,
                minify: {
                    html5: true,
                    collapseWhitespace: true,
                    preserveLineBreaks: false,
                    minifyCSS: true,
                    minifyJS: true,
                    removeComments: false
                }
            })
        )
    })
    return {
        entry,
        htmlWebpackPlugins
    }
}

const { entry, htmlWebpackPlugins } = setMPA()

module.exports = {
    entry: entry,
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {}
                    },
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {}
                    },
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')({
                                    overrideBrowserslist: [
                                        'Android 4.1',
                                        'iOS 7.1',
                                        'Chrome > 31',
                                        'ff > 31',
                                        'ie >= 8'
                                    ],
                                    grid: true
                                })
                            ]
                        }
                    },
                    {
                        loader: 'px2rem-loader',
                        options: {
                            remUnit: 75,
                            remPrecision: 8
                        }
                    }
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano')
        }),
        new CleanWebpackPlugin()
    ].concat(htmlWebpackPlugins)
}

 

'use strict'

const path = require( 'path')
const glob = require( 'glob')
const webpack = require( 'webpack')
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require( 'optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require( 'html-webpack-plugin')
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin')

const setMPA = () => {
     const entry = {}
     const htmlWebpackPlugins = []

     const entryFiles = glob. sync( path. join( __dirname, '/src/*/index.js')) // 找到src下所有包含index.js的文件夹的路径是一个路径组成的数组

     console. log( 'entryFiles:', entryFiles)

     Object. keys( entryFiles). map( index => {
         const entryFile = entryFiles[ index] // 找到对应的路径
         const match = entryFile. match( /src \/ ( . * ) \/ index \. js/)

         const pageName = match && match[ 1] // 文件名

         entry[ pageName] = entryFile // 文件名与对应的路径构成的对象

         htmlWebpackPlugins. push(
             new HtmlWebpackPlugin({
                 template: path. join( __dirname, `src/ ${ pageName } /index.html`), // 模板文件
                 filename: ` ${ pageName } .html`,
                 chunks: [ pageName],
                 inject: true,
                 minify: {
                     html5: true,
                     collapseWhitespace: true,
                     preserveLineBreaks: false,
                     minifyCSS: true,
                     minifyJS: true,
                     removeComments: false
                }
            })
        )
    })
     return {
         entry,
         htmlWebpackPlugins
    }
}

const { entry, htmlWebpackPlugins } = setMPA()

module. exports = {
     entry: entry,
     output: {
         path: path. join( __dirname, 'dist'),
         filename: '[name]_[chunkhash:8].js'
    },
     mode: 'production',
     module: {
         rules: [
            {
                 test: /.js $ /,
                 use: 'babel-loader'
            },
            {
                 test: /.css $ /,
                 use: [
                    {
                         loader: MiniCssExtractPlugin. loader,
                         options: {}
                    },
                     'css-loader'
                ]
            },
            {
                 test: /.less $ /,
                 use: [
                    {
                         loader: MiniCssExtractPlugin. loader,
                         options: {}
                    },
                     'css-loader',
                     'less-loader',
                    {
                         loader: 'postcss-loader',
                         options: {
                             plugins : () => [
                                 require( 'autoprefixer')({
                                     overrideBrowserslist: [
                                         'Android 4.1',
                                         'iOS 7.1',
                                         'Chrome > 31',
                                         'ff > 31',
                                         'ie >= 8'
                                    ],
                                     grid: true
                                })
                            ]
                        }
                    },
                    {
                         loader: 'px2rem-loader',
                         options: {
                             remUnit: 75,
                             remPrecision: 8
                        }
                    }
                ]
            },
            {
                 test: /. ( png | jpg | gif | jpeg ) $ /,
                 use: [
                    {
                         loader: 'file-loader',
                         options: {
                             name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
     plugins: [
         new MiniCssExtractPlugin({
             filename: '[name].css',
             chunkFilename: '[id].css'
        }),
         new OptimizeCssAssetsPlugin({
             assetNameRegExp: / \. css $ / g,
             cssProcessor: require( 'cssnano')
        }),
         new CleanWebpackPlugin()
    ]. concat( htmlWebpackPlugins)
}

转载于:https://www.cnblogs.com/QianDingwei/p/11197768.html

weixin_30699235
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack 多页面 打包
jiu_meng的博客
03-16 6639
最近有一个需求，需要把多页面使用webpack进行编译，但是网上进行多页面编译的资料很少，今天把自己配置的webpack多页面打包编译分享给大家demo地址：https://github.com/mengYu007/webpack3代码启动：    打开cmd进入文件目录npm install   编译文件：npm run build   启动文件：npm run start文件目录：packag...
webpack里如何实现多页面打包？会有哪些问题？
小王的技术库
08-24 839
我们在使用Webpack的项目中，比如react项目，或者umijs中，如果使用的是多页面，那么对于多页面的打包是怎么处理的呢？
webpack 3.X学习之多页面打包的方法
12-11
简介 我们开发不可能只写一个页面，每次都要写很多页面，这时为了开发效率，我们使用前端自动化工具webpack，那么webpack是如何打包页面的呢？又是如何打包多页面的呢？ 单页面打包 我们知道要打包单页面的方法，很简单，配置入口，和html插件， const HtmlWebpackPlugin = require('html-webpack-plugin'); const config = { entry:{ index:'./src/index.js' }, output:{ path: path.join(__dirname, 'dist'), filename:
多页面打包通用方案
weixin_44763349的博客
08-26 352
首先，我们需要新建一个webpack.mpa.config.js文件；其次，准备好对应的多个页面和对应的js,为了方便可以这样放置 总体思路是，通过借助glob，来匹配到我们文件的对应的js的地址（绝对路径），然后匹配到我们的文件名，循环形成entry和htmlWebpackPlugins。 上代码 const path = require("path"); const miniCssExtractPlugin = require("mini-css-extract-plugin"); const htm
vue+webpack支持多页面打包
GDUT_YIFEI
01-06 3074
开始上手vue，用vue-cli脚手架搭建的环境只支持单页面打包，每一次开发新的页面都需要重新搭建一套新的脚手架，很麻烦。所以决定改配置，支持多页面打包。也支持多文件夹嵌套打包。   上图是大致的项目结构。src/common 存放一些公共的资源，src/view 存放页面，每一个页面分别存放在一个文件夹下，支持路由。 1. 修改 build/util.js，新增暴露几个新接口，分别去获取
webpack多页面打包
u013666742的专栏
01-08 1318
webpack多页面打包
webpack打包jquery多页_webpack打包多页面的方式
weixin_39912984的博客
12-30 340
一开始接触webpack是因为使用Vue的关系，因为Vue的脚手架就是使用webpack构建的。刚开始的时候觉得webpack就是为了打包单页面而生的，后来想想，这么好的打包方案，只在单页面上使用是否太浪费资源了呢？如果能在传统多页面上使用webpack，开始效率是否会事半功倍呢？好在众多优秀的前端开发者已经写了许多demo和文章供人学习。我也写了一个小项目，希望对大家学习webpack有帮助。w...
webpack多页面打包方案
08-10
Webpack 的多页面打包方案通过配置多个 entry 点、使用 `HtmlWebpackPlugin` 和合理的优化策略，实现了对多个独立页面的高效构建。这不仅可以节省资源，提高用户体验，还能使项目结构更加清晰，便于管理和维护。在...
基于JavaScript的多页面打包模板
02-25
本主题将深入探讨“基于JavaScript的多页面打包模板”，这是一个为构建多个独立页面而设计的打包方案，旨在提高开发效率并优化资源管理。 **JavaScript与ECMAScript** JavaScript是一种解释型的、面向对象的、弱...
vue打包成多个html页面,vue+webpack4多页面打包配置
weixin_34122028的博客
06-04 1626
多页面配置通常有两种形式，一种是多页面多配置，一种是多页面单配置。因为webpack(3.1以上)可以直接处理一个配置对象的数组，所以可以为每个页面单独写一份配置。通常来讲，多配置的优点是配置灵活、独立，可以并行打包，从而提高打包速度，缺点是不能在多页面之间共享代码(一个页面加载了之后，下一个页面还得再加载一遍)；单配置的特点基本上是和多配置相对。具体使用哪一种形式，看具体业务情况。本文主要介绍的...
Vue PostCss插件——autoprefixer，自动补全css浏览器前缀
最新发布
qq_38210427的博客
04-25 1781
Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀。它是 Google 推荐的，并在Twitter和阿里巴巴中使用。可以实现css3代码自动补全，也可以运用到sass、less中前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。
前端多页面打包通用方案
weixin_44935752的博客
01-16 1728
前端多页面打包通用方案
webpack5学习与实战-（十三）-postcss处理css3兼容性前缀
weixin_42349568的博客
04-09 1295
一，概述 postcss是一个用js工具和插件转换css代码的工具。比如说可以使用Autoprefixer插件自动获取浏览器流行度和能够支持的属性，并且根据这些数据帮助我们自动地为css规则添加前缀，将最新的css语法转化成大多数浏览器能够理解的语法。 二，具体的应用 第一步，安装依赖 npm i mini-css-extract-plugin css-loader postcss-loader -D 这里需要解释一下，mini-css-extract-plugin插件是替换style-loader插件
Webpack5多页面打包通用方案
人生百年几今日，今日不为真可惜。
02-27 2600
文章目录背景官方多入口配置多项目打包步骤安装glob模块修改webpack.config.js 配置，新增entries函数，修改entry:entries()，修改output的filename为"[name].js"测试执行打包命令`npm run build`,结果如下。 背景 前面介绍过，Webpack不单单只支持单页面项目（SPA），也支持多页面项目（MPA）的打包。那么在多页面项目开发过程中，每新增一个页面模块，都需要修改webpack.config.js配置文件（增加一个入口），这个时候我们就
解决PostCSS配置报警告问题
weixin_30664615的博客
08-10 4760
问题描述： Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file. Using browsers option cause some error. Browserslist config can...
vue+webpack4多页面打包配置
weixin_34150830的博客
03-04 1208
vue+webpack4多页面打包配置 多页面配置通常有两种形式，一种是多页面多配置，一种是多页面单配置。因为webpack（3.1以上）可以直接处理一个配置对象的数组，所以可以为每个页面单独写一份配置。 通常来讲，多配置的优点是配置灵活、独立，可以并行打包，从而提高打包速度，缺点是不能在多页面之间共享代码（一个页面加载了之后，下一个...
webpack4.x实现多页面打包配置
weixin_39458031的博客
01-28 2459
一：应用场景： 项目小，不必要用vue框架等单页框架 但是希望最后利用webpack打包项目，对项目体积优化，代码优。实现图片代码压缩 项目中需要用到 jq, rem适配,项目有缓存处理机制。 二：1.先看一下如下我的项目目录结构： 2.根目录创建的webpack.config.js 文件配置如下： const path = require('path') // path模块是...
【webpack4x】postcss-loader无法自动添加浏览器前缀问题
08-09 769
没有设置浏览器类型导致的无法生效 // 1. npm install postcss-loader autoprefixer --save // 2. 在项目根目录下新建 postcss.config.js // 注意： 如果没有配置在哪些浏览器上自动添加前缀，会无法添加成功 // postcss.config.js module.exports = { plugins: [ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值