webpack entry和output配置屬性

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值。