一.webpack 的五個核心概念

1.Entry：入口指示，webpack以哪個文件為入口起點開始打包，分析構建內部依賴圖
2.output:輸出指示，webpack打包后的資源bundles輸出到哪里去，以及如何命名
3.loader :loader讓webpack能夠去處翻譯理那些非js文件（img css…）
4.Plugins :Plugins插件可以用于執行范圍更廣的任務，打包優化和壓縮等…
5.Mode :模式
1.development 開發模式 ：能夠讓代碼本地調試運行的環境
自動啟用的一些插件
會將process.env.NODE_ENV的值設為development
啟用NamedChunksPLugin和NamedModulesPlugin
2. production 生產模式
會將 process.env.NODE_ENV 的值設為 production。
啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

二.webpack開發環境打包樣式資源

/*
  webpack.config.js webpack的配置文件
  作用：指示webpack干那些活，（當你運行webpack指令時，會加載里面的配置）

  項目里的src 里面是用的es6 的模塊化，  webpack.config.js配置文件是基于Node.js模塊化所以用的CommonJS的語法
*/
// function(exports, require, module, __filename, __dirname) {

//其實每個node.js模塊都是包在這個引性的函數里面執行的
// exports 該對象用來將變量或函數暴露外面
//require 用來引入外部的模塊
//module 代表的是當前模塊本身,exports就是module的屬性，及可以使用exports導入，可以用module.exports
//__filename 當前模塊的完整路徑
//__dirname當前模塊所在文件夾的完整路徑

// }
/*


webpack打包css準備步奏：

1.初始化包描述文件package.json 運行指令 ：npm init (package name:webpack_test)
               
2. 先全局安裝webpack和webpack-cli
     npm install webpack@4.41.6 -g
     npm install webpack-cli@3.3.11 -g

 3.再本地安裝局部安裝webpack和webpack-cli :表示項目開發期間的依賴，也就是：線上代碼中用不到這些包了
 
     npm install webpack@4.41.6 --save-dev  （或使用簡寫-D也可以 npm i webpack -D）
     npm install webpack-cli@3.3.11 --save-dev   （或使用簡寫-D也可以 npm i ）

 4.設置打包文件webpack.config.js 設置 （ webpack.config.js webpack的配置文件 作用：指示webpack干那些活，（當你運行webpack指令時，會加載里面的配置）

 5. 下載loader包
                  
                    查看webpack的版本號的命令:npm view webpack versions
                    查看less-loader的版本號命令：npm view less-loader versions

                  打包css需要下載的包:
                  
                   npm i css-loader@3.4.2 style-loader@1.1.3 -D  ( npm i css-loader style-loader -D )
                  

                  打包less需要下載的包;
                  
                   npm i less-loader@5.0.0 -D ( less-loader@5.0.0版本的需要下載less，10版本左右的不需要下less可以打包成功)
                   npm i less@3.11.1 -D

                
  6.運行命令: webpack 打包

 */


// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');

module.exports = {
    // webpack配置
    // 入口起點
    entry: './src/index.js',
    // 輸出
    output: {
        // 輸出文件名
        filename: 'built.js',
        // 輸出路徑
        // __dirname nodejs的變量，代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            // 詳細loader配置

            // 不同文件必須配置不同loader處理
            {
                // css打包loader配置
                test: /\.css$/,
                // 使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序：從右到左，從下到上 依次執行
                    // 創建style標簽，將js中的樣式資源插入進行，添加到head中生效
                    'style-loader',
                    // 將css文件變成commonjs模塊加載js中，里面內容是樣式字符串
                    'css-loader'
                ]
            }, {

                // 匹配less文件
                test: /\.less$/,

                use: [
                    // 創建style標簽，將js中的樣式資源插入進行，添加到head中生效
                    'style-loader',

                    // 將css文件變成commonjs模塊加載js中，里面內容是樣式字符串
                    'css-loader',

                    //將less編譯成css文件
                    'less-loader'
                ]


            }
        ]
    },


    // plugins的配置
    plugins: [
        //     // 詳細plugins的配置
    ],


    // 模式
    mode: 'development' // 開發模式
        //  mode: 'production'
}

三.webpack 開發環境html文件打包

/*webpack打包HTML準備步奏：

1.初始化包描述文件package.json 運行指令 ：npm init (package name:webpack_test)
               
2. 先全局安裝webpack和webpack-cli
      npm install webpack@4.41.6 -g
      npm install webpack-cli@3.3.11 -g

3.再本地安裝局部安裝webpack和webpack-cli :表示項目開發期間的依賴，也就是：線上代碼中用不到這些包了
       npm install webpack@4.41.6 --save-dev  （或使用簡寫-D也可以 npm i webpack -D）
       npm install webpack-cli@3.3.11 --save-dev   （或使用簡寫-D也可以 npm i ）

4.設置打包文件webpack.config.js 設置 （ webpack.config.js webpack的配置文件 作用：指示webpack干那些活，（當你運行webpack指令時，會加載里面的配置）

5.  打包html需要安裝plugins插件： npm i html-webpack-plugin@3.2.0 -D
   
6.運行命令: webpack 打包

*/



// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');

//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    //入口
    entry: './src/index.js',

    //輸出
    output: {
        // 輸出文件名
        filename: 'built.js',
        // 輸出路徑
        // __dirname nodejs的變量，代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build')
    },

    //lorder的配置

    module: {
        rules: [


        ]


    },

    // plugins的配置
    plugins: [
        // 詳細plugins的配置
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結構的HTML文件
        new HtmlWebpackPlugin({

            // 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],
    // 模式
    mode: 'development' // 開發模式
        //  mode: 'production'


}

四.webpack開發環境 img資源打包

/*打包CSS里面的圖片和html里面的圖片資源步奏

1.初始化包描述文件package.json 運行指令 ：npm init (package name:webpack_test)
               
2. 先全局安裝webpack和webpack-cli
      npm install webpack@4.41.6 -g
      npm install webpack-cli@3.3.11 -g

3.再本地安裝局部安裝webpack和webpack-cli :表示項目開發期間的依賴，也就是：線上代碼中用不到這些包了
       npm install webpack@4.41.6 --save-dev  （或使用簡寫-D也可以 npm i webpack -D）
       npm install webpack-cli@3.3.11 --save-dev   （或使用簡寫-D也可以 npm i 
）

4.設置打包文件webpack.config.js 設置 （ webpack.config.js webpack的配置文件 作用：指示webpack干那些活，（當你運行webpack指令時，會加載里面的配置）

5. 下載loader包
                
                  打包css需要下載的包:
                  
                   npm i css-loader@3.4.2 style-loader@1.1.3 -D   
                   npm i css-loader style-loader -D  

                  打包less需要下載的包;
                  
                   npm i less-loader@5.0.0 -D ( less-loader@5.0.0版本的需要下載less，10版本左右的不需要下less可以打包成功)
                   npm i less@3.11.1 -D


                   打包html需要安裝plugins插件： npm i html-webpack-plugin@3.2.0 -D

                   打包css或less插入的背景圖片img下載的包 : npm i url-loader@3.0.0 file-loader@5.0.2 -D

                   打包html文件里面的img圖片資源下載的包：npm i html-loader@0.5.5 -D

6.運行命令: webpack 打包

*/

// resolve用來拼接絕對路徑的方法
const {
    resolve
} = require('path');

//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    //入口
    entry: './src/index.js',


    //輸出
    output: {
        // 輸出文件名
        filename: 'built.js',
        // 輸出路徑
        // __dirname nodejs的變量，代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build')
    },


    //lorder的配置

    module: {
        rules: [

            //處理less，loader
            {
                // 匹配less文件
                test: /\.less$/,
                //使用多個loader處理用use ，一個不需要用use
                use: [
                    // 創建style標簽，將js中的樣式資源插入進行，添加到head中生效
                    'style-loader',

                    // 將css文件變成commonjs模塊加載js中，里面內容是樣式字符串
                    'css-loader',

                    //將less編譯成css文件
                    'less-loader'
                ]
            },

            //處理less或css背景插入的圖片資源
            {
                test: /\.(jpg|png|gif)$/,

                //使用一個loader
                //需要下載 url-loader和 file-loader  (url-loader是依賴file-loader的所以的下兩個包)
                loader: 'url-loader',
                options: {
                    //圖片大小小于8kb,就會被base64處理
                    //優點：減少請求數量（減少請求壓力）
                    limit: 8 * 1024,

                    //關閉url-loader的es6模塊化，只為解析html里面插入的圖片
                    esModule: false,

                    //給打包的圖片進行重命名
                    //[hash:8]取圖片的hash的前8位
                    //[ext]取文件原來擴展名
                    name: '[hash:8].[ext]'


                }
            },


            //問題:因為url-loader默認使用es6模塊化解析，而html-loader引入的圖片是common.js解析
            //解析時出現問題:[Object Module]
            //解決：關閉url-loader的es6模塊化.使用commonjs解析 ：esModule :false

            //處理html插入img圖片資源的loader(配置完需要下載:html-loader)
            {
                test: /\.html$/,
                loader: 'html-loader'

            }

        ]


    },

    // plugins的配置
    plugins: [
        // 詳細plugins的配置
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結構的HTML文件
        new HtmlWebpackPlugin({

            // 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],
    // 模式
    mode: 'development' // 開發模式
        //  mode: 'production'

}

五.webpack 開發環境iocnfont圖標其他資源打包

/*打包iconfont資源和其他資源

1.初始化包描述文件package.json 運行指令 ：npm init (package name:webpack_test)
               
2. 先全局安裝webpack和webpack-cli
      npm install webpack@4.41.6 -g
      npm install webpack-cli@3.3.11 -g

3.再本地安裝局部安裝webpack和webpack-cli :表示項目開發期間的依賴，也就是：線上代碼中用不到這些包了
       npm install webpack@4.41.6 --save-dev  （或使用簡寫-D也可以 npm i webpack -D）
       npm install webpack-cli@3.3.11 --save-dev   （或使用簡寫-D也可以 npm i 
）

4.設置打包文件webpack.config.js 設置 （ webpack.config.js webpack的配置文件 作用：指示webpack干那些活，（當你運行webpack指令時，會加載里面的配置）

5. 下載loader包
                
                   打包css需要下載的包:
                  
                   npm i css-loader@3.4.2 style-loader@1.1.3 -D   
                   npm i css-loader style-loader -D  

                 
                   打包html需要安裝plugins插件： npm i html-webpack-plugin@3.2.0 -D

                   打包字體圖標iconfont下載的包 : npm i file-loader@5.0.2 -D



6.運行命令: webpack 打包

*/



const { resolve } = require('path')

//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //入口
    entry: {
        url: "./src/index.js"
    },

    //輸出
    output: {

        //輸出文件名
        filename: "build.js",
        //輸出路徑
        path: resolve(__dirname, 'build')

    },

    //Loader配置
    module: {

        rules: [{
                // css打包loader配置
                test: /\.css$/,
                // 使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序：從右到左，從下到上 依次執行
                    // 創建style標簽，將js中的樣式資源插入進行，添加到head中生效
                    'style-loader',
                    // 將css文件變成commonjs模塊加載js中，里面內容是樣式字符串
                    'css-loader'
                ]
            },

            //打包字體圖標iconfont資源
            {
                //排除css|js|html
                exclude: /\.(css|js|html|less|img|json)$/,

                loader: 'file-loader',

                options: {

                    //給打包的圖表進行重命名
                    //[hash:8]取圖片的hash的前8位
                    //[ext]取文件原來擴展名
                    name: '[hash:8].[ext]'
                }

            }

        ]



    },


    //html插件
    // plugins的配置
    plugins: [
        // 詳細plugins的配置
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結構的HTML文件
        new HtmlWebpackPlugin({

            // 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],

    // 模式
    mode: 'development' // 開發模式
        //  mode: 'production'

六.webpack生產環境中CSS兼容性處理

//配置


//總結: 打包好js中的css提取成單獨的css文件需要下面3步
//下載插件 :npm i mini-css-extract-plugin -D (兼容webpack4的版本 ：npm i mini-css-extract-plugin@0.9.0 -D)
//const MiniCssExtractPlugin = require('mini-css-extract-plugin')  //引入下載好的插件
//MiniCssExtractPlugin.loader ,loader配置
/*
 new MiniCssExtractPlugin({
            //對單獨提取出來的css文件重命名
            filename: 'css/built.css', //輸出重命名
        })

*/

//處理css兼容性的步奏：
//下載包：npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D 
// css兼容性處理 loader配置:
/*
  {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: () => [
                            require('postcss-preset-env')()
                        ]
                    }
                }


*/
//在package.json中配置開發環境和生產環境兼容性樣式的規則
// "browserslist": {
//      開發環境
//     "development": [
//         "last 1 chrome version",
//         "last 1 firefox version",
//         "last 1 safari version"
//     ],

//      默認是生產環境和 mode配置無關，如需兼容開發環境需要設置node環境變量：process,env.NODE_ENV ='development'
//     "production": [
//         ">0.2%",
//         "not dead",
//         "not op_mini all"
//     ]
// }


const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
//生產環境中JS中的CSS文件提取成單獨文件 下載插件 :npm i mini-css-extract-plugin -D (兼容webpack4的版本 ：npm i mini-css-extract-plugin@0.9.0 -D)
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //MiniCssExtractPlugin引入

//設置node.js環境變量 ，讓css 兼容package.json，browserlist中的開發模式(默認是走生產模式)
//process.env.NODE_ENV = 'development'
module.exports = {
    //入口路徑
    entry: './src/js/index.js',
    //輸出
    output: {
        filename: 'js/built.js', //輸出文件名
        path: resolve(__dirname, 'build') //路徑

    },
    //loeder配置
    module: {
        rules: [{
            //css打包驗證規則
            test: /\.css$/,
            use: [
                // 'style-loader',  創建style標簽， 將樣式放入header中
                //因為要單獨提取js中的css文件所以'style-loader'不需要了
                //MiniCssExtractPlugin.loader取代style-loader ,提取css成單獨文件
                MiniCssExtractPlugin.loader,
                'css-loader', //將css文件整合到js中

                //css兼容性處理的loader配置
                {
                    //打包好的css兼容性處理 ，需要下載 postcss(postcss-loader包和postcss-preset-env插件)
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: () => [
                            //postcss-preset-env插件幫助postcss找到package.json中browserlist里面的配置, 
                            //通過配置加載指定的兼容性樣式
                            require('postcss-preset-env')()
                            // "browserslist": {
                            //      開發環境
                            //     "development": [
                            //         "last 1 chrome version",
                            //         "last 1 firefox version",
                            //         "last 1 safari version"
                            //     ],

                            //      默認是生產環境和 mode配置無關，如需兼容開發環境需要設置node環境變量：process.env.NODE_ENV ='development'
                            //     "production": [
                            //         ">0.2%", //大于98%的瀏覽器
                            //         "not dead", 
                            //         "not op_mini all" //除mini的瀏覽器
                            //     ]
                            // }
                        ]
                    }
                }
            ]
        }]
    },
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            //對單獨提取出來的css文件重命名
            filename: 'css/built.css', //輸出重命名
        })

    ],
    //開發模式
    mode: 'development'
}

七.webpack生產環境中CSS壓縮

//壓縮css需要下載的插件：optimize-css-assets-webpack-plugin : npm i optimize-css-assets-webpack-plugin@5.0.3 -D
//引入插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

//生產環境中JS中的CSS文件提取成單獨文件 下載插件 :npm i mini-css-extract-plugin -D (兼容webpack4的版本 ：npm i mini-css-extract-plugin@0.9.0 -D)
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //MiniCssExtractPlugin引入

//設置node.js環境變量 ，讓css 兼容package.json，browserlist中的開發模式(默認是走生產模式)
//process.env.NODE_ENV = 'development'
module.exports = {
    //入口路徑
    entry: './src/js/index.js',
    //輸出
    output: {
        filename: 'js/built.js', //輸出文件名
        path: resolve(__dirname, 'build') //路徑

    },
    //loeder配置
    module: {
        rules: [{
            //css打包驗證規則
            test: /\.css$/,
            use: [
                // 'style-loader',  創建style標簽， 將樣式放入header中
                //因為要單獨提取js中的css文件所以'style-loader'不需要了
                //MiniCssExtractPlugin.loader取代style-loader ,提取css成單獨文件
                MiniCssExtractPlugin.loader,
                'css-loader', //將css文件整合到js中
                //css兼容性處理的loader配置
                {
                    //打包好的css兼容性處理 ，需要下載 postcss(postcss-loader包和postcss-preset-env插件)
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: () => [
                            //postcss-preset-env插件幫助postcss找到package.json中browserlist里面的配置, 
                            //通過配置加載指定的兼容性樣式
                            require('postcss-preset-env')()
                            // "browserslist": {
                            //      開發環境
                            //     "development": [
                            //         "last 1 chrome version",
                            //         "last 1 firefox version",
                            //         "last 1 safari version"
                            //     ],

                            //      默認是生產環境和 mode配置無關，如需兼容開發環境需要設置node環境變量：process.env.NODE_ENV ='development'
                            //     "production": [
                            //         ">0.2%", //大于98%的瀏覽器
                            //         "not dead", 
                            //         "not op_mini all" //除mini的瀏覽器
                            //     ]
                            // }
                        ]
                    }
                }
            ]
        }]
    },
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),

        //js中單獨提取css的插件調用
        new MiniCssExtractPlugin({
            //對單獨提取出來的css文件重命名
            filename: 'css/built.css', //輸出重命名
        }),
        //css壓縮插件調用
        new OptimizeCssAssetsWebpackPlugin()

    ],
    //開發模式
    mode: 'development'
}

八.webapck 生產環境JS代碼壓縮

//webpack生產環境中自帶了jS壓縮插件 UglifysPlugin 所以只要把mode調成生產環境（production）就可以自動壓縮js代碼

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');

//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    //入口
    entry: './src/index.js',
    //輸出
    output: {
        // 輸出文件名
        filename: 'built.js',
        // 輸出路徑
        // __dirname nodejs的變量，代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build')
    },

    //lorder的配置

    module: {
        rules: [

        ]


    },

    // plugins的配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })

    ],

    // mode: 'development' // 開發模式
    mode: 'production'


}

九webapck 生產環境html代碼壓縮

//webpack壓縮html代碼只需要加
// minify: {
//     //移除空格
//     collapseWhitespace: true,
//     //移除注釋
//     removeComments: true

// }


// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');

//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    //入口
    entry: './src/index.js',
    //輸出
    output: {
        // 輸出文件名
        filename: 'built.js',
        // 輸出路徑
        // __dirname nodejs的變量，代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build')
    },

    //lorder的配置

    module: {
        rules: [

        ]


    },

    // plugins的配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            //壓縮html代碼
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注釋
                removeComments: true

            }
        })

    ],

    // mode: 'development' // 開發模式
    mode: 'production'
}

十.webpack性能優化tree.shaking去除無用的代碼

/*
tree shaking:去除無用代碼
前提：1.必須使用ES6模塊化，2.開啟prodution環境

測試：首先在index.js中寫一段es6的語法代碼,然后在index.js引入indexp.js 中暴露出來的mul，不引入count，所以count函數就為廢代碼，開啟打包出的代碼里面就沒有count函數的代碼，


*/

const { resolve } = require('path') //ES6解構賦值 絕對路徑
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入HtmlWebpackPlugin插件 處理html文件
module.exports = {
    //入口文件設置
    entry: './src/js/index.js',
    //輸出路徑設置
    output: {
        filename: 'built.js', // 輸出文件名 //輸出文件夾下面。加js
        path: resolve(__dirname, 'build') //__dirname當前模塊所在文件夾的完整路徑
    },
    //lorder配置
    module: {
        rules: [


        ]

    },

    // 處理html文件
    plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結構的HTML文件
        new HtmlWebpackPlugin({
            // 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],
    // 模式
    mode: 'production', // 開發模式

}

十一.webpack性能優化代碼分隔方法（一）自己寫的多個js文件用多入口打包成獨立的文件

//正常情況下，開發環境的多個js代碼文件打包完會成為一個built.js 文件，現在想打包完js文件代碼，分隔成開發時單獨的JS那樣的文件

/*
 方法如下：修改入口文件為多入口文件
       entry: {
        //多入口:有一個入口，最終輸出就有一個bundle
        index: './src/js/index.js',
        indexp: './src/js/indexp.js'
    },

   設置輸出文件名: filename: '[name].js',
     就這兩步就可以了

     build文件夾就打包出來單獨的js文件
*/


const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入HtmlWebpackPlugin插件 處理html文件
module.exports = {
    //入口文件設置
    //  entry: './src/js/index.js',
    entry: {
        //多入口:有一個入口，最終輸出就有一個bundle
        index: './src/js/index.js',
        indexp: './src/js/indexp.js'
    },

    //輸出路徑設置
    output: {
        filename: '[name].js', //設置多入口文件名[name]
        path: resolve(__dirname, 'build')
    },
    //lorder配置
    module: {
        rules: [


        ]

    },

    // 處理html文件
    plugins: [

        new HtmlWebpackPlugin({
            // 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],
    // 模式
    mode: 'development', // 開發模式

}

十二.webpack性能優化代碼分隔方法（二），單入口打包第三方js插件為單獨文件

//正常情況下，開發環境的多個js代碼文件打包完會成為一個built.js 文件，現在想打包完js文件代碼，分隔成開發時那樣單獨的JS那樣的文件

/*
 方法二如下：配置下面代碼 :可以將node_modules中js第三方代碼庫，單獨打包(我自己測試用的jqury做的示范)最終輸出
optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
輸出的文件1.built.js 就是jq文件，built.js就是自己寫的index.js文件


2.如果我自己寫的多個js文件中同時引用了第三方js文件比如（jqury）那么打包還是會只打包一個第三方文件
比如：我的index.js和indexP.js 都引入了jq ，那么打包只會打包一個jq 這個要改為多入口才能測試



總結:這個方法用單入口的話 只能單獨把第三方js插件打包成獨立的js文件， 


*/


const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入HtmlWebpackPlugin插件 處理html文件
module.exports = {
    //入口文件設置
    //  entry: './src/js/index.js',

    entry: {
        //多入口:有一個入口，最終輸出就有一個bundle
        index: './src/js/index.js',
        indexp: './src/js/indexp.js'
    },
    //輸出路徑設置
    output: {
        //   filename: 'built.js', / / 單入口文件名設置

        filename: '[name].js', // 多入口文件名設置

        path: resolve(__dirname, 'build') //__dirname當前模塊所在文件夾的完整路徑
    },
    //lorder配置
    module: {
        rules: [


        ]

    },

    // 處理html文件
    plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結構的HTML文件
        new HtmlWebpackPlugin({
            // 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],

    //   1. 可以將node_modules中代碼單獨打包一個chunk最終輸出
    //  2. 自動分析多入口chunk中， 有沒有公共的文件。 如果有會打包成單獨一個chunk *

    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    mode: 'production', // 開發模式

}

十三.webpack性能優化代碼分隔方法（三）自己寫的多個js文件用單入口打包成獨立的文件

//正常情況下，開發環境的多個js代碼文件打包完會成為一個built.js 文件，現在想打包完js文件代碼，分隔成開發時那樣單獨的JS那樣的文件

/*
 第三種打包方式:20.自己寫的多個js文件用單入口打包成獨立的文件

 在入口文件index.js配置如下代碼

//   import ( /* webpackChunkName: 'indexP' */
//'./indexP')
// .then(({ mul, count }) => {
//         // 文件加載成功~
//         // eslint-disable-next-line
//         console.log(mul(2, 5));
//     })
//     .catch(() => {
//         // eslint-disable-next-line
//         console.log('文件加載失敗~');
//     });

// // eslint-disable-next-line
// console.log(sum(1, 2, 3, 4));

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入HtmlWebpackPlugin插件 處理html文件
module.exports = {
    //入口文件設置
    entry: './src/js/index.js',

    //輸出路徑設置
    output: {
        filename: 'built.js', // 單入口文件名設置

        path: resolve(__dirname, 'build') //__dirname當前模塊所在文件夾的完整路徑
    },
    //lorder配置
    module: {
        rules: [


        ]

    },

    // 處理html文件
    plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結構的HTML文件
        new HtmlWebpackPlugin({
            // 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],


    mode: 'production', // 開發模式

}

十四.webpack性能優化懶加載

//正常情況下，開發環境的多個js代碼文件打包完會成為一個built.js 文件，現在想打包完js文件代碼，分隔成開發時那樣單獨的JS那樣的文件

/*
 第三種打包方式:20.自己寫的多個js文件用單入口打包成獨立的文件

 在入口文件index.js配置如下代碼

//   import ( /* webpackChunkName: 'indexP' */
//'./indexP')
// .then(({ mul, count }) => {
//         // 文件加載成功~
//         // eslint-disable-next-line
//         console.log(mul(2, 5));
//     })
//     .catch(() => {
//         // eslint-disable-next-line
//         console.log('文件加載失敗~');
//     });

// // eslint-disable-next-line
// console.log(sum(1, 2, 3, 4));

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入HtmlWebpackPlugin插件 處理html文件
module.exports = {
    //入口文件設置
    entry: './src/js/index.js',

    //輸出路徑設置
    output: {
        filename: 'built.js', // 單入口文件名設置

        path: resolve(__dirname, 'build') //__dirname當前模塊所在文件夾的完整路徑
    },
    //lorder配置
    module: {
        rules: [


        ]

    },

    // 處理html文件
    plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結構的HTML文件
        new HtmlWebpackPlugin({
            // 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],


    mode: 'production', // 開發模式

}