webpack 打包出多个HTML文件，多个js文件，图片文件放置到指定文件夹中

一、webpack.config.js简单代码

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //mode 指打包模式
    //development 指开发模式，代码未压缩
    //production 指产品模式，代码压缩
    mode: 'development',    //development and production

    //entry 指明入口文件，webpack 会从这个文件开始连接所有的依赖。
    entry: {
        './js/first': __dirname + '/src/first.js',
        './js/second': __dirname + '/src/second.js',
    },

    //output 指明出口文件， 即打包后的文件存放的位置
    output: {
        path: __dirname + '/dist',
        filename: '[name]_bundle_[hash].js',
    },

    //文件加载器 loader
    //loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
    module: {
        rules: [
            ...
        ]
    },

    // 本地服务器配置
    devServer: {
        contentBase: './dist',  //默认本地服务器所在的根目录
        historyApiFallback: true,   //是否跳转到index.html
        inline: true,   //源文件改变时刷新页面
        port: 8084  //端口号，默认8080
    },

    //插件
    plugins: [
       ...
    ]
}

二、webpack.config.js各个模块的介绍

1. mode 介绍

module.exports = {
  mode: 'production'    //或者 development
};

解释： 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

development  表示 开发模式，代码不会压缩（有利于断点调试）

production　表示 产品模式， 代码会进行压缩（不利于断点调试）

2. devServer介绍

module.exports = {
    // 本地服务器配置
    devServer: {
        contentBase: './dist',  //默认本地服务器所在的根目录
        historyApiFallback: true,   //是否跳转到index.html
        inline: true,   //源文件改变时刷新页面
        port: 8084  //端口号，默认8080
    },
}

介绍： 来自 webpack-dev-server 插件的 部分功能

解释： webpack-dev-server 可以开启本地服务器，便于开发

详细请查找 https://www.webpackjs.com/configuration/dev-server/

3. module介绍

    // loader设置
    module: {
        rules: [
            {
                test: /\.(css|sass|scss)$/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jsx|js)$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'env', 'react', 'stage-0'
                        ]
                    }
                }]
            },
            {
                test: /\.xml$/,
                loaders: ['xml-loader']
            },
            {
                test: /\.(png|svg|jpg|gif|mp4)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath: './img',
                        publicPath: './img'
                    }
                }]
            }
        ]
    },

介绍： module.loaders 允许在 webpack 配置中指定多个 loader

例如： babel-loader、style-loader、css-loader、sass-loader、file-loader等，这些都需要先 npm install

那么如何在打包时，将图片文件放置到指定文件夹中呢？

options: {
   outputPath: './img',    //指定放置目标文件的文件系统路径
   publicPath: './img'    //指定目标文件的自定义公共路径
} 

通过设置 outputPath 可以使得打包后的文件放置到指定的文件夹中（./img）

4. plugins

    plugins: [
        new HtmlWebpackPlugin({ //输出html文件1
            title: '123',   //生成html文件的标题
            favicon: './favicon.png',   //生成html文件的favicon的路径
            filename: 'first.html',     //生成html文件的文件名，默认是index.html
            template: 'first.html',     //本地html文件模板的地址
            hash: true,
            chunks: ['./js/first']
        }),
        new HtmlWebpackPlugin({ //输出html文件2
            title: '123',
            favicon: './favicon.png',
            filename: 'second.html',
            template: 'second.html',
            hash: true,
            chunks: ['./js/second']
        })
    ]

• hash：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：

  <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>

• chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
  此处的chunks和 前面的 entry 入口文件 对应

  entry: {
      './js/first': __dirname + '/src/first.js',
      './js/second': __dirname + '/src/second.js',
  },
  

  　　

5. output

//output 指明出口文件， 即打包后的文件存放的位置
    output: {
        path: __dirname + '/dist',
        filename: '[name]_bundle_[hash].js',
    },

介绍： output 模块指明 项目打包的出口文件

path：表示出口文件的路径

filename：表示出口js文件的命名，此处的[name]对应 entry入口文件的名称，[hash]在每次编译时产生唯一的hash值

6. entry

//entry 指明入口文件，webpack 会从这个文件开始连接所有的依赖。
    entry: {
        './js/first': __dirname + '/src/first.js',
        './js/second': __dirname + '/src/second.js',
    },

介绍： entry 模块 指明 项目的入口js文件， 可以有多个

'./js/first' ： 是指 文件打包后的路径（放置在js文件夹中），和 output 模块中的 [name] 以及 HtmlWebpackPlugin 插件 中的 chunk 对应

三、最后，完整webpack.config.js代码

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 模式设置
    mode: 'development',    //development and production

    // 入口设置
    // 使用babel-polyfill 可以兼容低版本浏览器（不支持es6）
    entry: {
        './js/first': ['babel-polyfill', __dirname + '/src/first.js'],
        './js/second': ['babel-polyfill', __dirname + '/src/second.js'],
    },

    // 出口设置
    output: {
        path: __dirname + '/dist',
        filename: '[name]_bundle_[hash].js',
    },

    // loader设置
    module: {
        rules: [
            {
                test: /\.(css|sass|scss)$/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jsx|js)$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'env', 'react', 'stage-0'
                        ]
                    }
                }]
            },
            {
                test: /\.xml$/,
                loaders: ['xml-loader']
            },
            {
                test: /\.(png|svg|jpg|gif|mp4)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath: './img',
                        publicPath: './img'
                    }
                }]
            }
        ]
    },

    // 本地服务器 webpack-dev-server插件，开发中server，便于开发，可以热加载
    devServer: {
        contentBase: './dist',  //默认本地服务器所在的根目录
        historyApiFallback: true,   //是否跳转到index.html
        inline: true,   //源文件改变时刷新页面
        port: 8084  //端口号，默认8080
    },

    // 插件设置
    // HtmlWebpackPlugin 可以在开发中按照模板生成 html文件
    plugins: [
        new HtmlWebpackPlugin({ //输出html文件1
            title: '123',   //生成html文件的标题
            favicon: './favicon.png',   //生成html文件的favicon的路径
            filename: 'first.html',     //生成html文件的文件名，默认是index.html
            template: 'first.html',     //本地html文件模板的地址
            hash: true,
            chunks: ['./js/first']
        }),
        new HtmlWebpackPlugin({ //输出html文件2
            title: '123',
            favicon: './favicon.png',
            filename: 'second.html',
            template: 'second.html',
            hash: true,
            chunks: ['./js/second']
        })
    ]
}

webpack.config.js完整代码