有没有办法可以改变这里显示的任何文件与webpack部署？
什么来了？ （1）短背景。 （2）问题。 （3）细节（简短;文件清单足够长，以显示相关信息）。 （4）再次提问。
简短的背景 ：我想用webpack部署我的网站。 webpack正在寻找style-loader和css-loader在错误的目录中，所以我的构build没有完成。
题
有没有办法可以改变这里显示的任何文件与webpack部署？
详情
环境
Windows 10 Home-64，最新版本/东芝Satellite A6
节点v6.2.0 / webpack 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：\开发\例子\build立\的package.json
{ "name": "example", "version": "0.0.1", "description": "example", "main": "example.bundle.js", "author": "Bald Eagle" }
调用webpack ：在C:\Dev\example\built的命令提示符下调用webpack（用两行代码）
node C:\Dev\node_modules\webpack\bin\webpack.js -p --display-reasons --display-error-details --display-modules --profile
C：\开发\例子\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 \ built \ index1.html ：这个HTML文件的目标是指出webpack正确的方向来收集网站的所有信息到它的example.bundle.js文件中。 我缩短了一条长线（夹子），排除了不相关的线条，包括整个body 。
<!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>
来自webpack的反馈
它输出有关构buildexample.bundle.js（用...表示）的常规信息，除了这些：（我添加了任何双星号**;我打破了一些长行并缩进了这些行的后面部分。
... [9] ./../example.css 919 bytes {0} [built] [**2 errors**] single entry ./../example.css [0] multi main WARNING in ./example.bundle.js from UglifyJs ... Condition always false [C:/Dev/~/style-loader! C:/Dev/~/css-loader!**./../example.css:10,0**] Dropping unreachable code [C:/Dev/~/style-loader! C:/Dev/~/css-loader!**./../example.css:12,0**] Side effects in initialization of unused variable update [C:/Dev/~/style-loader!C:/Dev/~/css-loader! **./../example.css:7,0**] **ERROR** in ./../example.css Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules/css-loader/index.js in C:/Dev/example/built\.. resolve file **C:/Dev/example/built\node_modules\css-loader\index.js doesn't exist** [plus more similarly inaccurate variants; it should be looking for C:\Dev\node_modules\css-loader\index.js; it's there] ... **ERROR** in ./../example.css Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules/style-loader/addStyles.js in C:/Dev/example/built\.. resolve file **C:/Dev/example/built\node_modules\style-loader\addStyles.js.webpack.js doesn't exist** [plus more similarly inaccurate variants] ...
用双星号，我想强调，webpack输出，会有两个错误，并输出这两个错误。 另外，我想强调在CSS中引用的错误点。 那些线在下面。
C：\ Dev \ example \ example.css ：我只显示前十二行，因为webpack被引用为错误; 我添加了行号。
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 \ built \ index2.html ：这个HTML文件的目标是使用与web服务器上index.html中使用的相同的webpack技术。 我改变了这一点，我改变了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>
当我将浏览器指向上面的index2.html时，出现以下问题 ：所有内容显示（包括三个图像），但是（1）JavaScript没有启用，（2）没有来自css的效果（无颜色或定位等） （符合不正确处理css？）
题
有没有办法可以改变这里显示的任何文件与webpack部署？
感谢您花时间阅读。 预先感谢任何回应。
需要更多的细节？ 如果可以，我会提供。
似乎你已经为Node.js开发设置了一个非常不寻常的风格，这使得你的设置比需要的复杂。 我不确定这是否是一个困难的要求，但由于你没有提到它是必需的，我假设你可以改变你的目录结构。
使用本地依赖关系
在Node.js中，为每个项目分别安装所有依赖项。 它使您能够在处理不同项目时使用不同版本的依赖项，而无需手动切换这些依赖项。 你应该把package.json放在项目的根目录下（我假设你的C:\Dev\example是C:\Dev\example ），然后运行npm install webpack css-loader style-loader --save-dev 。 NPM是Node.js的包pipe理器，与可执行文件捆绑在一起，因此应该已经安装在您的系统上。 运行npm install您应该会看到一个包含所有这些项目特定依赖项的node_modules文件夹。 您不应该将这些依赖关系提交给版本控制系统，因为它们可能包含特定于平台的二进制文件，这些二进制文件在不同的计算机上不可用 此项目中的每个开发人员都需要先运行npm install 。
在脚本下configuration您的通用命令
NPM提供了将常用命令作为scripts添加到package.json的可能性。 这样，其他开发者（包括“未来你”）只需要记住npm run some-script而不是所有的命令行选项。 NPM的一个鲜为人知的特性是，它将./node_modules/.bin到运行时的$PATH ，这意味着在scripts内部可以引用安装在本地 node_modules任何可执行文件，就像它是全局安装的一样。 因此你只需要写：
"scripts": { "start": "webpack --config ./path/to/webpack.config.js" }
它会使用你的本地webpack安装。 作为一个侧面说明：最好提供一个"start"脚本。 它可以通过运行npm start来调用。
你的webpackconfiguration
你的webpackconfiguration看起来不错，但我有一些build议：
-
你应该分开你的开发的东西和实际的构build。 通常情况下，
webpack.config.js被放在你的项目的根目录下，因为你只需要运行webpack，webpack就会在当前目录下寻找一个configuration。 然后，你应该有一个src或app文件夹，里面包含了所有的开发文件，包括索引HTML文件。 最后，创build一个build文件夹，在构build之前完全擦除。 这样，你的版本不包含任何过时的文件。 -
不要在你的webpack.config中使用绝对path。 它使得分享你的项目变得更加困难 – 包括将项目移动到另一个目录的“Future You”。 使用Node.js内buildpath模块和特殊模块variables
__dirname来parsing绝对path。 您也可以使用require.resolve来使用Node的parsingalgorithm。 -
除非你知道你在做什么，否则不要设置
context和publicPath选项。 根据你提供的信息，我怀疑这些选项是必要的。 -
由于您已经在本地安装了所有的依赖关系，因此应该删除所有的parsing选项，因为它现在可以立即使用。
-
尽pipe它是允许的，你不应该在你的加载程序configuration中忽略
-loader后缀。 当你在node_modules有一个css或html模块时，它会导致难以理解的错误。
index.html文件的问题
webpack是一个JavaScript打包器。 这就是为什么你需要有一个CSS或HTML加载器，如果你想包括 HTML或CSS。 这些加载器通过将文本内容转换为导出的string，将HTML或CSS转换为JavaScript模块。 这有一些很好的优点，如热模块更换或CSS模块 。 但是这也意味着您不能使用HTML或CSS文件作为您网站的唯一入口点。 每个HTML和CSS最终都会被翻译成JavaScript。 对于那些需要JS的单页面应用程序来说，这种权衡是可以的，但是对于那些试图在静态站点上使用webpack的人来说，这可能是令人惊讶的。
由于你不是第一个有这个问题的人，所以已经出现了几种解决scheme。 我的build议是将HTML Webpack插件与Extract Text Webpack插件结合使用。
Extract Text Webpack Plugin可以用来从包中提取静态的JSstring到一个特殊的文件中。 这正是你需要从JS包中删除CSS的。
HTML Webpack插件创build一个包含所有生成的JS和CSS文件的索引HTML文件。 开箱即用，它只会生成一个没有内容的HTML文件（通常指的是单页面应用程序的典型应用程序shell）。 由于您的索引HTML文件中已经包含内容，因此您需要将HTML文件configuration为模板。 您需要为每个HTML文件添加一个插件。
这些插件工作得很好，但是这个设置已经非常复杂了。 你应该决定是否要使用webpack只为JS或HTML和CSS。