一.webpack 的五個(gè)核心概念

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

二.webpack開發(fā)環(huán)境打包樣式資源

/*
  webpack.config.js webpack的配置文件
  作用：指示webpack干那些活，（當(dāng)你運(yùn)行webpack指令時(shí)，會(huì)加載里面的配置）

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

//其實(shí)每個(gè)node.js模塊都是包在這個(gè)引性的函數(shù)里面執(zhí)行的
// exports 該對(duì)象用來(lái)將變量或函數(shù)暴露外面
//require 用來(lái)引入外部的模塊
//module 代表的是當(dāng)前模塊本身,exports就是module的屬性，及可以使用exports導(dǎo)入，可以用module.exports
//__filename 當(dāng)前模塊的完整路徑
//__dirname當(dāng)前模塊所在文件夾的完整路徑

// }
/*


webpack打包c(diǎn)ss準(zhǔn)備步奏：

1.初始化包描述文件package.json 運(yùn)行指令 ：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 :表示項(xiàng)目開發(fā)期間的依賴，也就是：線上代碼中用不到這些包了
 
     npm install webpack@4.41.6 --save-dev  （或使用簡(jiǎn)寫-D也可以 npm i webpack -D）
     npm install webpack-cli@3.3.11 --save-dev   （或使用簡(jiǎn)寫-D也可以 npm i ）

 4.設(shè)置打包文件webpack.config.js 設(shè)置 （ webpack.config.js webpack的配置文件 作用：指示webpack干那些活，（當(dāng)你運(yùn)行webpack指令時(shí)，會(huì)加載里面的配置）

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

                  打包c(diǎn)ss需要下載的包:
                  
                   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.運(yùn)行命令: webpack 打包

 */


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

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

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

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

                use: [
                    // 創(chuàng)建style標(biāo)簽，將js中的樣式資源插入進(jìn)行，添加到head中生效
                    'style-loader',

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

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


            }
        ]
    },


    // plugins的配置
    plugins: [
        //     // 詳細(xì)plugins的配置
    ],


    // 模式
    mode: 'development' // 開發(fā)模式
        //  mode: 'production'
}

三.webpack 開發(fā)環(huán)境html文件打包

/*webpack打包HTML準(zhǔn)備步奏：

1.初始化包描述文件package.json 運(yùn)行指令 ：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 :表示項(xiàng)目開發(fā)期間的依賴，也就是：線上代碼中用不到這些包了
       npm install webpack@4.41.6 --save-dev  （或使用簡(jiǎn)寫-D也可以 npm i webpack -D）
       npm install webpack-cli@3.3.11 --save-dev   （或使用簡(jiǎn)寫-D也可以 npm i ）

4.設(shè)置打包文件webpack.config.js 設(shè)置 （ webpack.config.js webpack的配置文件 作用：指示webpack干那些活，（當(dāng)你運(yùn)行webpack指令時(shí)，會(huì)加載里面的配置）

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

*/



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

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

module.exports = {

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

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

    //lorder的配置

    module: {
        rules: [


        ]


    },

    // plugins的配置
    plugins: [
        // 詳細(xì)plugins的配置
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML，自動(dòng)引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結(jié)構(gòu)的HTML文件
        new HtmlWebpackPlugin({

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

    ],
    // 模式
    mode: 'development' // 開發(fā)模式
        //  mode: 'production'


}

四.webpack開發(fā)環(huán)境 img資源打包

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

1.初始化包描述文件package.json 運(yùn)行指令 ：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 :表示項(xiàng)目開發(fā)期間的依賴，也就是：線上代碼中用不到這些包了
       npm install webpack@4.41.6 --save-dev  （或使用簡(jiǎn)寫-D也可以 npm i webpack -D）
       npm install webpack-cli@3.3.11 --save-dev   （或使用簡(jiǎn)寫-D也可以 npm i 
）

4.設(shè)置打包文件webpack.config.js 設(shè)置 （ webpack.config.js webpack的配置文件 作用：指示webpack干那些活，（當(dāng)你運(yùn)行webpack指令時(shí)，會(huì)加載里面的配置）

5. 下載loader包
                
                  打包c(diǎn)ss需要下載的包:
                  
                   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

                   打包c(diǎn)ss或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.運(yùn)行命令: webpack 打包

*/

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

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

module.exports = {

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


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


    //lorder的配置

    module: {
        rules: [

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

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

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

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

                //使用一個(gè)loader
                //需要下載 url-loader和 file-loader  (url-loader是依賴file-loader的所以的下兩個(gè)包)
                loader: 'url-loader',
                options: {
                    //圖片大小小于8kb,就會(huì)被base64處理
                    //優(yōu)點(diǎn)：減少請(qǐng)求數(shù)量（減少請(qǐng)求壓力）
                    limit: 8 * 1024,

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

                    //給打包的圖片進(jìn)行重命名
                    //[hash:8]取圖片的hash的前8位
                    //[ext]取文件原來(lái)擴(kuò)展名
                    name: '[hash:8].[ext]'


                }
            },


            //問(wèn)題:因?yàn)閡rl-loader默認(rèn)使用es6模塊化解析，而html-loader引入的圖片是common.js解析
            //解析時(shí)出現(xiàn)問(wèn)題:[Object Module]
            //解決：關(guān)閉url-loader的es6模塊化.使用commonjs解析 ：esModule :false

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

            }

        ]


    },

    // plugins的配置
    plugins: [
        // 詳細(xì)plugins的配置
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML，自動(dòng)引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結(jié)構(gòu)的HTML文件
        new HtmlWebpackPlugin({

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

    ],
    // 模式
    mode: 'development' // 開發(fā)模式
        //  mode: 'production'

}

五.webpack 開發(fā)環(huán)境iocnfont圖標(biāo)其他資源打包

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

1.初始化包描述文件package.json 運(yùn)行指令 ：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 :表示項(xiàng)目開發(fā)期間的依賴，也就是：線上代碼中用不到這些包了
       npm install webpack@4.41.6 --save-dev  （或使用簡(jiǎn)寫-D也可以 npm i webpack -D）
       npm install webpack-cli@3.3.11 --save-dev   （或使用簡(jiǎn)寫-D也可以 npm i 
）

4.設(shè)置打包文件webpack.config.js 設(shè)置 （ webpack.config.js webpack的配置文件 作用：指示webpack干那些活，（當(dāng)你運(yùn)行webpack指令時(shí)，會(huì)加載里面的配置）

5. 下載loader包
                
                   打包c(diǎn)ss需要下載的包:
                  
                   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

                   打包字體圖標(biāo)iconfont下載的包 : npm i file-loader@5.0.2 -D



6.運(yùn)行命令: 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進(jìn)行處理
                use: [
                    // use數(shù)組中l(wèi)oader執(zhí)行順序：從右到左，從下到上 依次執(zhí)行
                    // 創(chuàng)建style標(biāo)簽，將js中的樣式資源插入進(jìn)行，添加到head中生效
                    'style-loader',
                    // 將css文件變成commonjs模塊加載js中，里面內(nèi)容是樣式字符串
                    'css-loader'
                ]
            },

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

                loader: 'file-loader',

                options: {

                    //給打包的圖表進(jìn)行重命名
                    //[hash:8]取圖片的hash的前8位
                    //[ext]取文件原來(lái)擴(kuò)展名
                    name: '[hash:8].[ext]'
                }

            }

        ]



    },


    //html插件
    // plugins的配置
    plugins: [
        // 詳細(xì)plugins的配置
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML，自動(dòng)引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結(jié)構(gòu)的HTML文件
        new HtmlWebpackPlugin({

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

    ],

    // 模式
    mode: 'development' // 開發(fā)模式
        //  mode: 'production'

六.webpack生產(chǎn)環(huán)境中CSS兼容性處理

//配置


//總結(jié): 打包好js中的css提取成單獨(dú)的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({
            //對(duì)單獨(dú)提取出來(lái)的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中配置開發(fā)環(huán)境和生產(chǎn)環(huán)境兼容性樣式的規(guī)則
// "browserslist": {
//      開發(fā)環(huán)境
//     "development": [
//         "last 1 chrome version",
//         "last 1 firefox version",
//         "last 1 safari version"
//     ],

//      默認(rèn)是生產(chǎn)環(huán)境和 mode配置無(wú)關(guān)，如需兼容開發(fā)環(huán)境需要設(shè)置node環(huán)境變量：process,env.NODE_ENV ='development'
//     "production": [
//         ">0.2%",
//         "not dead",
//         "not op_mini all"
//     ]
// }


const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
//生產(chǎn)環(huán)境中JS中的CSS文件提取成單獨(dú)文件 下載插件 :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引入

//設(shè)置node.js環(huán)境變量 ，讓css 兼容package.json，browserlist中的開發(fā)模式(默認(rèn)是走生產(chǎn)模式)
//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打包驗(yàn)證規(guī)則
            test: /\.css$/,
            use: [
                // 'style-loader',  創(chuàng)建style標(biāo)簽， 將樣式放入header中
                //因?yàn)橐獑为?dú)提取js中的css文件所以'style-loader'不需要了
                //MiniCssExtractPlugin.loader取代style-loader ,提取css成單獨(dú)文件
                MiniCssExtractPlugin.loader,
                'css-loader', //將css文件整合到j(luò)s中

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

                            //      默認(rèn)是生產(chǎn)環(huán)境和 mode配置無(wú)關(guān)，如需兼容開發(fā)環(huán)境需要設(shè)置node環(huán)境變量：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({
            //對(duì)單獨(dú)提取出來(lái)的css文件重命名
            filename: 'css/built.css', //輸出重命名
        })

    ],
    //開發(fā)模式
    mode: 'development'
}

七.webpack生產(chǎn)環(huán)境中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');

//生產(chǎn)環(huán)境中JS中的CSS文件提取成單獨(dú)文件 下載插件 :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引入

//設(shè)置node.js環(huán)境變量 ，讓css 兼容package.json，browserlist中的開發(fā)模式(默認(rèn)是走生產(chǎn)模式)
//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打包驗(yàn)證規(guī)則
            test: /\.css$/,
            use: [
                // 'style-loader',  創(chuàng)建style標(biāo)簽， 將樣式放入header中
                //因?yàn)橐獑为?dú)提取js中的css文件所以'style-loader'不需要了
                //MiniCssExtractPlugin.loader取代style-loader ,提取css成單獨(dú)文件
                MiniCssExtractPlugin.loader,
                'css-loader', //將css文件整合到j(luò)s中
                //css兼容性處理的loader配置
                {
                    //打包好的css兼容性處理 ，需要下載 postcss(postcss-loader包和postcss-preset-env插件)
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: () => [
                            //postcss-preset-env插件幫助postcss找到package.json中browserlist里面的配置, 
                            //通過(guò)配置加載指定的兼容性樣式
                            require('postcss-preset-env')()
                            // "browserslist": {
                            //      開發(fā)環(huán)境
                            //     "development": [
                            //         "last 1 chrome version",
                            //         "last 1 firefox version",
                            //         "last 1 safari version"
                            //     ],

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

        //js中單獨(dú)提取css的插件調(diào)用
        new MiniCssExtractPlugin({
            //對(duì)單獨(dú)提取出來(lái)的css文件重命名
            filename: 'css/built.css', //輸出重命名
        }),
        //css壓縮插件調(diào)用
        new OptimizeCssAssetsWebpackPlugin()

    ],
    //開發(fā)模式
    mode: 'development'
}

八.webapck 生產(chǎn)環(huán)境JS代碼壓縮

//webpack生產(chǎn)環(huán)境中自帶了jS壓縮插件 UglifysPlugin 所以只要把mode調(diào)成生產(chǎn)環(huán)境（production）就可以自動(dòng)壓縮js代碼

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

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

module.exports = {

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

    //lorder的配置

    module: {
        rules: [

        ]


    },

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

    ],

    // mode: 'development' // 開發(fā)模式
    mode: 'production'


}

九webapck 生產(chǎn)環(huán)境html代碼壓縮

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

// }


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

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

module.exports = {

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

    //lorder的配置

    module: {
        rules: [

        ]


    },

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

            }
        })

    ],

    // mode: 'development' // 開發(fā)模式
    mode: 'production'
}

十.webpack性能優(yōu)化tree.shaking去除無(wú)用的代碼

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

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


*/

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


        ]

    },

    // 處理html文件
    plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML，自動(dòng)引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結(jié)構(gòu)的HTML文件
        new HtmlWebpackPlugin({
            // 復(fù)制 './src/index.html' 文件，并自動(dòng)引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],
    // 模式
    mode: 'production', // 開發(fā)模式

}

十一.webpack性能優(yōu)化代碼分隔方法（一）自己寫的多個(gè)js文件用多入口打包成獨(dú)立的文件

//正常情況下，開發(fā)環(huán)境的多個(gè)js代碼文件打包完會(huì)成為一個(gè)built.js 文件，現(xiàn)在想打包完js文件代碼，分隔成開發(fā)時(shí)單獨(dú)的JS那樣的文件

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

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

     build文件夾就打包出來(lái)單獨(dú)的js文件
*/


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

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


        ]

    },

    // 處理html文件
    plugins: [

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

    ],
    // 模式
    mode: 'development', // 開發(fā)模式

}

十二.webpack性能優(yōu)化代碼分隔方法（二），單入口打包第三方j(luò)s插件為單獨(dú)文件

//正常情況下，開發(fā)環(huán)境的多個(gè)js代碼文件打包完會(huì)成為一個(gè)built.js 文件，現(xiàn)在想打包完js文件代碼，分隔成開發(fā)時(shí)那樣單獨(dú)的JS那樣的文件

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


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



總結(jié):這個(gè)方法用單入口的話 只能單獨(dú)把第三方j(luò)s插件打包成獨(dú)立的js文件， 


*/


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

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

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

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


        ]

    },

    // 處理html文件
    plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML，自動(dòng)引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結(jié)構(gòu)的HTML文件
        new HtmlWebpackPlugin({
            // 復(fù)制 './src/index.html' 文件，并自動(dòng)引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],

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

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

}

十三.webpack性能優(yōu)化代碼分隔方法（三）自己寫的多個(gè)js文件用單入口打包成獨(dú)立的文件

//正常情況下，開發(fā)環(huán)境的多個(gè)js代碼文件打包完會(huì)成為一個(gè)built.js 文件，現(xiàn)在想打包完js文件代碼，分隔成開發(fā)時(shí)那樣單獨(dú)的JS那樣的文件

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

 在入口文件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 = {
    //入口文件設(shè)置
    entry: './src/js/index.js',

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

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


        ]

    },

    // 處理html文件
    plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML，自動(dòng)引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結(jié)構(gòu)的HTML文件
        new HtmlWebpackPlugin({
            // 復(fù)制 './src/index.html' 文件，并自動(dòng)引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],


    mode: 'production', // 開發(fā)模式

}

十四.webpack性能優(yōu)化懶加載文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-521257.html

//正常情況下，開發(fā)環(huán)境的多個(gè)js代碼文件打包完會(huì)成為一個(gè)built.js 文件，現(xiàn)在想打包完js文件代碼，分隔成開發(fā)時(shí)那樣單獨(dú)的JS那樣的文件

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

 在入口文件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 = {
    //入口文件設(shè)置
    entry: './src/js/index.js',

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

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


        ]

    },

    // 處理html文件
    plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默認(rèn)會(huì)創(chuàng)建一個(gè)空的HTML，自動(dòng)引入打包輸出的所有資源（JS/CSS）
        // 需求：需要有結(jié)構(gòu)的HTML文件
        new HtmlWebpackPlugin({
            // 復(fù)制 './src/index.html' 文件，并自動(dòng)引入打包輸出的所有資源（JS/CSS）
            template: './src/index.html'
        })

    ],


    mode: 'production', // 開發(fā)模式

}

到了這里，關(guān)于用webpack做一些前端打包時(shí)的性能優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！