没有资产文件夹将 Angular 2 应用程序与最新的 webpack 捆绑在一起

Posted 2023-03-07

【中文标题】没有资产文件夹将 Angular 2 应用程序与最新的 webpack 捆绑在一起

【英文标题】：No assets folder Bundling Angular 2 Applicaiton with newest webpack

【发布时间】：2017-07-12 03:20:32

【问题描述】：

我使用最新版本的 Angular-cli (Beta.32.3) 创建了一个 Angular 2 项目。 之后我使用 ng 弹出 命令生成 webpack.config.js 文件。

现在我可以使用 npm run build 构建我的项目。

但是 webpack 不会复制我的资产文件夹，我有图像。 我的 GlobCopyWebpackPlugin 应该这样做，还是我错了？

这是我的 webpack.config.js：

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const  NoEmitOnErrorsPlugin, LoaderOptionsPlugin  = require('webpack');
const  BaseHrefWebpackPlugin, GlobCopyWebpackPlugin  = require('@angular/cli/plugins/webpack');
const  CommonsChunkPlugin  = require('webpack').optimize;
const  AotPlugin  = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];




module.exports = 
  "devtool": "source-map",
  "resolve": 
    "extensions": [
      ".ts",
      ".js"
    ],
    "modules": [
      "./node_modules"
    ]
  ,
  "resolveLoader": 
    "modules": [
      "./node_modules"
    ]
  ,
  "entry": 
    "main": [
      "./src\\main.ts"
    ],
    "polyfills": [
      "./src\\polyfills.ts"
    ],
    "styles": [
      "./src\\styles.scss"
    ]
  ,
  "output": 
    "path": path.join(process.cwd(), "dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js"
  ,
  "module": 
    "rules": [
      
        "enforce": "pre",
        "test": /\.js$/,
        "loader": "source-map-loader",
        "exclude": [
          /\/node_modules\//
        ]
      ,
      
        "test": /\.json$/,
        "loader": "json-loader"
      ,
      
        "test": /\.html$/,
        "loader": "raw-loader"
      ,
      
        "test": /\.(eot|svg)$/,
        "loader": "file-loader?name=[name].[ext]"
      ,
      
        "test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
        "loader": "url-loader?name=[name].[ext]&limit=10000"
      ,
      
        "exclude": [
          path.join(process.cwd(), "src\\styles.scss")
        ],
        "test": /\.css$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?\"sourceMap\":false,\"importLoaders\":1",
          "postcss-loader"
        ]
      ,
      
        "exclude": [
          path.join(process.cwd(), "src\\styles.scss")
        ],
        "test": /\.scss$|\.sass$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?\"sourceMap\":false,\"importLoaders\":1",
          "postcss-loader",
          "sass-loader"
        ]
      ,
      
        "exclude": [
          path.join(process.cwd(), "src\\styles.scss")
        ],
        "test": /\.less$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?\"sourceMap\":false,\"importLoaders\":1",
          "postcss-loader",
          "less-loader"
        ]
      ,
      
        "exclude": [
          path.join(process.cwd(), "src\\styles.scss")
        ],
        "test": /\.styl$/,
        "loaders": [
          "exports-loader?module.exports.toString()",
          "css-loader?\"sourceMap\":false,\"importLoaders\":1",
          "postcss-loader",
          "stylus-loader?\"sourceMap\":false,\"paths\":[]"
        ]
      ,
      
        "include": [
          path.join(process.cwd(), "src\\styles.scss")
        ],
        "test": /\.css$/,
        "loaders": ExtractTextPlugin.extract(
  "use": [
    "css-loader?\"sourceMap\":false,\"importLoaders\":1",
    "postcss-loader"
  ],
  "fallback": "style-loader",
  "publicPath": ""
)
      ,
      
        "include": [
          path.join(process.cwd(), "src\\styles.scss")
        ],
        "test": /\.scss$|\.sass$/,
        "loaders": ExtractTextPlugin.extract(
  "use": [
    "css-loader?\"sourceMap\":false,\"importLoaders\":1",
    "postcss-loader",
    "sass-loader"
  ],
  "fallback": "style-loader",
  "publicPath": ""
)
      ,
      
        "include": [
          path.join(process.cwd(), "src\\styles.scss")
        ],
        "test": /\.less$/,
        "loaders": ExtractTextPlugin.extract(
  "use": [
    "css-loader?\"sourceMap\":false,\"importLoaders\":1",
    "postcss-loader",
    "less-loader"
  ],
  "fallback": "style-loader",
  "publicPath": ""
)
      ,
      
        "include": [
          path.join(process.cwd(), "src\\styles.scss")
        ],
        "test": /\.styl$/,
        "loaders": ExtractTextPlugin.extract(
  "use": [
    "css-loader?\"sourceMap\":false,\"importLoaders\":1",
    "postcss-loader",
    "stylus-loader?\"sourceMap\":false,\"paths\":[]"
  ],
  "fallback": "style-loader",
  "publicPath": ""
)
      ,
      
        "test": /\.ts$/,
        "loader": "@ngtools/webpack",
        "exclude": [
          /\.(spec|e2e)\.ts$/
        ]
      
    ]
  ,
  "plugins": [
    new NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin(
      "template": "./src\\index.html",
      "filename": "./index.html",
      "hash": false,
      "inject": true,
      "compile": true,
      "favicon": "./src/assets/favicon.ico",
      "minify": false,
      "cache": true,
      "showErrors": true,
      "chunks": "all",
      "excludeChunks": [],
      "title": "Webpack App",
      "xhtml": true,
      "chunksSortMode": function sort(left, right) 
        let leftIndex = entryPoints.indexOf(left.names[0]);
        let rightindex = entryPoints.indexOf(right.names[0]);
        if (leftIndex > rightindex) 
            return 1;
        
        else if (leftIndex < rightindex) 
            return -1;
        
        else 
            return 0;
        
    
    ),
    new BaseHrefWebpackPlugin(),
    new CommonsChunkPlugin(
      "name": "inline",
      "minChunks": null
    ),
    new CommonsChunkPlugin(
      "name": "vendor",
      "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
      "chunks": [
        "main"
      ]
    ),
    new GlobCopyWebpackPlugin(
      "patterns": [
        "assets",
        "favicon.ico"
      ],
      "globOptions": 
        "cwd": "**/src",
        "dot": true,
        "ignore": "**/.gitkeep"
      
    ),
    new ProgressPlugin(),
    new ExtractTextPlugin(
      "filename": "[name].bundle.css",
      "disable": true
    ),
    new LoaderOptionsPlugin(
      "sourceMap": false,
      "options": 
        "postcss": [
          autoprefixer()
        ],
        "sassLoader": 
          "sourceMap": false,
          "includePaths": []
        ,
        "lessLoader": 
          "sourceMap": false
        ,
        "context": ""
      
    ),
    new AotPlugin(
      "tsConfigPath": "src\\tsconfig.json",
      "mainPath": "main.ts",
      "hostReplacementPaths": 
        "environments\\environment.ts": "environments\\environment.ts"
      ,
      "exclude": [
        "**/*.spec.ts",
        "M:\\smeady\\src\\test.ts"
      ],
      "skipCodeGeneration": true
    )
  ],
  "node": 
    "fs": "empty",
    "global": true,
    "crypto": "empty",
    "tls": "empty",
    "net": "empty",
    "process": true,
    "module": false,
    "clearImmediate": false,
    "setImmediate": false
  
;

【问题讨论】：

你找到这个问题的答案了吗？我遇到了完全相同的问题，除了它只发生在 Linux 上。当我在 Windows 7 上运行我的项目时，我的资产文件夹被复制得很好。

【参考方案1】：

看来我通过阅读此问题找到了问题的答案： https://github.com/angular/angular-cli/issues/5811

基本上，我必须将 webpack.config.js 中的 globOptions 更改为：

new GlobCopyWebpackPlugin(
    "patterns": [
        "assets",
        "favicon.ico"
    ],
    "globOptions": 
        "cwd": "C:/Users/James/projects/mine/address-label-printer/src",
        "dot": true,
        "ignore": "**/.gitkeep"
    
),

到：

new GlobCopyWebpackPlugin(
    "patterns": [
        "assets",
        "favicon.ico"
    ],
    "globOptions": 
        "cwd": path.join(process.cwd(), "src"),
        "dot": true,
        "ignore": "**/.gitkeep"
    
),

希望对你有帮助