Question

在添加了angular route之后，我遇到了webpack配置的大问题。 AngularJS（1）。

我的错误：

Ofc如果屏幕不清晰，我会重写它。

我的package.json配置：

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "prod": "npm run clean && set NODE_ENV=production && webpack -p",
    "clean": "rimraf ./dist/*"
  },

app.js：

const css = require('./app.scss');
var angular = require('angular');
var ngRoute = require('angular-route');

var ngModule = angular.module('app', ['ngRoute']);

ngModule.config(function($routeProvider){
    $routeProvider

    .when('/', {
        template: require('./html/index.html')
    })

    .when('/program', {
        templateUrl: './html/program.html'
    })
 });

webpack.config.js：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var path = require("path");
var bootstrapEntryPoints = require('./webpack.bootstrap.config');

var isProd = process.env.NODE_ENV === 'production';
var cssDev = ['style-loader', 'css-loader', 'sass-loader'];
var cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader'],
    allChunks: true
})
var cssConfig = isProd ? cssProd : cssDev;

    var bootstrapConfig = isProd ? bootstrapEntryPoints.prod : bootstrapEntryPoints.dev;


module.exports = {
    stats:{
        colors: true,
        modules: true,
        reasons: true,
        errorDetails: true
    },
    entry: {
        app: './src/js/app.js',
        contact: './src/js/contact.js',
        register: './src/js/register.js',
        login: './src/js/login.js',
        program: './src/js/program.js',
        adminNetworks: './src/js/adminNetworks.js',
        automatic: './src/js/automatic.js',
        bootstrap: bootstrapConfig
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name].bundle.js'
    },

之后，只需添加HtmlWebpackPlugin，ExtractTextPlugin，模块规则和devServer配置。

我不知道要改变什么......看起来我添加了错误的路径，但是感到困惑，我尝试了我读过的每一个组合。

请帮忙

Answer 1

哇，终于可行了。

首先，我将app.js移动到主文件夹中以避免错误的路径。其次，由于自动添加哈希值，我在url中的路径很糟糕，例如：（/＃！#program）。为避免这种情况，我不得不更改配置代码：

ngModule.config(function($routeProvider, $locationProvider){
    $locationProvider.hashPrefix('');
    $routeProvider

    .when('/', {
        templateUrl: 'index.html'
    })
    .when('/program', {
        templateUrl: 'program.html'
    })
});

我还没有

[Deprecation]主线程上的同步XMLHttpRequest是由于其对最终用户的不利影响而被弃用经验。如需更多帮助，请查看https://xhr.spec.whatwg.org/。

问题，但路由工作正常，我猜...

希望能帮助某人：）

具有角度路由配置的Webpack - 浏览器具有有效配置，无法解析文件

1 个答案: