Javascript 有没有方法可以将此处显示的任何文件更改为与webpack一起部署？_Javascript_Css_Node.js_Web_Webpack

Javascript 有没有方法可以将此处显示的任何文件更改为与webpack一起部署？

javascript css node.js web webpack

Javascript 有没有方法可以将此处显示的任何文件更改为与webpack一起部署？,javascript,css,node.js,web,webpack,Javascript,Css,Node.js,Web,Webpack,会发生什么？（1）短背景。（2）问题。（3）详细信息（简短；文件列表长度刚好足以显示相关信息）。（4）再问一次 Short background：我想使用webpack部署我的网站。webpack正在错误的目录中查找样式加载器和css加载器，因此我的构建没有完成问题: 有没有方法可以将此处显示的任何文件更改为与webpack一起部署细节环境 Windows 10 Home-64，最新/配备AMD A6的东芝卫星节点v6.2.0/网页包v1.13.2 相关文件和目录结构 C:\De

会发生什么？（1）短背景。（2）问题。（3）详细信息（简短；文件列表长度刚好足以显示相关信息）。（4）再问一次

Short background：我想使用

webpack

部署我的网站。webpack正在错误的目录中查找样式加载器和css加载器，因此我的构建没有完成

问题: 有没有方法可以将此处显示的任何文件更改为与webpack一起部署

细节环境

Windows 10 Home-64，最新/配备AMD A6的东芝卫星

节点v6.2.0/网页包v1.13.2

相关文件和目录结构

C:\Dev\example\example.js
C:\Dev\example\bluebird.js
C:\Dev\example\jquery.js
C:\Dev\example\img\image1.jpg
C:\Dev\example\img\image2.jpg
C:\Dev\example\img\svg1.svg
C:\Dev\example\built\package.json
C:\Dev\example\built\webpack.config.js
C:\Dev\example\built\index1.html
C:\Dev\example\built\index2.html
C:\Dev\example\built\example.bundle.js
C:\Dev\example\built\[hash1].jpg
C:\Dev\example\built\[hash2].jpg
C:\Dev\example\built\[hash3].svg
C:\Dev\node-modules\webpack
C:\Dev\node-modules\css-loader
C:\Dev\node-modules\file-loader
C:\Dev\node-modules\html-loader
C:\Dev\node-modules\style-loader
C:\Dev\node-modules\uglify-js
C:\Dev\node-modules\url-loader

C:\Dev\example\build\package.json

{
  "name": "example",
  "version": "0.0.1",
  "description": "example",
  "main": "example.bundle.js",
  "author": "Bald Eagle"
}

调用webpack：我在命令提示符下从

C:\Dev\example\build

调用webpack，只需一行（为了方便起见，这里有两行）

C:\Dev\example\build\webpack.config.js

"use strict"
let path = require("path")
let webpack = require("webpack")
let preferEntry = true // for OccurrenceOrderPlugin
module.exports = {
    context: "C:/Dev/example/built",
    entry: [
        "./index1.html",
        "./../jquery.js",
        "./../bluebird.js",
        "./../example.css"
    ],
    output: {                                                          
        path: "C:/Dev/example/built",
        filename: "./example.bundle.js",
        publicPath: "http://www.example.com"
    },
    module: {
        loaders: [
            {
                test: /\.(?:gif|jpg|jpeg|svg)$/,
                loader: "file!url"
            },
            {
                test: /\.html$/,
                loader: "html"
            },
            {
                test: /\.png$/,
                loader: "url-loader?mimetype=image/png"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
        }   ],
        plugins: [
            new webpack.optimize.UglifyJsPlugin({minimize: true}),
            new webpack.ProvidePlugin({
                'window.jQuery': 'jquery',
                'window.$': 'jquery',
    })  ]   },
    resolve: {
        root: path.resolve("./index1.html"),
        modulesDirectories: ["node_modules", "built"],
        fallback: "C:/Dev"
    },
    resolveLoader: {
        fallback: "C:/Dev",
        modulesDirectories: ["node_modules"]
    }
}

C:\Dev\example\build\index1.html：此html文件的目标是为webpack指明正确的方向，以便将网站的所有信息收集到example.bundle.js文件中。我缩短了一条长的线（剪辑），排除了不相关的线，包括整个

正文

<!doctype html>
<html>
<head>

<script src="./../example.js"></script>
<link href="./../example.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css? (clip) type="text/css" />
<script src="./../jquery.js"></script>
<script src="./../bluebird.js"></script>
    
</head>

<body>

</body>
</html>

使用双星号，我想突出显示输出有两个错误的网页，并输出这两个错误。另外，我想强调css中引用的错误点。下面是这些线

C:\Dev\example\example.css：我只显示前12行，因为网页中引用的行是错误的；我添加了行号

 1  /* example web site
 2   * blah
 3   * blah
 4   * blah
 5   * blah
 6   * blah
 7   *
 8   * Version
 9   */
10
11  /* defaults */
12  body, div {

我的结论是：网页上引用的观点不是错误点。也许引用的要点适用于文件的缩小版本。或者是一些代码

当我将浏览器指向上面的index1.html时出现问题：所有内容和呈现都很好；JavaScript未启用。（与未正确处理css一致？）

C:\Dev\example\build\index2.html：这个html文件的目标是使用我将在web服务器上的index.html中使用的相同网页技术。我用改变index1.html的方法改变了这个

<!doctype html>
<html>
<head>

<script src="./example.bundle.js"></script>
<link href="https://fonts.googleapis.com/css? (clip) type="text/css" />

</head>

<body>

</body>
</html>


似乎您已经为Node.js开发以一种非常不寻常的方式设置了项目，这使得您的设置比需要的更加复杂。我不确定这是否是一个硬性要求，但既然您没有提到它是必需的，我假设您可以更改目录结构
使用本地依赖项
在Node.js中，每个项目的所有依赖项都是单独安装的。它使您能够在处理不同的项目时使用依赖项的不同版本，而无需手动切换这些依赖项。您应该将package.json
放在项目的根文件夹中（在您的情况下，我假设C:\Dev\example
），然后运行npm install webpack css loader style loader--save Dev
。是Node.js的包管理器，它与可执行文件预先捆绑在一起，因此应该已经安装在您的系统上。运行npm install
后，您应该会看到一个node\u modules
文件夹，其中包含所有这些特定于项目的依赖项。您不应该将这些依赖项提交到版本控制系统，因为它们可能包含在不同计算机上不可用的特定于平台的二进制文件。此项目中的每个开发人员都需要首先运行npm install

在脚本下配置常用命令
NPM提供了将通用命令添加到包.json
的可能性。这样，其他开发人员（包括“Future You”）只需要记住npm运行一些脚本，而不是所有的命令行选项。NPM的一个鲜为人知的特性是，它在运行时将/node\u modules/.bin
预先添加到$PATH
中，这意味着在脚本中，您可以引用安装在本地节点\u模块中的任何可执行文件，就像它是全局安装的一样。因此，您只需写下：
“脚本”：{
“开始”：“webpack--config./path/to/webpack.config.js”
}

它将使用您的本地网页安装。作为旁注：最好提供一个“开始”
脚本。只需运行npm start
即可调用它
你的网页配置
您的网页配置看起来不错，但我有一些建议：

您应该将开发内容和实际构建分开。通常，webpack.config.js
放在项目的根目录中，因为您只需运行webpack
，webpack就会在当前目录中查找配置。然后，您应该有一个src
或app
文件夹，其中包含所有开发文件，包括您提到的索引HTML文件。最后，创建一个build
文件夹，该文件夹在生成之前被完全擦除。这样，您的构建就不包含任何过时的文件
请勿在webpack.config中使用绝对路径。它使共享项目变得更加困难，包括将项目移动到另一个目录的“未来的你”。使用Node.js内置路径模块和特殊模块变量\uu dirname
解析绝对路径。您还可以使用require.resolve
来使用节点的解析算法
除非您知道自己在做什么，否则不要设置上下文
和公共路径
选项。从你提供的信息来看，我怀疑这些选择在这里是必要的
因为您已经在本地安装了所有依赖项，所以应该删除所有解析选项，因为它现在应该可以开箱即用
尽管允许，但不应忽略-l
 1  /* example web site
 2   * blah
 3   * blah
 4   * blah
 5   * blah
 6   * blah
 7   *
 8   * Version
 9   */
10
11  /* defaults */
12  body, div {

<!doctype html>
<html>
<head>

<script src="./example.bundle.js"></script>
<link href="https://fonts.googleapis.com/css? (clip) type="text/css" />

</head>

<body>

</body>
</html>