Webpack 多入口点混淆
Webpack multiple entry point confusion
从我对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 link 而不是文件?
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'
]
正如在对该问题的评论中所述,HTTP URL 用于 webpack-dev-server 及其热加载模块。但是,您希望在捆绑包的生产版本中省略这些模块,因为您不需要热加载,并且它使您的捆绑包轻松超过 10.000 行代码(另外!)。
出于发帖人的个人兴趣,这里有一个示例生产配置(简约),用于我的一个项目(称为 dragJs)。
// 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 和一个 uglify 优化插件
- babel-loader 的预设在我的
.babelrc
文件中指定
- 运行 webpack 通过
webpack -p --config ./webpack.production.babel.js
使用此配置
如有其他问题,欢迎在评论中解答。
从我对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 link 而不是文件?
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'
]
正如在对该问题的评论中所述,HTTP URL 用于 webpack-dev-server 及其热加载模块。但是,您希望在捆绑包的生产版本中省略这些模块,因为您不需要热加载,并且它使您的捆绑包轻松超过 10.000 行代码(另外!)。
出于发帖人的个人兴趣,这里有一个示例生产配置(简约),用于我的一个项目(称为 dragJs)。
// 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 和一个 uglify 优化插件
- babel-loader 的预设在我的
.babelrc
文件中指定 - 运行 webpack 通过
webpack -p --config ./webpack.production.babel.js
使用此配置
如有其他问题,欢迎在评论中解答。