1、entry

entry的三種配置方式：

（1）傳遞字符串：

單個入口語法：傳遞一個字符串

entry: './src/js/main.js',

?

（2）傳遞數組

將創建“多個主入口(multi-main entry)，并且將它們的依賴導向(graph)到一個“chunk”時。

entry: ['./src/js/main.js','./src/js/a.js'],

示例，webpack.config.js文件為：

module.exports = {//打包入口entry: ['./src/js/main.js','./src/js/a.js'],//打包后的文件 output: {//不加__dirname 會報錯//path:__dirname +'./dist/js',//filename:'bundle.js'//以上2行window下報錯 path: __dirname,filename: './dist/js/bundle.js'} }

執行命令：

npm run webpack

效果為文件合并到一個文件中了，如下：

?

（3）傳遞對象

webpack.config.js文件為：

module.exports = {//打包入口 entry: {main: './src/js/main.js',a: './src/js/a.js'},//打包后的文件 output: {//不加__dirname 會報錯//path:__dirname +'./dist/js',//filename:'bundle.js'//以上2行window下報錯 path: __dirname,//注意：使用[name]確保每個文件名都不重復filename: './dist/js/[name].js'} }

?

注意：

你應該使用以下的替換方式來確保每個文件名都不重復。

[name]?被 chunk 的 name 替換。

[hash]?被 compilation 生命周期的 hash 替換。

[chunkhash]?被 chunk 的 hash 替換。

?

2、output

output.filename

指定硬盤每個輸出文件的名稱。在這里你不能指定為絕對路徑！

文件hash碼：

module.exports = {//打包入口 entry: {main: './src/js/main.js',a: './src/js/a.js'},//打包后的文件 output: {//不加__dirname 會報錯//path:__dirname +'./dist/js',//filename:'bundle.js'//以上2行window下報錯 path: __dirname,//注意：使用[name]確保每個文件名都不重復filename: './dist/js/[name]-[hash].js'} }

執行命令：

npm run webpack

結果：

?

[hash] 每個文件的hash都一樣，文件的hash為打包的hash。

?

module.exports = {//打包入口 entry: {main: './src/js/main.js',a: './src/js/a.js'},//打包后的文件 output: {//不加__dirname 會報錯//path:__dirname +'./dist/js',//filename:'bundle.js'//以上2行window下報錯 path: __dirname,//注意：使用[name]確保每個文件名都不重復filename: './dist/js/[name]-[chunkhash].js'} }

使用[chunkhash] 文件的hash都不一樣，也與打包hash不一樣，這里的hash是文件的MD5值。

?

?

?

總結

以上是生活随笔為你收集整理的webpack entry和output配置属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。