如何使用webpack打包多页面并且使 css，js，img在各自页面的目录文件夹下?

最新推荐文章于 2024-01-17 16:33:38 发布

转载最新推荐文章于 2024-01-17 16:33:38 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/heson/p/11139317.html

文章标签：

#webpack #javascript #ViewUI

本文分享了一种自定义的HTML、CSS、JavaScript和图片资源的打包策略，通过webpack配置实现文件的按需加载和优化，包括使用ExtractTextPlugin分离CSS、HtmlWebpackPlugin生成HTML文件等。

遇到HTML CSS JS IMG 需要单独打包的情况了，虽然现在很多都是自动化打包了，但有些时候还是偏向于定制，就是根据自己的需求去编写，打包的方法以及配置和输出的路径。对打包过程进行干预

基于上次的单文件打包。做一下升级

最终打包出来的文件是这样的？

运行结果我就不放了，

打包的config如下

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const Uglifyjs = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports = {
    entry:{
        ap:'./src/js/page_ap.js',
        sat:'./src/js/page_sat.js',
        sat2:'./src/js/sat2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name]/js/index.js?[hash]'
    },
    mode:'development',
    module:{
        rules:[
            {
                test: /\.html$/,
                loader: 'html-withimg-loader'
            },
            {
                test:/\.jsx?/,
                include:[
                    path.resolve(__dirname,'src')
                ],
                use:'babel-loader'          
            },
            {
                test:/\.css$/,
                include:[
                    path.resolve(__dirname,'src')
                ],
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:'css-loader'
                })
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                      loader:'url-loader',
                      options:{
                          limit:10240,
                          outputPath:'./asset/img',
                          name:'[name].[hash].[ext]',
                        //   PublicPath:''
                      }
                  }
                ]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new ExtractTextPlugin('[name]/css/[name].css'),
        new HtmlWebpackPlugin({
                title:'ap',
                filename:'/ap/index.html',
                template:'src/ap/index.html',
                chunks:['ap']
        }),
        new HtmlWebpackPlugin({
            title:'sat',
            filename:'sat/index.html',
            template:'src/sat/index.html',
            chunks:['sat']
        }),
        new HtmlWebpackPlugin({
            title:'sat2',
            filename:'sat2/index.html',
            template:'src/sat2/index.html',
            chunks:['sat2']
        }),
        // new Uglifyjs()
    ]
}