webpack如何处理正常html结构（非单页面应用的项目）

一、环境准备

二、安装依赖

1. 控制台 初始化一个webpack项目
   
2. 依赖安装
   把下面拷贝到package.json中，执行 npm i 命令本地安装，会生成node_modules文件夹
   
3. 配置启动脚本
   将下面启动和构建脚本放入package.json中
   

4.整个package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "dev": "webpack && webpack-dev-server --config webpack.config.js",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "glob": "^7.1.3",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.9.4",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "transfer-webpack-plugin": "^0.1.4",
    "url-loader": "^1.1.2",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "@babel/runtime": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "copy-webpack-plugin": "^5.1.1",
    "jquery": "^1.12.4"
  },
  "browserslist": [
    "defaults",
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "ios > 7"
  ],
  "author": "",
  "license": "ISC"
}

三、配置webpack

1. 默认webpack是读取webpack.config.js文件
   2.动态添加入口函数
   
2. 动态生成html函数
   
3. 配置到输出json中
   
4. 拷贝公共资源
   
5. 配置自动生成页面模版
   
6. 整个配置文件

var webpack = require('webpack');
var path = require('path');
var glob = require('glob');
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var CopyWebpackPlugin=require('copy-webpack-plugin');
var autoprefixer = require('autoprefixer');
var os = require('os');
var portfinder = require('portfinder');
var fs = require('fs');
var ports = fs.readFileSync('./port.json', 'utf8');
ports = JSON.parse(ports);
portfinder.basePort = "8080";
portfinder.getPort(function(err, port) {
    ports.data.port = port;
    ports = JSON.stringify(ports,null,4);
    fs.writeFileSync('./port.json',ports);
});
//获取本机ip
function getIPAdress(){  
    var interfaces = os.networkInterfaces();  
    for(var devName in interfaces){  
        var iface = interfaces[devName];  
        for(var i=0;i<iface.length;i++){  
            var alias = iface[i];  
            if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){  
                return alias.address;  
            }  
        }  
    }  
} 
var host = getIPAdress();
//动态添加入口
function getEntry(){
    var entry = {};
    //读取src目录所有page入口
    glob.sync('./src/**/index.js').forEach(function(name){
        var start = name.indexOf('src/') + 4;
        var end = name.length - 3;
        var eArr = [];
        var n = name.slice(start,end);
        entry[n]=name;
    })
    return entry;
}
//动态生成html
//获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name,chunks){
    return {
        template:`./src/${name}.html`,
        filename:`${name}.html`,
        inject:true,
        hash:false,
        chunks:chunks
    }
}
module.exports = {
    devtool: "eval-source-map",
    entry:getEntry(),
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js',
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/(node_modules)/,
                include: /src/,
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:['@babel/preset-env',],
                            // plugins:['@babel/transform-runtime']
                        }
                    }
                ]
            },
            {
                test:/\.css$/,
                //use:['style-loader','css-loader','postcss-loader']//css不分离写法
                //css分离写法
                use:[MiniCssExtractPlugin.loader,"css-loader",{
                    loader: "postcss-loader",
                    options: {
                        plugins: [
                            autoprefixer({
                                browsers: ['ie >= 8','Firefox >= 20', 'Safari >= 5', 'Android >= 4','Ios >= 6', 'last 4 version']
                            })
                        ]
                    }
                }]
            },
            {
                test:/\.scss$/,
                //use:['style-loader','css-loader','sass-loader','postcss-loader']//css不分离写法
                //css分离写法
                use:[MiniCssExtractPlugin.loader,"css-loader",{
                    loader: "postcss-loader",
                    options: {
                        plugins: [
                            autoprefixer({
                                browsers: ['ie >= 8','Firefox >= 20', 'Safari >= 5', 'Android >= 4','Ios >= 6', 'last 4 version']
                            })
                        ]
                    }
                },"sass-loader"]
            },
            {
                test:/\.(png|jpg|gif|jpeg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:5000
                        }
                    }
                ]
            }
        ]
    },
    mode:"development",
    performance:{
        hints:false
    },
    //插件
    plugins:[
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery"
        }),
        new CopyWebpackPlugin([
            {
                from: __dirname+'/src/public',
                to: __dirname+'/dist/public',
                toType:'dir',
            },
        ]),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        contentBase:path.resolve(__dirname,'dist'), //最好设置成绝对路径
        historyApiFallback: false,
        hot: true,
        inline: true,
        stats: 'errors-only',
        host: host,
        port: ports.data.port,
        overlay: true,
        open:true,
        openPage:'index.html'
    }
}
//配置页面
var entryObj = getEntry();
var htmlArray = [];
Object.keys(entryObj).forEach(function(element){
    htmlArray.push({
        _html:element,
        title:'',
        chunks:[element]
    })
})
//自动生成html模板
htmlArray.forEach(function(element){
    module.exports.plugins.push(new HtmlWebpackPlugin(getHtmlConfig(element._html,element.chunks)));
})

五、编写页面

1. 在src下新建目录
2. 在src下新建index.html
3. 在src下新建index.js
4. 在 控制台 下 启动服务 npm run dev 就能看到文件
5. 如果要多文件构建则只需新建一个文件夹在文件夹中 新建index.js 和 indexs.html 就行了
6. 访问也只需加上文件夹名称即可访问到