问题

有没有办法可以更改此处显示的任何文件以使用webpack进行部署？

详细

环境

Windows 10 Home -64，采用AMD A6的最新/东芝Satellite

Node 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：\开发\示例\内置\的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：\开发\示例\内置\ 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的反馈

它输出有关构建example.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文件的目标是使用我将在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进行部署？

感谢您花时间阅读。提前感谢任何回复。

需要更多细节？如果可以，我会提供它。

有没有办法可以更改此处显示的任何文件以使用webpack进行部署？

问题

详细

问题

0 个答案: