从绝对路径编译webpack配置（与webpack配置文件路径不同的路径）

时间：2018-05-29 02:40:41

标签： angular webpack bundling-and-minification

我已将webpack添加到angular应用程序，并能够使用“Task Runner Explorer”或“npm run build：prod”在根目录中编译Web包配置从命令提示符的项目。我想在命令提示符下编译webpack配置作为msbuild的一部分。我尝试过以下命令，但因为无法解析模块而出现错误

  

E：\ Website \ Sample＆gt; E：\ Website \ Sample \ sampleapp \ node_modules.bin \ webpack.cmd --config E：\ Website \ Sample \ sampleapp \ webpack.prod.js 

ERROR in Entry module not found: Error: Can't resolve 'awesome-typescript-loader' in 'E:\Website\Sample'

ERROR in Entry module not found: Error: Can't resolve 'awesome-typescript-loader' in 'E:\Website\Sample'

ERROR in multi jquery bootstrap
Module not found: Error: Can't resolve 'bootstrap' in 'E:\Website\Sample'
 @ multi jquery bootstrap

ERROR in multi jquery bootstrap
Module not found: Error: Can't resolve 'jquery' in 'E:\Website\Sample'
 @ multi jquery bootstrap

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'E:\Website\Sample\index_template.html' in 'E:\Website\Sample':
  Error: Can't resolve 'E:\Website\Sample\index_template.html' in 'E:\Website\Sample'

  - compiler.js:76
    [sampleapp]/[html-webpack-plugin]/lib/compiler.js:76:16

  - Compiler.js:300 compile
    [sampleapp]/[webpack]/lib/Compiler.js:300:11

  - Compiler.js:510 applyPluginsAsync.err
    [sampleapp]/[webpack]/lib/Compiler.js:510:14

  - Tapable.js:202 next
    [sampleapp]/[tapable]/lib/Tapable.js:202:11

  - CachePlugin.js:78 Compiler.<anonymous>
    [sampleapp]/[webpack]/lib/CachePlugin.js:78:5

这是webpack配置文件 的 webpack.common.js 

const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    target: "web",

    resolve: {
        // Add ".ts" and ".tsx" as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json", ".html"],
    },

    module: {
        loaders: [
            // All files with a ".ts" or ".tsx" extension will be handled by "awesome-typescript-loader".
            { test: /.ts$/, loader: "awesome-typescript-loader" },

            // All image files will be handled here
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    "file-loader"
                ]
            },

            // All font files will be handled here
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: "file-loader"
                    }
                ]
            },

            // All files with ".html" will be handled 
            { test: /\.html$/, loader: "html-loader" },

            // All output ".js" files will have any sourcemaps re-processed by "source-map-loader".
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    plugins: ([
        // make sure we allow any jquery usages outside of our webpack modules new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),

        // Clean dist folder.
        new CleanWebpackPlugin(["./dist"], {
            "verbose": true // Write logs to console.
        }),

        // avoid publishing when compilation failed.
        new webpack.NoEmitOnErrorsPlugin(),

        new HtmlWebpackPlugin({
            inject: "body",
            filename: "../index.html",
            template: "index_template.html"
        })
    ]),

    // pretty terminal output
    stats: { colors: true }
};

Webpack.prod.js 

const path = require("path");
const webpack = require("webpack");
const Merge = require("webpack-merge");
const CommonConfig = require("./webpack.common.js");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

// Images, Fonts Loading: https://webpack.js.org/guides/asset-management/
// LESS Loading: https://webpack.js.org/loaders/less-loader/
// Code splitting: https://webpack.js.org/guides/code-splitting
// Caching: https://webpack.js.org/guides/caching/

const extractLess = new ExtractTextPlugin({
    filename: "[name].[contenthash].css"
});

module.exports = Merge(CommonConfig, {
    devtool: "hidden-source-map",

    entry: {

        index: path.resolve(__dirname, "app/index.ts"),
        main: path.resolve(__dirname, "main.ts"),
        vendor: [
            "jquery",
            "bootstrap",
        ]
    },

    output: {
        filename: "[name].[chunkhash].js",
        path: __dirname + "/dist",
        // Making sure the CSS and JS files that are split out do not break the template cshtml.
        publicPath: "/dist/",
        // Defining a global var that can used to call functions from within ASP.NET Razor pages.
        library: "aspAndWebpack",
        libraryTarget: "var"
    },

    module: {
        loaders: [
            // All CSS files will be handled here
            {
                test: /\.css$/,
                use: extractLess.extract({ fallback: "style-loader", use: ["css-loader"] })
            },

            // All files with ".less" will be handled and transpiled to css
            {
                test: /\.less$/,
                use: extractLess.extract({
                    use: [{
                        loader: "css-loader", options: {
                            sourceMap: true
                        }
                    }, {
                        loader: "less-loader", options: {
                            sourceMap: true
                        }
                    }]
                })
            },
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                "NODE_ENV": JSON.stringify("production")
            }
        }),

        // Split out library into seperate bundle and remove from app bundle.
        new webpack.HashedModuleIdsPlugin(),
        //new webpack.optimize.DedupePlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),

        //new webpack.optimize.CommonsChunkPlugin('common'),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor"
        }),

        // Webpack boilerplate and manifest in seperate file.
        new webpack.optimize.CommonsChunkPlugin({
            name: "runtime"
        }),

        // Write out CSS bundle to its own file:
        extractLess,

        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        }),

        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            compress: {
                screw_ie8: true
            },
            comments: false
        })
    ]
})

的package.json 

 "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "2.5.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "lodash": "4.17.10",
    "moment": "2.22.1",
    "ngx-progressbar": "^2.1.1",
    "primeng": "5.2.0",
    "quill": "1.3.1",
    "adal-angular": "1.0.17",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "systemjs": "^0.21.3",
    "typescript": "2.7.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@types/lodash": "4.14.108",
    "@types/node": "*",
    "awesome-typescript-loader": "^3.2.3",
    "bootstrap-loader": "^2.2.0",
    "bootstrap-sass": "^3.3.7",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "less": "3.0.4",
    "less-loader": "4.0.5",
    "node-sass": "^4.8.3",
    "resolve-url-loader": "^2.3.0",
    "sass-loader": "^6.0.7",
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.18.2",
    "tslint": "^5.9.1",
    "url-loader": "^1.0.1",
    "webpack": "^3.11.0",
    "webpack-merge": "^4.1.2"
  },

需要帮助从绝对路径编译配置作为msbuild（CDPx）的一部分。我不希望使用afterbuild将编译作为csproj的一部分。

1 个答案:

答案 0 :(得分：0)

这意味着它找不到包含框架内的node_modules文件夹。我不确定如何自定义直接节点指向根目录之外，我通常会看到人们只是在该子目录中安装另一个package.json文件和node_modules文件夹以使其工作。

看起来很丑陋，我会接下来的打击

相关问题
最新问题