webpack配置的entry和output new

最新推荐文章于 2024-07-18 05:12:21 发布

UIEngineer

最新推荐文章于 2024-07-18 05:12:21 发布

阅读量530

点赞数 1

分类专栏： webpack

本文链接：https://blog.csdn.net/zjsfdx/article/details/78322570

版权

webpack 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

接《建立项目的webpack配置文件》一文。

1.webpack除了单文件打包之外，也可以执行多文件打包合并，webpack.config.js代码如下：

module.exports = {
    entry:['./src/script/main.js','./src/script/a.js'],       //打包入口文件，使用数组形式
    output:{    
        path:__dirname + '/dist/js',               //打包后的文件路径
        filename:'bundle.js'            //打包后的文件名
    }
}

注意：这是src/script文件夹下存在2个待打包的文件

2.在命令行执行npm run webpack，结果打包成功，生成打包后的文件dist/js/bundle.js文件

终端输出结果如下：

> webpack --config webpack.config.js --progress --display-modules --colors --display-reasons

Hash: 78834fc0852c414e7e54
Version: webpack 3.8.1
Time: 94ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.71 kB       0  [emitted]  main
   [0] multi ./src/script/main.js ./src/script/a.js 40 bytes {0} [built]
   [1] ./src/script/main.js 23 bytes {0} [built]
       single entry ./src/script/main.js [0] multi ./src/script/main.js ./src/script/a.js main:100000
   [2] ./src/script/a.js 14 bytes {0} [built]
       single entry ./src/script/a.js [0] multi ./src/script/main.js ./src/script/a.js main:100001

3.前面我们介绍了entry为单文件和数组的形式，其实entry的参数也可以为对象的形式，webpack.config.js代码如下：

module.exports = {
    entry:{                             //打包入口文件
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist/js',    //打包后的文件路径
        filename:'[name].js'            //打包后的文件名
    }
}

终端输出结果如下：

> webpack --config webpack.config.js --progress --display-modules --colors --display-reasons

Hash: c9890bbe75e2faa973e2
Version: webpack 3.8.1
Time: 85ms
  Asset    Size  Chunks             Chunk Names
main.js  2.5 kB       0  [emitted]  main
   a.js  2.5 kB       1  [emitted]  a
   [0] ./src/script/main.js 23 bytes {0} [built]
   [1] ./src/script/a.js 14 bytes {1} [built]

4.接下来我们探讨下output的一些东西，我们仍旧回归webpack.config.js。该配置文件里面有个filename，对于filename:’[name].js’我们已经很熟悉了，现在再来看2个输出，配置文件代码如下：

module.exports = {
    entry:{                             //打包入口文件
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist/js',    //打包后的文件路径
        filename:'[name]-[hash].js'            //打包后的文件名
    }
}

在终端输入npm run webpack
终端输出命令如下：

> webpack --config webpack.config.js --progress --display-modules --colors --display-reasons

Hash: 46f0dcde4b99ff6d3cc5
Version: webpack 3.8.1
Time: 230ms
                       Asset    Size  Chunks             Chunk Names
main-46f0dcde4b99ff6d3cc5.js  2.5 kB       0  [emitted]  main
   a-46f0dcde4b99ff6d3cc5.js  2.5 kB       1  [emitted]  a
   [0] ./src/script/main.js 23 bytes {0} [built]
   [1] ./src/script/a.js 14 bytes {1} [built]

结果我们发现打包后的2个文件的名字为原来的chunk名+本次打包的hash值。

5.继续研究下output的一些东西，仍旧一filename为例，webpack.config.js配置文件代码如下：

> webpack --config webpack.config.js --progress --display-modules --colors --display-reasons

Hash: 577d41de6acac3400197
Version: webpack 3.8.1
Time: 78ms
                       Asset    Size  Chunks             Chunk Names
main-634594a5e227fe8eda86.js  2.5 kB       0  [emitted]  main
   a-0b01d61906ceb56c286f.js  2.5 kB       1  [emitted]  a
   [0] ./src/script/main.js 23 bytes {0} [built]
   [1] ./src/script/a.js 14 bytes {1} [built]

结果我们发现打包后的2个文件的名字为原来的chunk名+本次打包的chunkhash值。
chunkhash值可以看成是MD5算法处理后的值，他是唯一的，如果原待打包文件内容发生了变化，则重新打包后的该文件的chunkhash与之前第一次打包的值是不一样的，否则不变。

比如：我们在a.js中增加一行代码,main.js内容不变
执行npm run webpack命令后，终端输出结果如下：

> webpack --config webpack.config.js --progress --display-modules --colors --display-reasons

Hash: 02474bbedc5cc0f23521
Version: webpack 3.8.1
Time: 84ms
                       Asset     Size  Chunks             Chunk Names
main-634594a5e227fe8eda86.js   2.5 kB       0  [emitted]  main
   a-2dd37ebe6becb90deb4b.js  2.51 kB       1  [emitted]  a
   [0] ./src/script/main.js 23 bytes {0} [built]
   [1] ./src/script/a.js 31 bytes {1} [built]

注意：a-2dd37ebe6becb90deb4b.js ！= a-0b01d61906ceb56c286f.js，因为a.js文件内容发生了变化，增加了一行代码，但是main-634594a5e227fe8eda86.js === main-634594a5e227fe8eda86.js，main文件不变。