的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多个入口点混乱

回答

相关问题