个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
当我运行 npm run build 或 npm run build-dev 时
它在根目录中创建 index.html 和 manage2.bundle.js 以及 manage2.css 文件。我需要将这些文件移动到静态目录中。
所以下面生成的 index.html 将实际工作，具有正确的路径:
<!doctype html>
<html lang="en">
<head>
<title>Manage2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="The TickerTags backend manage app">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Source+Sans+Pro:200,600" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="static/favicon.ico">
<link href="/static/manage2.css" rel="stylesheet"></head>
<body>
<div id="manage2"></div>
<script type="text/javascript" src="/static/manage2.bundle.js"></script></body>
</html>
const fs = require('fs');
const webpack = require('webpack')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const dist = path.resolve(__dirname, "dist");
const src = path.resolve(__dirname, "src");
const environment = process.env.NODE_ENV;
const stream = fs.createWriteStream("src/services/environment.js");
stream.once('open', function(fd) {
stream.write('const env = "'+environment+'"\n');
stream.write('export default env');
stream.end();
});
module.exports = {
context: src,
entry: [
"./index.js"
],
output: {
path: dist,
filename: "manage2.bundle.js",
publicPath: '/static/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: ["css-loader", "sass-loader"],
publicPath: dist
})
}
]
},
devServer: {
hot: false,
quiet: true,
publicPath: "",
contentBase: path.join(__dirname, "dist"),
compress: true,
stats: "errors-only",
open: true
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html"
}),
new ExtractTextPlugin({
filename: "manage2.css",
disable: false,
allChunks: true
}),
new CopyWebpackPlugin([{ from: "static", to: "static" }])
]
};
// new webpack.DefinePlugin({ env: JSON.stringify(environment) })
"scripts": {
"dev": "NODE_ENV=development webpack-dev-server --history-api-fallback",
"prod": "NODE_ENV=production webpack-dev-server -p",
"build": "NODE_ENV=production webpack -p",
"build-dev": "NODE_ENV=production webpack -d",
最佳答案
此配置将 *.js 和 *.css 保存到静态文件夹。
output: {
// the output bundle
filename: '[name].[hash].js',
// saves the files into the dist/static folder
path: path.resolve(__dirname, 'dist/static'),
// set static as src="static/main.js as relative path
publicPath: 'static/'
},
使用 HtmlWebpackPlugin，您可以从模板生成 html 文件。使用 Webpack 插件部分中的此配置，index.html 将保存到 dist。具有指向 *.js 和 *.css 的正确路径的文件夹。
plugins: [
// is only working with npm run build
new HtmlWebpackPlugin({
title: '',
// save index.html one director back from the output path
filename: '../index.html',
template: 'index.template.ejs',
hash: false
}),
],
index.template.ejs
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
</body>
</html>
结果
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>
</title>
<link href="static/main.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="static/main.js"></script>
</body>
</html>
关于javascript - 在 Webpack 中构建 dist 文件夹后，如何将 bundle.js 和 css 文件移动到 statics 文件夹中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44439930/
25
4
0
这个问题已经有答案了: Difference between $Bundle install and $Bundle update (2 个回答) 已关闭 9 年前。 bundle 之间有什么区别,
我正在尝试加载 Nib ，但不断收到以下错误: -[NSViewController initWithCoder:] could not instantiate an NSViewController
bundle有什么区别& bundler命令？ bundle有什么区别& bundle install ? 如果没有区别，为什么有多个命令做同样的事情？ 最佳答案 可执行文件 bundle & bun
我们有托管在应用程序中的单元测试。要加载测试资源，我们使用:Bundle(for: TestClass.self).path(forResource: "some-file", ofType: "js
我刚刚克隆了一个新的 repo 并尝试运行 bundle install但出现以下错误 Fetching gem metadata from https://abcderepos.net/api/ge
我添加了一个共享框架来在应用程序和 watch 扩展之间共享代码。后来我删除了共享框架，因为它会导致很多问题。我可以 build 并在 iphone 上运行我的应用程序并观看。然而，当我提交到应用商店
这个问题有点类似于 this one ，但不完全是。我有一个 C# 游戏引擎，我正在与一些想要使用我的引擎的人一起工作。最初我设计了引擎，以便所有 Assets 都是外部的——非程序员可以创建艺术、音
我正在尝试使用 OSGi 实现客户端-服务器模型。服务器应用程序是在计算机中运行的 OSGi 框架，客户端应用程序远程连接到其控制台并通过 Java 套接字发送命令并接收正确的响应。每个客户端应用程序
我目前正在将我的 Angular 2 应用程序与 WebPack bundle 在一起。我们仍在快速循环，因此我们不想在构建和应用程序加载过程中增加延迟，而是希望包括很少更改的 Angular 2 U
基本上，我有一个捆绑软件，经常在其他 View 中使用，加上其他js文件，因此我可以在保留其顺序的同时将这些文件添加到现有捆绑软件中吗？ 最佳答案 我到处都在查找它，但找不到将两个捆绑软件合并在一起的
我有一个大约 12GB 的巨大 mercurial 存储库。我需要在另一台机器上克隆它，但是从网络中提取它需要花费很多时间。当我尝试将所有变更集 bundle 到一个 bundle 文件中时，文件的大
我可以使用 Sonata User Bundle 将 FOS 包集成到 sonata Admin 包中。我的登录功能正常。现在我想添加 FOSUserBundle 中的更改密码等功能到 sonata
如果我检查使用 angular-cli 创建的 angular 2 项目的 index.html 文件，我可以看到该页面仅包含 dist 文件夹中的 3 个文件: inline.bundle.js v
我从程序包管理器http://localhost:4502/crx/packmgr/index.jsp中从正在运行的AEM实例下载了一个zip文件。提取后的zip文件包含jcr_root和META-I
已经提出了有关捆绑名称和捆绑显示名称的类似问题，例如: What's the difference between "bundle display name" and "bundle name" in
我正在尝试在 iTunes 上上传我的应用程序。为此，我创建了一个应用程序 ID 并保留了一个包标识符。在我的项目中，我更改了 info.plist 文件中的包标识符。但是，当我尝试在 itunes
我想从 OSGI 包启动 OSGI 包。正如您所看到的，此代码通过从目录部署它来启动 bundle : private void installStartBundle(BundleContext bc
所以这真的让我头疼，我终于放弃了，在这里发表了问题。我正在尝试更新iTune商店中的一个客户端应用程序，并且在上传到App Store时遇到以下错误。 因此，我已经尝试通过两次使用包sid id创建新
我在 typescript 中使用 aurelia，我想避免使用像这样的相对导入路径: import { DialogBox } from '../../resources/elements/dial
有什么区别 ResourceBundle.getBundle("Bundle") 还有这个 ResourceBundle.getBundle("/Bundle") 最佳答案 来自the Java do
我是一名优秀的程序员,十分优秀！