的WebPack多個入口點混亂

從我的WebPack的多個入口點的初步認識，如的WebPack多個入口點混亂

entry: { 
    a: "./a", 
    b: "./b", 
    c: ["./c", "./d"] 
}, 
output: { 
    path: path.join(__dirname, "dist"), 
    filename: "[name].entry.js" 
}

它將捆綁它們作爲a.entry.js，b.entry.js和c.entry.js。沒有d.entry.js，因爲它是c的一部分。

然而在工作中，這些價值讓我感到困惑。爲什麼值是一個http鏈接而不是文件？

app: [ 
    'webpack/hot/dev-server', 
    'webpack-dev-server/client?http://localhost:21200', 
    './lib/index.js' 
], 
test: [ 
    'webpack/hot/dev-server', 
    'webpack-dev-server/client?http://localhost:21200', 
    './test/test.js' 
]

來源

2016-01-06 devwannabe

您指的http鏈接是指webpack-dev-server（用於爲您的捆綁服務的開發服務器）。這些鏈接用於將熱載腳本包含到您的包中。它們只能用於開發。對於生產，你會忽略它們，因爲你不希望熱加載腳本在你的prod文件中。 –

我很想看到一個用於生產的webpack.config.js。感謝您分享該提示。 :) – devwannabe

正如對該問題的評論中所述，HTTP URL用於webpack-dev-server及其熱加載模塊。但是，由於您不需要熱載入，因此您希望爲生產版本的捆綁包省略這些模塊，並且它使您的捆綁包輕鬆超過10,000行代碼（另外！）。

對於海報的個人興趣，下面是我的一個項目（稱爲dragJs）的示例生產配置（minimalistic）。

// file: webpack.production.babel.js 
import webpack from 'webpack'; 
import path from 'path'; 

const ROOT_PATH = path.resolve('./'); 

export default { 
    entry: [ 
     path.resolve(ROOT_PATH, "src/drag") 
    ], 
    resolve: { 
     extensions: ["", ".js", ".scss"] 
    }, 
    output: { 
     path: path.resolve(ROOT_PATH, "build"), 
     filename: "drag.min.js" 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel', 
       include: path.resolve(ROOT_PATH, 'src') 
      }, 
      { 
       test: /\.scss$/, 
       loader: 'style!css!sass' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.UglifyJsPlugin() 
    ] 
};

有幾件事情：

我只用一個入口點，但你可以使用多個，就像你在你的例子做
入口點只是指我的js文件 - 沒有用於生產的webpack-dev-server
配置文件使用ECMAScript2015編寫（因此名稱爲*.babel.js）
它使用sourcemaps和醜化優化插件
的巴貝爾，加載程序的預設是在我.babelrc文件，這個配置
運行的WebPack通過webpack -p --config ./webpack.production.babel.js

規定如果有任何問題，我會很感激在評論中回答他們。

來源

2016-01-06 23:47:58

的WebPack多個入口點混亂

回答

相關問題