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']
        })
    ]
}